はじめに

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