Fix hug in frames (#174)

* fix hug in frames * changeset * fixes
penpot · Jun 18, 2024 · beb3caa · beb3caa
1 parent 738ebfe
commit beb3caa
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 7 deletions.
diff --git a/.changeset/lucky-baboons-joke.md b/.changeset/lucky-baboons-joke.md
@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Fix Hug in Frames
diff --git a/plugin-src/transformers/partials/transformLayout.ts b/plugin-src/transformers/partials/transformLayout.ts
@@ -31,7 +31,8 @@ export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
 };
 
 export const transformLayoutAttributes = (
-  node: LayoutMixin
+  node: LayoutMixin,
+  isFrame: boolean = false
 ): Pick<
   LayoutChildAttributes,
   | 'layoutItemH-Sizing'
@@ -43,7 +44,7 @@ export const transformLayoutAttributes = (
   | 'layoutItemMinW'
 > => {
   return {
-    'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal),
+    'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal, isFrame),
     'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical),
     'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE',
     'layoutItemMaxH': node.maxHeight ?? undefined,

diff --git a/plugin-src/transformers/transformComponentNode.ts b/plugin-src/transformers/transformComponentNode.ts
@@ -34,7 +34,7 @@ export const transformComponentNode = async (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
-    ...transformLayoutAttributes(node),
+    ...transformLayoutAttributes(node, true),
     ...transformCornerRadius(node),
     ...(await transformChildren(node, node.rotation + baseRotation)),
     ...transformDimension(node),

diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts
@@ -45,7 +45,7 @@ export const transformFrameNode = async (
       // @see: https://forum.figma.com/t/add-a-blendmode-property-for-sectionnode/58560
       ...transformBlend(node),
       ...transformProportion(node),
-      ...transformLayoutAttributes(node),
+      ...transformLayoutAttributes(node, true),
       ...transformCornerRadius(node),
       ...transformEffects(node),
       ...transformConstraints(node),

diff --git a/plugin-src/transformers/transformInstanceNode.ts b/plugin-src/transformers/transformInstanceNode.ts
@@ -59,7 +59,7 @@ export const transformInstanceNode = async (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
-    ...transformLayoutAttributes(node),
+    ...transformLayoutAttributes(node, true),
     ...transformCornerRadius(node),
     ...transformDimension(node),
     ...transformRotationAndPosition(node, baseRotation),

diff --git a/plugin-src/translators/translateLayout.ts b/plugin-src/translators/translateLayout.ts
@@ -115,12 +115,15 @@ export const translateLayoutAlignItems = (node: BaseFrameMixin): JustifyAlignIte
   }
 };
 
-export const translateLayoutSizing = (sizing: FigmaLayoutSizing): LayoutSizing => {
+export const translateLayoutSizing = (
+  sizing: FigmaLayoutSizing,
+  isFrame: boolean = false
+): LayoutSizing => {
   switch (sizing) {
     case 'FIXED':
       return 'fix';
     case 'HUG':
-      return 'auto';
+      return isFrame ? 'fix' : 'auto'; // @TODO: Penpot does not handle hug in frames as figma does
     case 'FILL':
       return 'fill';
   }