4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

image.png

Figmaでは、ノードが、レイヤーを表現するための基礎です。
ノードには様々な種類があり、それぞれ独自のプロパティを持っています。
ノードを理解することで、Figma Pluginsでどんなことができるかイメージが湧くようになります。

そのため、この記事ではノードについてまとめようと思います。

操作できるノード

⚪︎ BooleanOperationNode

ブール演算は、任意のShapeレイヤーのセットを UnionSubtractIntersectExcludeのいずれかを通じて結合されているノードです。 結合するレイヤーは、その子配列に格納されます。

figma.unionfigma.subtractfigma.intersectfigma.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)のフォローをお願いします。

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?