Penpot/penpot-exporter-figma-plugin
0
Fork 0
mirror of https://github.com/penpot/penpot-exporter-figma-plugin.git synced 2024-12-22 13:43:03 -05:00
Code Issues Activity

Frames & Sections (#38)

Browse source 
* Implement Frames and Sections exportation

* add blend modes
This commit is contained in:
Jordi Sala Morales 2024-04-17 11:38:13 +02:00 committed by GitHub
parent c9f8a0dcd2
commit ebdf3ad9c3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
plugin-src/transformers/transformFrameNode.ts
View file

@ -1,4 +1,5 @@
import { import {
transformBlend,
transformDimensionAndPosition, transformDimensionAndPosition,
transformSceneNode, transformSceneNode,
transformStrokes transformStrokes
@ -8,8 +9,12 @@ import { translateFills } from '@plugin/translators';
import { FrameShape } from '@ui/lib/types/frame/frameShape'; import { FrameShape } from '@ui/lib/types/frame/frameShape';
const isSectionNode = (node: FrameNode | SectionNode): node is SectionNode => {
return node.type === 'SECTION';
};
export const transformFrameNode = async ( export const transformFrameNode = async (
node: FrameNode, node: FrameNode | SectionNode,
baseX: number, baseX: number,
baseY: number baseY: number
): Promise<FrameShape> => { ): Promise<FrameShape> => {
@ -17,9 +22,16 @@ export const transformFrameNode = async (
type: 'frame', type: 'frame',
name: node.name, name: node.name,
fills: translateFills(node.fills, node.width, node.height), fills: translateFills(node.fills, node.width, node.height),
...transformStrokes(node), // Figma API does not expose strokes for sections,
...(await transformChildren(node, baseX, baseY)), // 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), ...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) ...transformSceneNode(node)
}; };
}; };

1
plugin-src/transformers/transformSceneNode.ts
View file

@ -35,6 +35,7 @@ export const transformSceneNode = async (
return transformRectangleNode(node, baseX, baseY); return transformRectangleNode(node, baseX, baseY);
case 'ELLIPSE': case 'ELLIPSE':
return transformEllipseNode(node, baseX, baseY); return transformEllipseNode(node, baseX, baseY);
case 'SECTION':
case 'FRAME': case 'FRAME':
return await transformFrameNode(node, baseX, baseY); return await transformFrameNode(node, baseX, baseY);
case 'GROUP': case 'GROUP':