Autolayout

plugin-src/findAllTextnodes.ts

@@ -15,7 +15,7 @@ export const findAllTextNodes = async () => {
         extractMissingFonts(node, fonts);
       }
 
-      sleep(0);
+      await sleep(0);
     }
   }
 

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,48 @@
+import {
+  translateLayoutAlignContent,
+  translateLayoutAlignItems,
+  translateLayoutFlexDir,
+  translateLayoutGap,
+  translateLayoutJustifyContent,
+  translateLayoutJustifyItems,
+  translateLayoutPadding,
+  translateLayoutSizing,
+  translateLayoutWrapType
+} from '@plugin/translators';
+
+import { LayoutAttributes, LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
+
+export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
+  return {
+    layout: node.layoutMode !== 'NONE' ? 'flex' : undefined,
+    layoutFlexDir: translateLayoutFlexDir(node.layoutMode),
+    layoutGap: translateLayoutGap(
+      node.layoutMode,
+      node.itemSpacing,
+      node.primaryAxisAlignItems === 'SPACE_BETWEEN'
+    ),
+    layoutWrapType: translateLayoutWrapType(node.layoutWrap),
+    layoutPadding: translateLayoutPadding(node),
+    layoutJustifyContent: translateLayoutJustifyContent(node),
+    layoutJustifyItems: translateLayoutJustifyItems(node),
+    layoutAlignContent: translateLayoutAlignContent(node),
+    layoutAlignItems: translateLayoutAlignItems(node)
+  };
+};
+
+export const transformLayoutSizing = (
+  node: LayoutMixin
+): Pick<LayoutChildAttributes, 'layoutItemH-Sizing' | 'layoutItemV-Sizing'> => {
+  return {
+    'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal),
+    'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical)
+  };
+};
+
+export const transformAutoLayoutPosition = (
+  node: AutoLayoutChildrenMixin
+): Pick<LayoutChildAttributes, 'layoutItemAbsolute'> => {
+  return {
+    layoutItemAbsolute: node.layoutPositioning === 'ABSOLUTE'
+  };
+};

plugin-src/transformers/partials/transformVectorPaths.ts

@@ -1,9 +1,11 @@
 import { parseSVG } from 'svg-path-parser';
 
 import {
+  transformAutoLayoutPosition,
   transformBlend,
   transformDimensionAndPositionFromVectorPath,
   transformEffects,
+  transformLayoutSizing,
   transformProportion,
   transformSceneNode,
   transformStrokesFromVector
@@ -110,6 +112,8 @@ const transformVectorPath = (
     ...transformDimensionAndPositionFromVectorPath(vectorPath, baseX, baseY),
     ...transformSceneNode(node),
     ...transformBlend(node),
-    ...transformProportion(node)
+    ...transformProportion(node),
+    ...transformLayoutSizing(node),
+    ...transformAutoLayoutPosition(node)
   };
 };

plugin-src/transformers/transformBooleanNode.ts

@@ -1,10 +1,12 @@
 import {
+  transformAutoLayoutPosition,
   transformBlend,
   transformChildren,
   transformDimensionAndPosition,
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutSizing,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -30,6 +32,8 @@ export const transformBooleanNode = async (
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformSceneNode(node),
     ...transformBlend(node),
-    ...transformProportion(node)
+    ...transformProportion(node),
+    ...transformLayoutSizing(node),
+    ...transformAutoLayoutPosition(node)
   };
 };

plugin-src/transformers/transformComponentNode.ts

@@ -1,5 +1,7 @@
 import { componentsLibrary } from '@plugin/ComponentLibrary';
 import {
+  transformAutoLayout,
+  transformAutoLayoutPosition,
   transformBlend,
   transformChildren,
   transformConstraints,
@@ -8,6 +10,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutSizing,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -32,10 +35,13 @@ export const transformComponentNode = async (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutSizing(node),
+    ...transformAutoLayoutPosition(node),
     ...transformCornerRadius(node),
     ...(await transformChildren(node, baseX + node.x, baseY + node.y)),
     ...transformDimensionAndPosition(node, baseX, baseY),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformAutoLayout(node)
   });
 
   return {

plugin-src/transformers/transformEllipseNode.ts

@@ -1,10 +1,12 @@
 import {
+  transformAutoLayoutPosition,
   transformBlend,
   transformConstraints,
   transformDimension,
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutSizing,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -30,6 +32,8 @@ export const transformEllipseNode = (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutSizing(node),
+    ...transformAutoLayoutPosition(node),
     ...transformConstraints(node)
   };
 };

plugin-src/transformers/transformFrameNode.ts

@@ -1,4 +1,6 @@
 import {
+  transformAutoLayout,
+  transformAutoLayoutPosition,
   transformBlend,
   transformChildren,
   transformConstraints,
@@ -7,6 +9,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutSizing,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -34,9 +37,12 @@ export const transformFrameNode = async (
       // @see: https://forum.figma.com/t/add-a-blendmode-property-for-sectionnode/58560
       ...transformBlend(node),
       ...transformProportion(node),
+      ...transformLayoutSizing(node),
+      ...transformAutoLayoutPosition(node),
       ...transformCornerRadius(node),
       ...transformEffects(node),
-      ...transformConstraints(node)
+      ...transformConstraints(node),
+      ...transformAutoLayout(node)
     };
   }
 

plugin-src/transformers/transformInstanceNode.ts

@@ -1,5 +1,7 @@
 import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary';
 import {
+  transformAutoLayout,
+  transformAutoLayoutPosition,
   transformBlend,
   transformChildren,
   transformConstraints,
@@ -8,6 +10,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutSizing,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -43,9 +46,12 @@ export const transformInstanceNode = async (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutSizing(node),
+    ...transformAutoLayoutPosition(node),
     ...transformCornerRadius(node),
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformConstraints(node),
+    ...transformAutoLayout(node),
     ...(await transformChildren(node, baseX + node.x, baseY + node.y))
   };
 };

plugin-src/transformers/transformPathNode.ts

@@ -1,10 +1,12 @@
 import {
+  transformAutoLayoutPosition,
   transformBlend,
   transformConstraints,
   transformDimensionAndPosition,
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutSizing,
   transformProportion,
   transformSceneNode,
   transformStrokes,
@@ -34,6 +36,8 @@ export const transformPathNode = (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutSizing(node),
+    ...transformAutoLayoutPosition(node),
     ...transformConstraints(node)
   };
 };

plugin-src/transformers/transformRectangleNode.ts

@@ -1,11 +1,13 @@
 import {
+  transformAutoLayoutPosition,
   transformBlend,
   transformConstraints,
   transformCornerRadius,
   transformDimension,
   transformEffects,
   transformFigmaIds,
   transformFills,
+  transformLayoutSizing,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -31,6 +33,8 @@ export const transformRectangleNode = (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutSizing(node),
+    ...transformAutoLayoutPosition(node),
     ...transformCornerRadius(node),
     ...transformConstraints(node)
   };

plugin-src/transformers/transformTextNode.ts

@@ -1,9 +1,11 @@
 import {
+  transformAutoLayoutPosition,
   transformBlend,
   transformConstraints,
   transformDimensionAndPosition,
   transformEffects,
   transformFigmaIds,
+  transformLayoutSizing,
   transformProportion,
   transformSceneNode,
   transformStrokes,
@@ -23,6 +25,8 @@ export const transformTextNode = (node: TextNode, baseX: number, baseY: number):
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformLayoutSizing(node),
+    ...transformAutoLayoutPosition(node),
     ...transformStrokes(node),
     ...transformConstraints(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';