[Tips] FigmaのコンポーネントとVscodeのコンポーネントを紐づける

FigmaのVscodeプラグインを利用している方が対象となります。

最近VscodeでFigmaのファイルを開くようになってきたのですが、
Vscodeを開くとFigmaが閉じているのが初期状態となるのにもどかしさを感じていました。
例え、開いたままにしていても、再起動するとタブは保持していませんので、サイドバーのFigmaプラグインをクリック→ページ選択→アートボードを選択の流れは必須でした。

色々調べていた際に、Link to Code File という機能を発見したので、共有できたらと思います。

手順

1.Figmaプラグインから、Figmaファイルを開く
2.コンポーネントを選択
3.リンクボタンをクリックして、Figmaコンポーネントと紐付けるファイルを選択

1.Figmaプラグインから、Figmaファイルを開く

まずはFigmaファイルを開きます。

2.コンポーネントを選択

コンポーネントを選択します。
リンクボタンをクリックして Add link to code fileを選択します。

3.Figmaコンポーネントと紐付けるファイルを選択

紐付けるファイルを開いていれば、勝手にsuggestされるので、選択します。

紐付けを確認

Dev resourcesに該当ファイルが追加されていることを確認します。

完了！

手順としてはたったこれだけです。
紐付けしたファイルを開くと右上のTabにFigmaのアイコンが出てきます。
アイコンをクリックすると、該当のFigmaファイルが
紐付けしたコンポーネントがフォーカスされている状態で開きます！

以上です。

コンポーネント開発をする際にちょっとしたストレスが軽減できると思います。
ぜひ試してみてください！

質問やご指摘などありましたら、気兼ねなくコメントしてください！🐤