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

これは何？

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

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

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

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

① component keyを調べる

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

コンポーネントが定義されているファイルを開く
コンソールを開く
- 右クリック → Plugins > Development > Show/Hide console
調べたいコンポーネント or バリアントを選択する
コンソールで以下のコマンドを入力する
コンソールで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を取得する方法です。
イメージは以下の通りです。

メインコンポーネントファイルを開く
プラグインを開く
コンポーネントを選択する
プラグインでイベントを発火させ、component keyを取得する
取得したcomponent keyをclientStorage に保存する
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)のフォローをお願いします。