FigmaでデザインされたものからHTMLやCSSに変換するプラグインをつくりたい
そのための実装方針を考えたい
FigmaのNode
Figmaのレイヤー構造はnodeというもので表される
プラグインコードでは、ほとんどの場合SceneNodeとも呼ばれるページ内に含まれるノードを操作することになる
type SceneNode = BooleanOperationNode | ComponentNode | ComponentSetNode | EllipseNode | FrameNode | GroupNode | InstanceNode | LineNode | PolygonNode | RectangleNode | SliceNode | StarNode | TextNode | VectorNode
code.ts内で選択されたFigmaのオブジェクトは次のようにして取得できる
const selectedNodes = figma.currentPage.selection;
そして、このselectedNodesはSceneNodeの配列となっているので、これをもとにHTMLタグやCSSに変換していくのがよさそう
変換の流れ
各nodeには、nodeのタイプを示すtypeプロパティがあり、nodeタイプのリストは以下のNodeTypeで宣言されている
type NodeType = "BOOLEAN_OPERATION" | "COMPONENT" | "COMPONENT_SET" | "DOCUMENT" | "ELLIPSE" | "FRAME" | "GROUP" | "INSTANCE" | "LINE" | "PAGE" | "POLYGON" | "RECTANGLE" | "SLICE" | "STAR" | "TEXT" | "VECTOR"
また、各nodeにはchildrenプロパティという子nodeの配列をもっているので、ループさせながらNodeTypeで判別し、扱いやすいようにドメインモデルに変換して、さらにそのドメインモデルからHTMLやCSSへoutputするのがよさそう
NodeTypeが何だったらimgタグとして扱って良いとするなど、調査はまだ必要だがこのような方針で進められそう
