【Figma】Figma to HTMLの実装方針

FigmaでデザインされたものからHTMLやCSSに変換するプラグインをつくりたい

そのための実装方針を考えたい

FigmaのNode

Figmaのレイヤー構造はnodeというもので表される

www.figma.com

プラグインコードでは、ほとんどの場合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タグとして扱って良いとするなど、調査はまだ必要だがこのような方針で進められそう