はじめに
Figmaでは、ノードが、レイヤーを表現するための基礎です。
ノードには様々な種類があり、それぞれ独自のプロパティを持っています。
ノードを理解することで、Figma Pluginsでどんなことができるかイメージが湧くようになります。
そのため、この記事ではノードについてまとめようと思います。
操作できるノード
⚪︎ BooleanOperationNode
ブール演算は、任意のShapeレイヤーのセットを Union、Subtract、Intersect、Excludeのいずれかを通じて結合されているノードです。 結合するレイヤーは、その子配列に格納されます。
figma.union、figma.subtract、figma.intersect、figma.exclude を使用すると、ブール演算ノードを作成できます。
⚪︎ CodeBlockNode(FigJam専用)
コードブロックオブジェクト。
コードブロックは figma.createCodeBlock で作成できます。
⚪︎ ComponentNode
コンポーネントは、デザイン全体で再利用できるUI要素です。
⚪︎ ComponentSetNode
コンポーネントのバリアントが含まれるコンポーネントセットです。
⚪︎ ConnectorNode(FigJam専用)
コネクタは、FigJamコンポーネントを接続して関係を示すために使用されます。
⚪︎ DocumentNode
ドキュメント・ノードはルート・ノードです。
1つのブラウザ・タブにつき、ドキュメント・ノードは1つしか存在できず、その子ノードはそれぞれPageNodeでなければなりません。
⚪︎ EllipseNode
楕円を表す基本図形ノードです。figma.createEllipse で作成できます。
⚪︎ EmbedNode(FigJam専用)
FigJamキャンバス内で他のウェブサイトのiframeをホストするためにアクティブにできるノードです。
⚪︎ FrameNode
フレーム・ノードはレイアウト階層を定義するためのコンテナです。figma.createFrame で作成できます。
⚪︎ GroupNode
グループ・ノードは、関連するノードを意味的にグループ化するためのコンテナです。 figma.group で作成できます。
⚪︎ InstanceNode
インスタンスはコンポーネントのコピーです。
⚪︎ LineNode
ライン・ノードは1次元のオブジェクトを表すノードです。 figma.createLine で作成できます。
⚪︎ LinkUnfurlNode(FigJam専用)
タイトルと説明を含むウェブサイトのリッチプレビューを含むノードです。figma.createLinkPreviewAsyncで作成できます。
⚪︎ MediaNode(FigJam専用)
メディア・ノードは、FigJamキャンバス内でリッチ・メディアを含むノードです。figma.createGifで作成できます。
⚪︎ PageNode
ページノードはDocumentNodeの子に当たるノードです。figma.currentPage で現在のページにのみアクセスすることができます。
⚪︎ PolygonNode
3辺以上の正凸多角形を操作することができるノードです。figma.createPolygonで作成できます。
⚪︎ RectangleNode
矩形を操作することができるノードです。figma.createRectangleで作成できます。
⚪︎ SectionNode
セクションを操作することができるノードです
FigJamのセクションは、関連するオブジェクトを整理するために使用されます。
figma.createSection を使って作成することができます。
⚪︎ ShapeWithTextNode
テキストを埋め込んだ単純な幾何学図形を操作できるノードです。 figma.createShapeWithText を使って生成することができます。
⚪︎ SliceNode
スライスはバウンディングボックスを持つ不可視のオブジェクトです。
⚪︎ StampNode
ユーザーがスタンプホイールを使ってキャンバスに挿入するノードです。
以下のスタンプの種類を指定することができます。
- +1
- Dot
- Heart
- Profile
- Question
- Star
- Thumbs down
- Thumbs up
⚪︎ StarNode
星図形を操作できるノードです。 figma.createStarで作成することができます。
⚪︎ StickyNode
付箋オブジェクトを操作できるノードです。 figma.createStickyで作成することができます。
⚪︎ TableNode
テーブルを使用してコンテンツを構造化することができるノードです。figma.createTable で作成することができます。
⚪︎ TableCellNode
TableCellNodeは、TableNode内のノードです。
⚪︎ TextNode
テキスト・ノードはテキストを表し、ノード全体または個々の文字範囲は、色(塗りつぶし)、フォント・サイズ、フォント名などのプロパティを持つことができます。
⚪︎ VectorNode
ベクターノードは最も一般的なシェイプ表現で、個々の頂点、セグメント、リージョンを指定できます。figma.createVector で作成できます。
⚪︎ WidgetNode(FigJam専用)
FigJamのウィジェット・ノードを表します
まとめ
この記事ではFigmaで使えるノードについてまとめました。
よく使いそうなノードもあれば、使わなそうなノードもありました。
ぜひこの記事をストックして、こういうノード使えないかなと思った時に参照していただけると嬉しいです。
最後まで読んでくださってありがとうございます!
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。
