From beb3caa5e0f28c0cc6a386226f2f3467c59700de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20S=C3=A1nchez?= Date: Tue, 18 Jun 2024 13:10:30 +0200 Subject: [PATCH] Fix hug in frames (#174) * fix hug in frames * changeset * fixes --- .changeset/lucky-baboons-joke.md | 5 +++++ plugin-src/transformers/partials/transformLayout.ts | 5 +++-- plugin-src/transformers/transformComponentNode.ts | 2 +- plugin-src/transformers/transformFrameNode.ts | 2 +- plugin-src/transformers/transformInstanceNode.ts | 2 +- plugin-src/translators/translateLayout.ts | 7 +++++-- 6 files changed, 16 insertions(+), 7 deletions(-) create mode 100644 .changeset/lucky-baboons-joke.md diff --git a/.changeset/lucky-baboons-joke.md b/.changeset/lucky-baboons-joke.md new file mode 100644 index 0000000..cdcf1e6 --- /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 6f23531..1882d7d 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 eba890a..5514877 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 c5b34f0..2dea828 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 730752a..08a3862 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 f24544d..238ef92 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'; }