はじめに
FigmaのPluginを開発する際、Figmaのノードを検索したいと思ったことはありますか？
この記事では、ノードを検索する方法を解説します。
すべてのノード検索する
findAll(callback?: (node: SceneNode) => boolean): SceneNode[]
サブツリーすべてを検索したい場合は、findAll（）関数を使うことで、検索することができます。
コールバック関数を記述することで、 コールバック関数がtrueを返した、ノードすべてを返します。
manifest.json に "documentAccess"："dynamic-page" が含まれ、nodeにPageNodeである場合、findAll()を使うなら、最初にloadAsyncを呼び出す必要があります
// nodeの名前が "Frame" であるノードを検索する
const Frame = figma.currentPage.findAll(node => node.name === "Frame")
Figmaファイルが多くなると、検索に時間がかかるので、注意が必要です!
できるだけ、時間をかけないように、別の関数や検索範囲を絞る必要があります。
条件付きですべてのノードを検索する
findAllWithCriteria<T extends NodeType[]>(
criteria: FindAllCriteria<T>
): Array<{ type: T[number] } & SceneNode>
このサブツリー全体（このノードの子、その子の子など）を検索します。
指定されたすべての条件を満たすすべてのノードを返します。
manifest.json に "documentAccess"："dynamic-page" が含まれ、nodeにPageNodeである場合、findAll()を使うなら、最初にloadAsyncを呼び出す必要があります。
検索の条件でサポートされているのは、以下の通りです。
- 特定の型を持つノード
- SharedPluginDataを名前空間とキーで持つノード
- キーによってPluginDataを持つノード
//component・component set ノードを検索する
const node = figma.currentPage.findAllWithCriteria({
types: ['COMPONENT', 'COMPONENT_SET']
})
// key が a b の plugin data を持っているノードを検索する
const node = figma.currentPage.findAllWithCriteria({
pluginData: {
keys: ["a", "b"]
}
})
// namespace が hoge で key が a b のSharedPluginDataを持っているノードを検索する
const node = figma.currentPage.findAllWithCriteria({
sharedPluginData: {
namespace: "hoge",
keys: ["a", "b"]
}
})
子要素の最初のノードを検索する
findChild(callback: (node: SceneNode) => boolean): SceneNode | null
このノードの直接の子（子の子は含まれない）を検索し、子要素の最初の要素を返します。
// currentPageの子要素でnodeの名前が "Frame" である最初のノードを検索する
const child = figma.currentPage.findChild((node => node.name === "Frame")
子要素を検索する
findChildren(callback: (node: SceneNode) => boolean): SceneNode | null
このノードの直接の子（子の子は含まれない）を検索し、子要素の最初の要素を返します。
// currentPageの子要素でnodeの名前が "Frame" であるノードを検索する
const child = figma.currentPage.findChildren((node => node.name === "Frame")
このサブツリー全体の最初のノードを検索する
findOne(callback: (node: SceneNode) => boolean): SceneNode | null
このサブツリー全体を検索し、子要素の最初の要素を返します。
// currentPageの子孫で要素でnodeの名前が "Frame" である最初のノードを検索する
const child = figma.currentPage.findOne((node => node.name === "Frame")
まとめ
この記事では、Figma Pluginsでノードを検索する方法を解説しました、
ぜひこの記事を参考に、Figmaでノードを検索してみてください！
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。