【Figma Plugins】チームライブラリーのコンポーネントを取得する

これは何？

FigmaのPluginを開発する際、チームライブラリのコンポーネントを取得して、ファイルに生成したいと思ったことはありますか？

Figmaのコンポーネントには、通常のコンポーネントと複数のコンポーネントがまとまっているバリアントコンポーネントの2種類あります。

そのため、この記事では、チームライブラリの2種類のコンポーネントを取得する方法を解説しようと思います。

チームライブラリーのコンポーネントを取得する

① component keyを調べる

コンポーネントを取得するには、component key を知る必要があります。
そのためには、以下のようにcomponent keyを調べます。

1. コンポーネントが定義されているファイルを開く
2. コンソールを開く
   • 右クリック → Plugins > Development > Show/Hide console
3. 調べたいコンポーネント or バリアントを選択する
4. コンソールで以下のコマンドを入力する
5. コンソールでcomponent keyが表示される

> figma.currentPage.selection[0].key

② コンポーネントを取得する

通常のコンポーネントの場合

importComponentByKeyAsync()の引数にcomponent keyを渡すことで、コンポーネントを取得することができます。

取得したコンポーネントをcreateInstance()することで、コンポーネントのインスタンスを表示させることができます。

const componentKey = '****************************************'

const createComponent = async () => {
  const component = await figma.importComponentByKeyAsync(componentKey)
  component.createInstance()
}

バリアントコンポーネントの場合

importComponentSetByKeyAsync()の引数にcomponent keyを渡すことで、バリアントを取得することができます。

.defaultVariant でデフォルトのコンポーネントを取得し、createInstance()で、コンポーネントのインスタンスを表示させることができます。

const componentSetKey = '****************************************'

const createComponentSet = async () => {
  const componentSet = await figma.importComponentSetByKeyAsync(componentSetKey) 
  const component = componentSet.defaultVariant
  component.createInstance()
}

動的にチームライブラリーのコンポーネントを取得する

プラグインを販売したりなどで、チームライブラリーのコンポーネントを動的に取得したい時がると思います。
そんな時は、以下の方法で取得することができます。

• Figma の REST API を使う
• プラグインを開いて、component keyを取得する方法

Figma の REST API を使う

細かいことはここでは紹介しないですが、以下のリンクから、component keyを取得することができます。

プラグインを開いて、component keyを取得する方法

これは、プラグイン内でcomponent keyを取得する方法です。
イメージは以下の通りです。

1. メインコンポーネントファイルを開く
2. プラグインを開く
3. コンポーネントを選択する
4. プラグインでイベントを発火させ、component keyを取得する
5. 取得したcomponent keyをclientStorage に保存する
6. clientStorage から 、component keyを取得し、importComponentByKeyAsync でコンポーネントを取得する

const getComponentKey = () => {
  const componentKey = figma.currentPage.selection[0].key
  figma.clientStorage.setAsync('componentKey', componentKey)
}

const createComponent = async () => {
  const componentKey = await figma.clientStorage.getAsync('componentKey')
  const component = await figma.importComponentByKeyAsync(componentKey)
  component.createInstance()
}

まとめ

この記事では、チームライブラリの2種類のコンポーネントを取得する方法を解説しました。

ぜひこの記事を参考にコンポーネントを取得してみてください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。