なぜエンジニアがFigmaを知る必要があるのか
Figmaはデザイナーが使うUIデザインツールですが、現代のフロントエンドエンジニア・フルスタックエンジニアにとってもFigmaの読み方を理解することは必須スキルになっています。
エンジニアがFigmaを使う場面：
・デザイナーから渡されたデザインカンプをCSSで実装する際にデザイン仕様を確認する
・余白・フォントサイズ・カラーコードを正確に読み取る
・コンポーネント・バリアントの仕様を確認する
・デザイナーにコメントでフィードバックを送る
・個人開発でUIデザインを自分で作成する
「デザインはデザイナーの仕事」というスタンスでも、Figmaの基本的な使い方を知ることでデザイナーとのコミュニケーションが格段にスムーズになります。
Figmaの基本操作｜エンジニアが知るべきUI
Figmaの基本操作とエンジニアが使う場面で重要なUIを解説します。
主要な操作：
・Spacebar + ドラッグ：キャンバスを移動
・Ctrl/Cmd + スクロール：ズームイン・アウト
・Vキー：選択ツール
・要素をクリックして選択 → Inspectパネルで詳細確認
Inspectパネルの使い方（エンジニアに最重要）：
要素を選択した状態で右側の「Inspect」タブを開くと、CSS・iOS（Swift）・Android（Compose）の形式でスタイル情報が確認できます。具体的にはcolor・font-size・font-weight・padding・margin・border-radius・opacity・width・heightなどをCSSとして直接コピーできます。
デザインカンプからCSSを正確に実装するための知識
Figmaのデザインをコードに変換する際の実践的なポイントを解説します。
カラーの確認：
Inspectパネルでは HEX・RGB・HSLの値が確認できます。デザインシステムがある場合はCSS変数（--primary-color等）として定義されていることが多いです。
タイポグラフィの確認：
font-family・font-size・font-weight・line-height・letter-spacingをInspectパネルで確認します。Figmaのfont-size単位はpxが基本ですが、remに変換して実装することが多いです（16px = 1rem）。
スペーシング（余白）の確認：
要素間のスペースを確認するには、要素を選択した状態で別の要素にマウスをホバーするとスペースの値が表示されます。
Auto Layout（Flexbox相当）：
FigmaのAuto Layoutはflex・flex-direction・gap・padding・align-itemsなどのCSSのFlexboxに対応しています。Auto LayoutのプロパティはCSS FlexboxまたはCSS Gridにほぼ直接対応しています。
コンポーネント・デザインシステムの理解
大規模なプロジェクトではFigmaのコンポーネントとデザインシステムを理解することが重要です。
コンポーネントとバリアント：デザイナーはFigmaでReactのコンポーネントに似た「コンポーネント」と複数の状態（バリアント）を定義します。Button/Primary/Large・Button/Secondary/SmallのようにコンポーネントのStateとSizeが整理されています。この構造を理解してコードのコンポーネント設計に反映させましょう。
デザイナーとのコラボレーション方法
Figmaはリアルタイムコラボレーションができるためチームでの使用に最適です。エンジニアとデザイナーの協働を効率化するTipsを紹介します。
・コメント機能で疑問点をFigma上で質問する（「このホバー時の動作は？」「このボタンのdisabled状態は？」）
・デザイン変更の際にSlack等でnotifyしてもらうフローを作る
・エンジニア側で「実装が難しいデザイン」の代替案を提案する際はFigmaコメントで具体的に伝える
・Figma Dev Modeを使うと実装に必要な情報をより見やすく整理して表示できる