Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。
この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。
※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。
Figma for VS Codeとは
「Figma for VS Code」はテキストエディタVS CodeのFigma専用の拡張機能です。
VS CodeでFigmaにログインを行い、その範囲でアクセスできるFigmaのページ内容をVS Code上に表示してくれます。 FigmaをDev Modeにした状態と同様のものが表示され、要素の閲覧や値の確認はできますが作成・編集はできません。こうした開発実装の取り回しに丁度よい形式となっています。
公式サイトリンク：
主な使い方
Figma for VS Codeには主に以下の機能があります。
- Figmaの要素やコンポーネントのスタイルやCSSの値を確認する
- コメントをリアルタイムで確認・返信・resolveする（resolve済みコメントは表示不可）
- 選択中の要素に基づいてCSSコードをサジェスト表示する
- FigmaのSectionや要素に任意のURLリンクを追加する（仕様ページやAPIリファレンス、プレビューURL等を設定して使う）
- 選択した要素をPNGやSVGに変換出力できる（Figma exportと同様）
基本的には開発したいFigma要素を選択し、その値を確認したりコードサジェストを受けて楽に要素のCSSを記述していくことがメインと思います。
使用時のワンポイント
Point1： Figmaのトークンの名前と値が確認できる
CSS実装時にはセマンティックなデザイントークンの名前だけでなく、具体的な値が必要になります（例：赤のデザイントークン名「color-red」=#FFFF00 ）。
これまでFigmaの「variables」や「styles」ライブラリで色やフォントを定義していた場合、トークンの名前は表示されますが具体的な値が表示されないため、Figmaスタイルライブラリの中まで入って探す手間がありました。
これをFigma for VS Codeだと、CSS記述に必要な値をまとめて表示してくれるので便利です。
Point2： FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い
Figma Dev ModeガイドではFigma上で要素をSectionで囲み「Ready for dev」マークを付けるように記載されています。しかしReadyマークがなくても閲覧や選択自体は可能です。ReadyマークがあるとLayersパネルの「Ready for develop」欄にサムネイル付で表示され見やすくなる程度です。そのため現時点ではSectionやReadyマークは無理に付けなくても問題なく、必要に応じてマークONOFFを活用すれば良いと思います。
- 「Ready for dev」マークあり：
- Layersパネル > Ready for deelopment欄に表示される。開発対象がどの要素か分かりやすくなる。
- 「Ready for dev」マークなし：
- Layersパネル > Ready for deelopment欄は表示されない。要素毎のレイヤー自体はちゃんと表示されるので扱えなくなる訳ではない。
Point3： Figma要素の選択忘れに注意
Figma要素を選択しないと値確認もCSSサジェストもされません。入力したCSS class名からの推測は行われないようです。例えばclass名を選択中要素と別の名前にしても、選択中の要素に紐づいたサジェストが表示されてしまいます。なお2つの要素を同時に選択はできません。
Point4： FigmaサジェストとGitHub copilotサジェストの混在に注意
CSSをVS Codeで記述する際、Figma for VS Codeは選択中の要素のCSSコードをサジェストしてくれます。しかしGitHub Copilotも使用している場合は、CSSコードの入力状況によってサジェストが変わってきます。
よくあるケースはCSS class名を波括弧で囲む前にGitHub Copilotのサジェストが優先表示されることが多いです。これをうっかりFigmaサジェストと誤解すると、目的ではないCSSでサジェスト確定してしまうので注意してください。
Point5： CSSサジェストはCSS class名の波括弧で囲んだ後に使うこと
CSSサジェストは要素を選択した状態で、かつCSS class名を波括弧で開始・終了とも囲んだ状態でないとうまく動作しません。波括弧で囲み終えてからサジェストを判別しましょう。
CSSサジェスト
Figma要素の値をCSSで記述する場合、目視で調べたり入力するのは大変です。そのためFigma for VS CodeではCSSコード入力を支援するサジェスト機能を活用したいです。サジェストされるためには以下の条件を満たす必要があります。
- Figma要素の選択
- CSS class名を波括弧で囲む
ただし「Github Copilot」を併用している場合、「Github Copilot」と「Figma for VS Code」のどちらのサジェストが表示されているのか分かりづらいケースがあります。
その時の様子を動画で見てみましょう。
CSSサジェスト動画 - 「Github Copilot」と「Figma for VS Code」の混在
動画内コード抜粋
/* Github copilot suggest */ .typography-1 { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0.5px; color: #000000; } /* Figma for VSCode suggest */ .typography-1 { color: var(--color-white, #FFF); font-family: Noto Sans CJK JP; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
このようにFigmaサジェストで対象の要素のCSSを記述するには現段階ではちょっとしたコツが必要です。そのため対策としては以下が挙げられます。
サジェスト混在対策
- 対策1： 一時的にCopilotをdisableにする。
- 対策2： class名を波括弧で閉じるまではサジェストを確定させない。
- 対策3： サジェストを使わずFigma for VS CodeのCodeパネルからCSSコードをコピー＆ペーストする。
各パネルについて
Figma for VS Code全体
エディタ内でのFigma for VS Codeは以下のような外観です。
各パネル毎の内容を次から見て行きます。
Figmaログインパネル
最初はFigmaにログアウト状態ですので、まずはFigma for VS Codeでログインを押します。するとブラウザが開きますので表示したいFigmaのあるアカウントでログインします。ログインできたら表示対象のFigmaファイルが一覧で表示されます。そこから任意のFigmaファイルを選択するとVS CodeにFigmaがDev Modeで表示されます。
Layersパネル
Figma内要素がレイヤー毎に表示されます。
Figma Dev Modeガイドに案内されているように、Figma Sectionで要素を囲みDev ModeでReady for developマークをONにすると、Layersパネルの「Ready for development」欄にサムネイル付で表示されます。UIデザイナーがエンジニアに開発可能要素を明示したい場合等には便利そうです。
Commentパネル
コメントをリアルタイムで確認・返信・resolveできます。なおresolve済みコメントは表示不可。Figma側で変更やコメントがあるとリアルタイムでCommentパネル側にも反映されます。
Inspect設定
このエリアで各種閲覧や設定を行います。
開発言語設定
スタイル定義する言語を設定します。以下項目から選択できます。
- CSS
- iOS
- SwiftUI
- UIKit
- Android
- Compose
- XML
Unitパネル
文字サイズの単位を指定します。 px または rem から選択します。またrootのフォントpxサイズも指定できます。
Codeタブ
Figmaでのレイアウトをcss解釈した場合のコードが表示されます。cssサジェストも基本的にこの内容と同等のものが適用されます。
Propertiesタブ
選択中のFigma要素についてのレイアウトやスタイルの値が確認できます。
またFigmaの「Local variables」「Local styles」等で色やフォントをセマンティックなデザイントークン（例「color-red」→"#FFFF00"）で設定していた場合でも、具体的な値およびトークン名を表示してくれます。
カテゴリを「Typograpy」や「Colors」のようにして値の種類を区別してくれるので分かりやすいです。
Componentタブ
選択中の要素がFigma Componentやインスタンスだった場合に表示されます。Figma Componentに設定されているdescription内容やLink、サムネイルイメージ等が表示されます。
Dev resourcesタブ
FigmaのSectionや要素に任意のURLリンクを追加できます。ここに関連する情報リンクを付けると、例えば仕様ページやAPIリファレンス、プレビューURLを探す手間が減ります。
なおFigmaのブラウザ版やデスクトップアプリ版からはFigmaの「page」にもDev Resourceを追加できます。しかしFigma for VS Codeからは「page」に紐づいたDevリソースは表示されないため、pageへのDev resourcesリンクは閲覧できません。
Assetsタブ
Figma exportと同様に選択した要素をPNGやSVGに変換出力できます。画像export書き出しをFigmaに行かずにVS Code上で行えるのでツールの行き来が減って楽になります。
まとめ
Figma for VS Codeは2023年6月に出たばかりでまだベータ版のため、これから色々変わって行くものと思います。
開発を行っていてUIと開発間でのやりとりは頻繁に行われることが多く、開発知見を持ったUIデザイナーが設計や品質チェックに関わったり、テックディレクションの役割をアサインしてUIとエンジニアの橋渡しをするケースもよく見受けられます。
またツール面では、例えばstorybookでのコンポーネント動作やビジュアルチェック、状態遷移パターン確認を行ったりしますが、ソフトウェアの種類やエコシステムはまだまだ少ない印象です。
ここに今後はFigmaのDev Modeも加わり、UI設計・UIデザイン・UIー開発連携・CSS/コンポーネント実装がより円滑にできるようになると良いと思います。
これからもFigmaや開発連携は重要と思いますので引き続き学んで行きたいと思います。
Goodpatchではデザイン好きなエンジニアの仲間を募集しています。 少しでもご興味を持たれた方は、ぜひ一度カジュアルにお話ししましょう！
