はじめに
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)のフォローをお願いします。