wip

plugin-src/transformers/partials/index.ts

@@ -6,6 +6,7 @@ export * from './transformDimensionAndPosition';
 export * from './transformEffects';
 export * from './transformFigmaIds';
 export * from './transformFills';
+export * from './transformLayout';
 export * from './transformProportion';
 export * from './transformRotationAndPosition';
 export * from './transformSceneNode';

plugin-src/transformers/partials/transformLayout.ts

@@ -0,0 +1,25 @@
+import {
+  translateLayoutFlexDir,
+  translateLayoutGap,
+  translateLayoutJustifyContent,
+  translateLayoutJustifyItems,
+  translateLayoutPadding,
+  translateLayoutWrapType
+} from '@plugin/translators';
+
+import { LayoutAttributes } from '@ui/lib/types/shapes/layout';
+
+export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
+  console.log(node);
+  return {
+    layout: node.layoutMode !== 'NONE' ? 'flex' : undefined,
+    layoutFlexDir: translateLayoutFlexDir(node.layoutMode),
+    layoutGap: translateLayoutGap(node.layoutMode, node.itemSpacing),
+    layoutWrapType: translateLayoutWrapType(node.layoutWrap),
+    layoutPadding: translateLayoutPadding(node),
+    layoutJustifyContent: translateLayoutJustifyContent(node),
+    layoutJustifyItems: translateLayoutJustifyItems(node),
+    layoutAlignContent: translateLayoutJustifyContent(node),
+    layoutAlignItems: translateLayoutJustifyItems(node)
+  };
+};

plugin-src/transformers/transformFrameNode.ts

@@ -1,4 +1,5 @@
 import {
+  transformAutoLayout,
   transformBlend,
   transformChildren,
   transformConstraints,
@@ -36,7 +37,8 @@ export const transformFrameNode = async (
       ...transformProportion(node),
       ...transformCornerRadius(node),
       ...transformEffects(node),
-      ...transformConstraints(node)
+      ...transformConstraints(node),
+      ...transformAutoLayout(node)
     };
   }
 

plugin-src/translators/index.ts

@@ -3,5 +3,6 @@ export * from './translateBlurEffects';
 export * from './translateBoolType';
 export * from './translateChildren';
 export * from './translateConstraints';
+export * from './translateLayout';
 export * from './translateShadowEffects';
 export * from './translateStrokes';

plugin-src/translators/translateLayout.ts

@@ -0,0 +1,75 @@
+import {
+  JustifyAlignContent,
+  JustifyAlignItems,
+  LayoutFlexDir,
+  LayoutGap,
+  LayoutPadding,
+  LayoutWrapType
+} from '@ui/lib/types/shapes/layout';
+
+type FigmaLayoutMode = 'NONE' | 'HORIZONTAL' | 'VERTICAL';
+
+type FigmaWrap = 'NO_WRAP' | 'WRAP';
+export const translateLayoutFlexDir = (layoutMode: FigmaLayoutMode): LayoutFlexDir | undefined => {
+  switch (layoutMode) {
+    case 'HORIZONTAL':
+      return 'row-reverse';
+    case 'VERTICAL':
+      return 'column-reverse';
+    default:
+      return;
+  }
+};
+
+export const translateLayoutGap = (layoutMode: FigmaLayoutMode, itemSpacing: number): LayoutGap => {
+  return {
+    rowGap: layoutMode === 'VERTICAL' ? itemSpacing : 0,
+    columnGap: layoutMode === 'HORIZONTAL' ? itemSpacing : 0
+  };
+};
+
+export const translateLayoutWrapType = (wrap: FigmaWrap): LayoutWrapType => {
+  switch (wrap) {
+    case 'NO_WRAP':
+      return 'nowrap';
+    case 'WRAP':
+      return 'wrap';
+  }
+};
+
+export const translateLayoutPadding = (node: BaseFrameMixin): LayoutPadding => {
+  return {
+    p1: node.paddingTop,
+    p2: node.paddingRight,
+    p3: node.paddingBottom,
+    p4: node.paddingLeft
+  };
+};
+
+export const translateLayoutJustifyContent = (node: BaseFrameMixin): JustifyAlignContent => {
+  switch (node.primaryAxisAlignItems) {
+    case 'MIN':
+      return 'start';
+    case 'CENTER':
+      return 'center';
+    case 'MAX':
+      return 'end';
+    case 'SPACE_BETWEEN':
+      return 'space-between';
+    default:
+      return 'stretch';
+  }
+};
+
+export const translateLayoutJustifyItems = (node: BaseFrameMixin): JustifyAlignItems => {
+  switch (node.counterAxisAlignItems) {
+    case 'MIN':
+      return 'start';
+    case 'CENTER':
+      return 'center';
+    case 'MAX':
+      return 'end';
+    default:
+      return 'stretch';
+  }
+};

ui-src/lib/types/shapes/layout.ts

@@ -56,7 +56,7 @@ export type LayoutChildAttributes = {
   layoutItemZIndex?: number;
 };
 
-type JustifyAlignContent =
+export type JustifyAlignContent =
   | 'start'
   | 'center'
   | 'end'
@@ -65,30 +65,38 @@ type JustifyAlignContent =
   | 'space-evenly'
   | 'stretch';
 
-type JustifyAlignItems = 'start' | 'end' | 'center' | 'stretch';
+export type JustifyAlignItems = 'start' | 'end' | 'center' | 'stretch';
+
+export type LayoutFlexDir =
+  | 'row'
+  | 'reverse-row'
+  | 'row-reverse'
+  | 'column'
+  | 'reverse-column'
+  | 'column-reverse';
+
+export type LayoutGap = {
+  rowGap?: number;
+  columnGap?: number;
+};
+
+export type LayoutWrapType = 'wrap' | 'nowrap' | 'no-wrap';
+
+export type LayoutPadding = {
+  p1?: number;
+  p2?: number;
+  p3?: number;
+  p4?: number;
+};
 
 export type LayoutAttributes = {
   layout?: 'flex' | 'grid';
-  layoutFlexDir?:
+  layoutFlexDir?: LayoutFlexDir;
-    | 'row'
+  layoutGap?: LayoutGap;
-    | 'reverse-row'
-    | 'row-reverse'
-    | 'column'
-    | 'reverse-column'
-    | 'column-reverse';
-  layoutGap?: {
-    rowGap?: number;
-    columnGap?: number;
-  };
   layoutGapType?: 'simple' | 'multiple';
-  layoutWrapType?: 'wrap' | 'nowrap' | 'no-wrap';
+  layoutWrapType?: LayoutWrapType;
   layoutPaddingType?: 'simple' | 'multiple';
-  layoutPadding?: {
+  layoutPadding?: LayoutPadding;
-    p1?: number;
-    p2?: number;
-    p3?: number;
-    p4?: number;
-  };
   layoutJustifyContent?: JustifyAlignContent;
   layoutJustifyItems?: JustifyAlignItems;
   layoutAlignContent?: JustifyAlignContent;