Help us understand the problem. What is going on with this article?

FigmaプラグインでcurrentPageの全テキストを取得

はじめに

こちらはFigmaプラグインAdvent Calendar 2019の6日目の記事です。

今回はFigmaのプラグインで扱えるレイヤーやノードを整理しつつ、currentPageの全テキストを取得するところまで説明したいと思います。

名前とレイヤー

まず、公式サイトの説明で出てくる単語がFigma上の何を指しているのかを整理しておきましょう。

Document

1.png

ドキュメントはPageをまたいだワークスペースを指します。

PAGE

2.png
ページは複数あるページの中の1つを指します。

Node

PAGEの中にはFigma上のオブジェクトがあります。
これをNodeと呼んでいます。Nodeには複数種類があり、それぞれ特徴があります。
ざっくり画像付きで見ていきましょう。

RectangleNode

rectangle.png

LineNode

line.png

EllipseNode

eclipse.png

PolygonNode

polygon.png

StarNode

star.png

VectorNode

arrow.png

TextNode

text.node.png

FrameNode

frame.png

ComponentNode

component.png

SliceNode

slice.png

figma.root

では上記で上げたNodeを操作する方法を確認しましょう。
Pageをまたいだ操作をするにはfigma.rootを用います。
figma.root.childrenから各ページにアクセスできます。
rootはスコープが大きく、変な操作をしてもほかのページだと気づけないので、気を付けましょう。

root.png

figma.currentPage

現在開いているページを操作する場合は、figma.currentPageを用います。
currentpage.png

childrenからページに存在するNodeにアクセスできます。

figma.currentPage.selection

figma.currentPage.selectionを使うと、ページの中で選択中のNodeを取得できます。

selection.png

currentPageの全テキストを取得

では最後にcurrentPageの全テキストを取得してみます。
どちらの方法でも可能です。

code.ts
// このページの | 全Nodeの | タイプがテキストのNode
figma.currentPage.children.forEach((item, index) => {
  if (item.type === "TEXT") {
    console.log(item)
  }
});

// このページの | 全Nodeの | 文字を持っているNode
figma.currentPage.children.forEach((item) => {
  if ("characters" in item) {
    console.log(item)
  }
});

まとめ

Nodeの種類を押さえておけば、開発もスムーズに進むと思います。
テキストの取得を例に出しましたが、ほかのNodeでも同じことができるでしょう。

あとは各Node特有のプロパティや操作を学べば、きっとあなたもFigmaプラグイン開発マスター!

おつかれさまでしたm(-_-)m

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away