From ebdf3ad9c37b63a9bdb4ad9387a54234a31452bd Mon Sep 17 00:00:00 2001
From: Jordi Sala Morales <jordism91@gmail.com>
Date: Wed, 17 Apr 2024 11:38:13 +0200
Subject: [PATCH] Frames & Sections (#38)

* Implement Frames and Sections exportation

* add blend modes
---
 plugin-src/transformers/transformFrameNode.ts | 18 +++++++++++++++---
 plugin-src/transformers/transformSceneNode.ts |  1 +
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts
index 085b5c0a..87538579 100644
--- a/plugin-src/transformers/transformFrameNode.ts
+++ b/plugin-src/transformers/transformFrameNode.ts
@@ -1,4 +1,5 @@
 import {
+  transformBlend,
   transformDimensionAndPosition,
   transformSceneNode,
   transformStrokes
@@ -8,8 +9,12 @@ import { translateFills } from '@plugin/translators';
 
 import { FrameShape } from '@ui/lib/types/frame/frameShape';
 
+const isSectionNode = (node: FrameNode | SectionNode): node is SectionNode => {
+  return node.type === 'SECTION';
+};
+
 export const transformFrameNode = async (
-  node: FrameNode,
+  node: FrameNode | SectionNode,
   baseX: number,
   baseY: number
 ): Promise<FrameShape> => {
@@ -17,9 +22,16 @@ export const transformFrameNode = async (
     type: 'frame',
     name: node.name,
     fills: translateFills(node.fills, node.width, node.height),
-    ...transformStrokes(node),
-    ...(await transformChildren(node, baseX, baseY)),
+    // Figma API does not expose strokes for sections,
+    // they plan to add it in the future. Refactor this when available.
+    // @see: https://forum.figma.com/t/why-are-strokes-not-available-on-section-nodes/41658
+    ...(isSectionNode(node) ? [] : transformStrokes(node)),
+    ...(await transformChildren(node, baseX + node.x, baseY + node.y)),
     ...transformDimensionAndPosition(node, baseX, baseY),
+    // Figma API does not expose blend modes for sections,
+    // they plan to add it in the future. Refactor this when available.
+    // @see: https://forum.figma.com/t/add-a-blendmode-property-for-sectionnode/58560
+    ...(isSectionNode(node) ? [] : transformBlend(node)),
     ...transformSceneNode(node)
   };
 };
diff --git a/plugin-src/transformers/transformSceneNode.ts b/plugin-src/transformers/transformSceneNode.ts
index 3506931a..29000352 100644
--- a/plugin-src/transformers/transformSceneNode.ts
+++ b/plugin-src/transformers/transformSceneNode.ts
@@ -35,6 +35,7 @@ export const transformSceneNode = async (
       return transformRectangleNode(node, baseX, baseY);
     case 'ELLIPSE':
       return transformEllipseNode(node, baseX, baseY);
+    case 'SECTION':
     case 'FRAME':
       return await transformFrameNode(node, baseX, baseY);
     case 'GROUP':