エンジニアのためのFigma入門【2026年版】Inspect・Dev Mode活用

なぜエンジニアがFigmaを知る必要があるのか

Figmaはデザイナーが使うUIデザインツールですが、現代のフロントエンドエンジニア・フルスタックエンジニアにとってもFigmaの読み方を理解することは必須スキルになっています。

エンジニアがFigmaを使う場面：
・デザイナーから渡されたデザインカンプをCSSで実装する際にデザイン仕様を確認する
・余白・フォントサイズ・カラーコードを正確に読み取る
・コンポーネント・バリアントの仕様を確認する
・デザイナーにコメントでフィードバックを送る
・個人開発でUIデザインを自分で作成する

「デザインはデザイナーの仕事」というスタンスでも、Figmaの基本的な使い方を知ることでデザイナーとのコミュニケーションが格段にスムーズになります。

Figmaの基本操作｜エンジニアが知るべきUI

Figmaの基本操作とエンジニアが使う場面で重要なUIを解説します。

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を紹介します。