diff --git a/.changeset/lucky-baboons-joke.md b/.changeset/lucky-baboons-joke.md new file mode 100644 index 00000000..cdcf1e67 --- /dev/null +++ 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 index 6f235319..1882d7d8 100644 --- 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 index eba890a9..5514877b 100644 --- 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 index c5b34f09..2dea828b 100644 --- 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 index 730752a3..08a38625 100644 --- 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 index f24544db..238ef929 100644 --- 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'; }