こんにちは、エンジニアの野口です。
今回はFigmaとVS Codeの連携方法についてご紹介したいと思います。

FigmaとVS Codeの連携メリット

FigmaとVS Codeの連携をすることで下記のメリットがあります。

1. コードエディターを開いたままデザインを確認できる
2. デザインをコード化してくれるのでスタイリング時の参考になる
3. コメントの通知をサイドバーで確認できる

開発者とデザイナーとの連携がとりやすくなることや、作業の生産性の向上に繋がるのではないかと思います。

Figma for VS Codeのインストール

VS Codeサイドバー から「拡張機能」を選択し、「Figma for VS Code」と検索しインストールします。

Figmaへログイン

インストールできたら次に「Figma for VS Code」からFigmaへログインします。

Visual Studio Codeを開く

ブラウザに遷移し「VS Code連携を開きます」をクリックしVisual Studio Codeを開くと連携完了です。

デザインの確認方法

サイドバー から「Figma for VS Code」をクリックするとデザインファイルがそれぞれ出てきますので、選択します。

次にフレームの一覧が表示されますので選択することでデザインを確認することができます。

まとめ

「Figma for VS Code」を利用してみて良かった点は、やはり画面の切り替えが不要な点かなと思います。
FigmaとVS Codeを行き来しながら作業を行うのは手間になってくるので、作業時に適切な箇所で使って行こうと思います。

提供されるコード自体は丸々使えるものではないケースが多いなと感じましたが、余白やフォントサイズなどが数値化されるのは良いなと感じます。
是非一度利用してみてはいかがでしょうか。