Layout grids

.changeset/tasty-sheep-sin.md

@@ -0,0 +1,5 @@
+---
+'penpot-exporter': minor
+---
+
+Added layout grids support

plugin-src/transformers/partials/transformLayout.ts

@@ -1,4 +1,5 @@
 import {
+  translateGrids,
   translateLayoutAlignContent,
   translateLayoutAlignItems,
   translateLayoutFlexDir,
@@ -13,6 +14,7 @@ import {
 } from '@plugin/translators';
 
 import { LayoutAttributes, LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
+import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
 
 export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
   return {
@@ -58,3 +60,9 @@ export const transformLayoutAttributes = (
     'layoutItemMinW': node.minWidth ?? undefined
   };
 };
+
+export const transformLayoutGrids = (node: BaseFrameMixin): Pick<ShapeAttributes, 'grids'> => {
+  return {
+    grids: translateGrids(node.layoutGrids)
+  };
+};

plugin-src/transformers/transformComponentNode.ts

@@ -11,6 +11,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformLayoutGrids,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -42,7 +43,8 @@ export const transformComponentNode = async (node: ComponentNode): Promise<Compo
     ...transformDimension(node),
     ...transformRotationAndPosition(node),
     ...transformConstraints(node),
-    ...transformAutoLayout(node)
+    ...transformAutoLayout(node),
+    ...transformLayoutGrids(node)
   });
 
   if (isNonVariantComponentNode(node)) {

plugin-src/transformers/transformFrameNode.ts

@@ -10,6 +10,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformLayoutGrids,
   transformOverrides,
   transformProportion,
   transformRotationAndPosition,
@@ -58,6 +59,7 @@ export const transformFrameNode = async (
       ...transformEffects(node),
       ...transformConstraints(node),
       ...transformAutoLayout(node),
+      ...transformLayoutGrids(node),
       ...transformAndRotation
     };
   }

plugin-src/transformers/transformInstanceNode.ts

@@ -10,6 +10,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformLayoutGrids,
   transformOverrides,
   transformProportion,
   transformRotationAndPosition,
@@ -64,6 +65,7 @@ export const transformInstanceNode = async (
     ...transformRotationAndPosition(node),
     ...transformConstraints(node),
     ...transformAutoLayout(node),
+    ...transformLayoutGrids(node),
     ...(await transformChildren(node)),
     ...nodeOverrides
   };

plugin-src/translators/index.ts

@@ -4,6 +4,7 @@ export * from './translateBoolType';
 export * from './translateChildren';
 export * from './translateConstraints';
 export * from './translateLayout';
+export * from './translateLayoutGrids';
 export * from './translateRotation';
 export * from './translateShadowEffects';
 export * from './translateStrokes';

plugin-src/translators/translateLayoutGrids.ts

@@ -0,0 +1,67 @@
+import {
+  GridLayoutGrid,
+  LayoutGrid,
+  RowsColsLayoutGrid
+} from '@figma/plugin-typings/plugin-api-standalone';
+
+import { rgbToHex } from '@plugin/utils';
+
+import { ColumnGrid, Grid, GridAlignment, RowGrid, SquareGrid } from '@ui/lib/types/utils/grid';
+
+export const translateGrids = (layoutGrids: readonly LayoutGrid[]): Grid[] => {
+  return layoutGrids.map(grid => {
+    switch (grid.pattern) {
+      case 'GRID':
+        return translateSquareGrid(grid);
+      case 'ROWS':
+        return translateRowColsGrid(grid);
+      case 'COLUMNS':
+        return translateRowColsGrid(grid);
+    }
+  });
+};
+
+const translateSquareGrid = (layoutGrid: GridLayoutGrid): SquareGrid => {
+  return {
+    type: 'square',
+    display: layoutGrid.visible ? layoutGrid.visible : false,
+    params: {
+      size: layoutGrid.sectionSize,
+      color: {
+        color: layoutGrid.color ? rgbToHex(layoutGrid.color) : '#000000',
+        opacity: layoutGrid.color ? layoutGrid.color.a : 0
+      }
+    }
+  };
+};
+
+const translateRowColsGrid = (layoutGrid: RowsColsLayoutGrid): RowGrid | ColumnGrid => {
+  return {
+    type: layoutGrid.pattern === 'ROWS' ? 'row' : 'column',
+    display: layoutGrid.visible ? layoutGrid.visible : false,
+    params: {
+      color: {
+        color: layoutGrid.color ? rgbToHex(layoutGrid.color) : '#000000',
+        opacity: layoutGrid.color ? layoutGrid.color.a : 0
+      },
+      type: translateGridAlignment(layoutGrid.alignment),
+      size: layoutGrid.count,
+      margin: layoutGrid.offset,
+      gutter: layoutGrid.gutterSize,
+      itemLength: layoutGrid.sectionSize
+    }
+  };
+};
+
+const translateGridAlignment = (alignment: 'MIN' | 'MAX' | 'STRETCH' | 'CENTER'): GridAlignment => {
+  switch (alignment) {
+    case 'MIN':
+      return 'left';
+    case 'MAX':
+      return 'right';
+    case 'STRETCH':
+      return 'stretch';
+    case 'CENTER':
+      return 'center';
+  }
+};

plugin-src/utils/rgbToHex.ts

@@ -1,4 +1,4 @@
-export const rgbToHex = (color: RGB) => {
+export const rgbToHex = (color: RGB | RGBA) => {
   const r = Math.round(255 * color.r);
   const g = Math.round(255 * color.g);
   const b = Math.round(255 * color.b);

ui-src/lib/types/utils/grid.ts

@@ -1,32 +1,34 @@
 export type Grid = ColumnGrid | RowGrid | SquareGrid;
 
+export type GridAlignment = 'stretch' | 'left' | 'center' | 'right';
+
 export type SavedGrids = {
   square?: SquareParams;
   row?: ColumnParams;
   column?: ColumnParams;
 };
 
-type ColumnGrid = {
+export type ColumnGrid = {
   type: 'column';
   display: boolean;
   params: ColumnParams;
 };
 
-type RowGrid = {
+export type RowGrid = {
   type: 'row';
   display: boolean;
   params: ColumnParams;
 };
 
-type SquareGrid = {
+export type SquareGrid = {
   type: 'square';
   display: boolean;
   params: SquareParams;
 };
 
 type ColumnParams = {
   color: GridColor;
-  type?: 'stretch' | 'left' | 'center' | 'right';
+  type?: GridAlignment;
   size?: number;
   margin?: number;
   itemLength?: number;