Figmaは、Webベースのデザインツールとして多くのチームで採用されています。エンジニアがFigmaの基本を知っておくと、デザイナーとの連携がスムーズになり、フロントエンド開発の効率が上がります。開発環境を整える際はVS Code拡張機能おすすめもあわせて確認しておきましょう。
エンジニアがFigmaを使う場面
デザインカンプの確認
デザイナーが作成したUIデザインを確認し、実装に必要な情報（サイズ、色、余白など）を取得します。
CSSプロパティの取得
Figmaでは要素を選択すると、フォントサイズ、カラーコード、パディングなどの値を確認できます。「Inspect」パネルからCSSに近い形式で値を取得できるため、実装の手間が大幅に減ります。
アセットのエクスポート
画像やアイコンを必要なサイズ・形式（PNG、SVG、JPGなど）でエクスポートできます。
Web開発技術マップも参考にしてください。
基本操作
画面の操作
- ズーム — Ctrl + スクロール（Mac: Cmd + スクロール）
- パン（移動） — スペースキー + ドラッグ
- フレーム選択 — 左側のレイヤーパネルからクリック
Inspectモード
画面右側の「Inspect」タブを選択すると、以下の情報が表示されます。
- 要素のサイズ（width, height）
- 位置（top, left）
- 色（HEX、RGB）
- フォント情報（サイズ、ウェイト、行間）
- ボーダー、シャドウ
要素間の距離の測定
要素を選択した状態で、別の要素にマウスを乗せると、要素間の距離が赤い線で表示されます。マージンやパディングの値を正確に把握するのに便利です。
デザイナーとの連携ポイント
デザインシステムの共有
Figmaのコンポーネント機能を使えば、ボタン、入力フォーム、カードなどのUIパーツを共通化できます。デザインとコードのコンポーネントを一致させることで、実装の認識違いを防げます。
コメント機能の活用
Figma上でコメントを残し、実装上の疑問点をデザイナーに質問できます。口頭でのやり取りよりも、画面上で具体的に指し示す方が正確です。
Auto Layout の理解
FigmaのAuto Layout機能は、CSSのFlexboxに近い概念です。Auto Layoutの設定を見れば、要素の並び方や余白の取り方を理解しやすくなります。CSSの設計手法を学びたい方はCSS設計入門をご覧ください。
Figmaの料金
個人利用（Starterプラン）は無料で、プロジェクト数に制限がありますが、基本的な機能は使えます。チーム利用にはProfessionalプラン（有料）が適しています。
関連記事：CSS設計入門でフロントエンド実装の基礎を学びましょう。Web Accessibility入門もデザイン実装に役立ちます。
まとめ
エンジニアがFigmaの基本操作を身につけることで、デザイナーとの連携がスムーズになり、実装品質が向上します。フロントエンドとバックエンドの違いも把握した上で、UI実装のスキルを磨いていきましょう。
