Figma for VS Codeで変わるデザインと開発のコミュニケーションと効率

2023年6月にFigma Config 2023という、Figmaのカンファレンスが開かれました。そこでFigma上で開発をサポートするような機能が多数発表されました。

https://twitter.com/figma/status/1671556665479659520?s=20

デザイナーとエンジニアの効率を上げるDev Modeなどの発表があり、エンジニアにとっても知っておきたい内容があります。

今回は発表にあった中でも特に開発に直結するFigma for VS Codeを紹介します。

Figma for VS Codeとは？

VS Code上でFigmaを使用したさまざまなことができる拡張になります。

https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension

ただVS Code上でFigma上のデザインを確認するだけではなく、Figmaと連携した開発速度を上げる機能やコミュニケーションをサポートする機能があります。

Figmaにコメントを送り、コメントの通知を受け取れる

VS Code上からFigmaのコメント機能を使用して、UIの質問をすることが可能です、Figmaを開かなくてもUIの質問ができます。Slackなどではなく、Figma上でコメントすることでUIに紐づいたコメントが可能になります。この機能を使用するためには、Figma上のツールバーにあるコメントアイコンをクリックすることで、コメントモードに切り替わります。

VS CodeのFigmaからコメント機能を使用して、UIの質問をしているようす

コメントの機能の詳細はAdd comments to filesにあります。

ただコメントを送るだけではなく、コメントの通知を受け取ることも可能です。
従来であれば、メール通知やSlack通知を確認しなければ気がつくことができませんでした。

VS Code上で通知を受け取れることで、UIの質問がデザイナーから来ているのを待つ間に他のUIを開発をし、通知がきたら再度質問したUIへ戻ることが、VS Codeの中で完結して行えます。

コメントの通知をVS Code上で受け取っている様子。引用元：https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension

FigmaのUIに合わせたクラス名、CSSのサジェストを表示できる

FigmaにあるデザインからCSSを提案してくれます。Figma上だけではなく、VS Codeの入力補完のサジェストにも表示をすることができるようになりました。

VS Code上でFigmaのUIに沿ったCSSのオートコンプリートが表示されているようす

もちろんCSSを一括で挿入も可能です。

GitHubなどのリンクをコンポーネントに紐づけれる

コンポーネントのソースがどこにあるのか分かることで、UIに紐づいたコードを参照することが可能です。例えばプロダクトからデザインシステムコンポーネントを利用したいときにUIとコードの参照が楽になります。

コンポーネントが紐づいているソースを表示しているようす 引用元：https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension

さいごに

VS Code上でFigmaを利用することで、デザインや開発のプロセスを変えることができるのではないかと感じました！ツールを利用してプロダクトの開発を加速させていく手段が増えて最高です！