Figmaはデザイナー向けのツールという印象が強いですが、エンジニアにとっても重要なツールです。デザイン確認・CSS出力・コンポーネント仕様の把握など、知っておくと開発がスムーズになります。本記事では、エンジニア視点でのFigma基本を解説します。
Figmaとは
Figmaは、ブラウザベースのデザインツールです。複数人が同時編集でき、デザイナーとエンジニアの協業を強力にサポートします。基本機能は無料、商用利用はProプランです。
エンジニアが押さえる機能
Dev Mode
エンジニア向けのモード。選択した要素のサイズ・カラー・スペースを即取得し、CSS/Tailwind/iOS/Androidコードを表示します。デザインを「読む」ためのモードです。
Inspectパネル
- 要素の幅・高さ・余白・色を確認
- CSSスタイル自動生成
- SVG / PNG / JPGエクスポート（@1x / @2x / @3x）
Auto Layout
Flexboxに相当するレイアウト機構。デザイナーがAuto Layoutを使っていれば、実装イメージがそのままFlex/Gridに転換できます。
Components / Variants
Reactのコンポーネントに相当する再利用可能な部品。Variantsで状態（hover・disabled等）を切り替え可能。デザインシステムの基本構造を理解する鍵になります。
Variables（変数）
色・サイズ・タイポなどをトークンとして登録。CSS Variables・Tailwindのテーマ設定と直接マッピング可能です。
連携が便利なプラグイン
- Tailwind CSS：Tailwindクラスを自動生成
- Figma to Code：HTML / Tailwind / SwiftUI出力
- Anima：FigmaからReact/Vueコード生成
- Storybook Connect：StorybookとFigmaを紐付け
ハンドオフのコツ
- デザインシステムが定義されているか確認
- Componentの命名規則をエンジニア側のコンポーネント名と揃える
- Auto Layoutで作られているとレスポンシブが分かりやすい
- Variablesがあれば、CSS Variablesへ直接転写可能
まとめ
Figmaは「読めれば」エンジニアの強力な味方です。Dev Mode + Auto Layout + Components + Variablesを理解すれば、デザイナーとの会話が滑らかになり、実装スピードも上がります。デザインの「言語」を共有することが、良いプロダクトを作る近道です。
