Figmaからコードへつなげる効率的な作業フロー
デザインツール Figma は、もはやデザイナーだけのものではありません。Dev Mode の登場により、フロントエンドエンジニアがデザインから必要な情報を効率的に引き出す仕組みが整いました。本記事では、Figma からコードへの橋渡しをスムーズにするテクニックを紹介します。
Dev Mode でデザイン情報を正確に取得する
Figma の Dev Mode（開発者モード）は、エンジニア向けに最適化されたビューです。ファイルを開くときに右上のトグル（または Shift+D）で切り替えられます。
Dev Mode でできること
- プロパティのインスペクション: 要素をクリックするだけで、幅・高さ・余白・フォントサイズ・色などがパネルに表示されます。
- CSS コードの自動生成: パネルに CSS のプロパティが自動表示されるので、コピーしてそのままコードに貼り付けられます。
- アセットのエクスポート: 画像アイコンをクリックして、SVG や PNG で書き出せます。
Dev Mode で表示される CSS はあくまで参考値です。実際のコンポーネント設計に合わせて適宜調整しましょう。
デザイントークンの共有で一貫性を保つ
カラーやフォントサイズ、スペーシングなどのデザイントークンを Figma とコードで同期すると、デザインと実装の乖離を防げます。
Figma Tokens プラグイン
Figma Tokens（正式名称: Tokens Studio for Figma）は、デザイントークンを JSON で一元管理できるプラグインです。
- プラグインをインストールし、カラーやタイポグラフィをトークンとして定義。
- JSON としてエクスポート。
- Style Dictionary や Tailwind CSS の設定ファイルに変換して適用。
// tokens.json の例
{
"color": {
"brand": {
"primary": { "value": "#3b82f6" },
"secondary": { "value": "#10b981" }
}
},
"spacing": {
"md": { "value": "16px" }
}
}
この JSON を Style Dictionary でビルドすれば、CSS 変数や SCSS、Tailwind の設定など様々な形式に変換できます。
デザイナーとのハンドオフをスムーズにするプラクティス
開発者だけが頑張っても、デザイナーとの連携がスムーズでなければ効率は上がりません。以下のポイントをチームで共有しておくとよいでしょう。
コンポーネントの命名ルールを統一する
Figma のレイヤー名とコード上のコンポーネント名を一致させておくと、探す手間が減ります。例えば Figma で Button/Primary という名前なら、コードでも ButtonPrimary や Button.Primary のように対応させます。
オートレイアウトを活用する
Figma のオートレイアウト機能は、CSS Flexbox と同じ考え方です。デザイナーにオートレイアウトを使ってもらうよう依頼すると、余白や配置の意図がコードに反映しやすくなります。
コメント機能で質問を残す
開発中に「この余白はいくつですか？」といった質問は、Figma 上の該当要素にコメントとして残しましょう。Slack などでテキストで伝えるより確実です。
プラグインでさらに効率化
以下のプラグインも導入しておくと便利です。
| プラグイン名 | 用途 |
|---|---|
| Figma Tokens | デザイントークンの管理・エクスポート |
| Anima | Figma デザインを React / Vue コードに変換 |
| Zeplin | 従来型のハンドオフツール（Figma 連携可） |
| Tailwind CSS for Figma | デザインに Tailwind クラス名を表示 |
まとめ
Figma からコードへの変換は、Dev Mode のインスペクションで基本情報を正確に取得し、Figma Tokens でデザイントークンを共有するのが現実的なベストプラクティスです。デザイナーと開発者の間で共通の言語（トークンや命名規則）を持つことが、効率的なハンドオフの鍵になります。