diff --git a/plugin-src/transformers/partials/transformLayout.ts b/plugin-src/transformers/partials/transformLayout.ts index a256207..2a0e7ba 100644 --- a/plugin-src/transformers/partials/transformLayout.ts +++ b/plugin-src/transformers/partials/transformLayout.ts @@ -16,7 +16,11 @@ export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => { return { layout: node.layoutMode !== 'NONE' ? 'flex' : undefined, layoutFlexDir: translateLayoutFlexDir(node.layoutMode), - layoutGap: translateLayoutGap(node.layoutMode, node.itemSpacing), + layoutGap: translateLayoutGap( + node.layoutMode, + node.itemSpacing, + node.primaryAxisAlignItems === 'SPACE_BETWEEN' + ), layoutWrapType: translateLayoutWrapType(node.layoutWrap), layoutPadding: translateLayoutPadding(node), layoutJustifyContent: translateLayoutJustifyContent(node), diff --git a/plugin-src/translators/translateLayout.ts b/plugin-src/translators/translateLayout.ts index d2b595c..f24544d 100644 --- a/plugin-src/translators/translateLayout.ts +++ b/plugin-src/translators/translateLayout.ts @@ -25,7 +25,18 @@ export const translateLayoutFlexDir = (layoutMode: FigmaLayoutMode): LayoutFlexD } }; -export const translateLayoutGap = (layoutMode: FigmaLayoutMode, itemSpacing: number): LayoutGap => { +export const translateLayoutGap = ( + layoutMode: FigmaLayoutMode, + itemSpacing: number, + auto: boolean = false +): LayoutGap => { + if (auto) { + return { + rowGap: 0, + columnGap: 0 + }; + } + return { rowGap: layoutMode === 'VERTICAL' ? itemSpacing : 0, columnGap: layoutMode === 'HORIZONTAL' ? itemSpacing : 0