エンジニアのためのFigma入門｜デザイナーとの協業を円滑にする基本操作

「デザインカンプと実装が微妙にズレている」「デザイナーに何度も同じことを質問してしまう」——エンジニアとデザイナーの間で起きがちなこうした課題は、エンジニアがFigmaの基本操作を理解することで大幅に改善できます。

本記事では、デザインツールに馴染みのないエンジニアを対象に、Figmaの基本操作からCSSプロパティの取得方法、コンポーネント構造の理解まで、デザイナーとの協業に必要な知識を実践的に解説します。

Figmaとは？エンジニアが知っておくべき特徴

Figmaは、ブラウザベースのデザインツールです。Webアプリとして動作するため、インストール不要でURLを共有するだけでデザインを確認できます。

Figmaの主な特徴

ブラウザで動作：ChromeやEdgeなどのブラウザで動作するため、OS を問わず利用できます。デスクトップアプリも用意されていますが、ブラウザ版でも同じ機能が使えます。

リアルタイムコラボレーション：Google Docsのように、複数人が同時に同じファイルを閲覧・編集できます。デザイナーの作業中にリアルタイムでデザインの進捗を確認することも可能です。

コメント機能：デザイン上の特定の箇所にコメントを残せます。「この余白は何pxですか？」「この色はデザインシステムのどの色ですか？」といった質問を、デザインの該当箇所に直接書き込めます。

バージョン管理：変更履歴が自動保存され、過去のバージョンに戻ることも可能です。デザインの変更を時系列で追跡できます。

エンジニアがFigmaを使う場面

エンジニアがFigmaを使うのは、主に以下の場面です。

デザインの確認と実装：デザインカンプからレイアウト、色、フォント、余白などの情報を読み取り、コードに反映します。

アセットの取得：アイコンや画像をSVG、PNGなどの形式でエクスポートします。

デザインへのフィードバック：実装上の制約や提案をコメントとしてデザイナーに伝えます。

プロトタイプの確認：画面遷移やアニメーションの挙動をプロトタイプで確認します。

画面の見方と基本操作

Figmaのインターフェースをエンジニアの視点で理解しましょう。

閲覧モードとDev Mode

Figmaファイルを開くと、デフォルトでは「Design」モードで表示されます。エンジニアが実装情報を取得するには「Dev Mode」に切り替えるのが効率的です。画面右上の「 Dev Mode」ボタンをクリックするか、ショートカットShift+Dで切り替えられます。

Dev Modeでは、以下の情報が見やすく整理されて表示されます。

CSSプロパティ：選択した要素のwidth、height、padding、margin、border-radius、box-shadowなどのCSSプロパティがコードとして表示されます。

カラーコード：HEX、RGB、HSLなどの形式でカラーコードを確認できます。

タイポグラフィ：font-family、font-size、font-weight、line-height、letter-spacingなどのテキストプロパティが表示されます。

要素間の距離：要素を選択した状態で別の要素にホバーすると、2つの要素間の距離がピクセル単位で表示されます。

基本的な操作方法

ズーム：Ctrl+マウスホイール（macOSはCmd+マウスホイール）でズームイン・アウトします。Ctrl+0で100%表示、Shift+1で全体表示に戻れます。

パン（移動）：スペースキーを押しながらドラッグすると、キャンバスを移動できます。マウスのミドルボタンでのドラッグでも同様です。

要素の選択：クリックで要素を選択します。要素がグループ化されている場合、ダブルクリックでグループ内の要素を直接選択できます。

距離の確認：要素を選択した状態でAlt（macOSはOption）キーを押しながら別の要素にホバーすると、選択した要素からの距離が表示されます。これはレイアウトの実装時に最も頻繁に使う操作です。

CSSプロパティとデザイン情報の取得

実装に必要なデザイン情報を効率的に取得する方法を解説します。

レイアウト情報の読み取り

要素を選択すると、右パネルの「Design」タブにレイアウト情報が表示されます。

サイズ：Width（幅）とHeight（高さ）がピクセル単位で表示されます。レスポンシブデザインの場合、固定値なのか比率なのかをデザイナーに確認しましょう。

Auto Layout：FigmaのAuto Layoutは、CSSのFlexboxに相当する機能です。方向（横並び/縦並び）、gap（要素間の余白）、padding（内側の余白）がFlexboxのプロパティに直接対応しています。

制約（Constraints）：要素が親コンテナに対してどのように配置されるかを示します。「Left & Top」「Center」「Scale」などの値がCSS のposition やFlexboxのalign設定に対応します。

カラーとスタイル

Dev Modeで要素を選択すると、適用されているカラーがコードとして表示されます。

Fill（塗り）：背景色に対応します。単色、グラデーション、画像パターンがあります。

Stroke（線）：border に対応します。色、太さ、スタイル（実線、破線など）が確認できます。

Effects（効果）：box-shadow、backdrop-filter、blurなどが確認できます。

デザインシステムでスタイルが定義されている場合、個別のカラーコードではなくスタイル名（例：「Primary/500」）が表示されます。この名前がCSSカスタムプロパティやTailwind CSSのクラス名に対応する場合があるので、デザイナーと命名規則を確認しておきましょう。

フォント・テキスト情報

テキスト要素を選択すると、以下の情報が取得できます。

Font Family：使用されているフォント名。Google FontsやAdobe Fontsから読み込む必要がある場合は、実装時にフォントの読み込み設定も必要です。

Font Size：文字サイズ（px単位）。実装時にremに変換する場合は、ベースフォントサイズとの比率を計算します。

Font Weight：文字の太さ。Regular（400）、Medium（500）、Bold（700）などの数値で表示されます。

Line Height：行間。pxまたは%で表示されます。CSSのline-heightに対応します。

Letter Spacing：文字間隔。CSSのletter-spacingに対応します。

コンポーネントの理解と活用

Figmaのコンポーネントシステムは、Reactなどのフロントエンドフレームワークのコンポーネントと非常に似た概念です。

コンポーネントとインスタンス

Figmaでは、再利用可能なデザイン要素を「コンポーネント」として定義します。コンポーネントから作成されたコピーを「インスタンス」と呼びます。これはReactの「コンポーネント定義」と「コンポーネントの使用箇所」の関係と同じです。

コンポーネントは紫色のひし形アイコン、インスタンスは白抜きのひし形アイコンで区別されます。要素を選択すると、右パネルにコンポーネント名が表示されます。

Variants（バリアント）

Variantsは、コンポーネントのバリエーションを管理する機能です。例えば、ボタンコンポーネントに以下のようなVariantsを設定できます。

Size：Small、Medium、Large

State：Default、Hover、Active、Disabled

Type：Primary、Secondary、Outline

これは、Reactコンポーネントのpropsに直接対応します。

<Button size="medium" variant="primary" disabled={false}>
  送信する
</Button>

デザイナーが設定したVariantsを確認することで、コンポーネントに必要なpropsを正確に把握できます。

デザインシステムとの対応

多くのプロジェクトでは、Figmaのコンポーネントライブラリとフロントエンドのコンポーネントライブラリが対応関係にあります。

デザイナーとエンジニアの間で、以下のような対応表を共有しておくと、実装がスムーズになります。

Figmaコンポーネント名 → コードでのコンポーネント名

Figmaのバリアント名 → propsの値

FigmaのDesign Token名 → CSSカスタムプロパティ名

アセットのエクスポート

実装に必要な画像やアイコンをFigmaからエクスポートする方法を解説します。

画像のエクスポート

エクスポートしたい要素を選択し、右パネルの「Export」セクションで設定します。

PNG：写真やスクリーンショットなど、複雑な画像に適しています。1x、2x、3xの倍率でエクスポートすることで、Retinaディスプレイに対応できます。

SVG：アイコンやロゴなど、ベクター形式の画像に適しています。拡大しても劣化せず、CSSでカラーを変更することも可能です。

JPG：写真画像をファイルサイズ重視でエクスポートする場合に使用します。

PDF：印刷用途や高品質なベクター出力が必要な場合に使用します。

SVGアイコンの最適な取得方法

アイコンをSVGでエクスポートする際のベストプラクティスです。

コンポーネントレベルで選択：アイコンの一部だけでなく、コンポーネント全体を選択してエクスポートしましょう。

SVGOで最適化：エクスポートしたSVGファイルは、SVGOなどのツールで最適化すると、不要なメタデータやコメントが除去されファイルサイズが削減されます。

React用のコンポーネント化：Reactプロジェクトでは、SVGをJSXコンポーネントに変換するツール（svgrなど）を使うと、propsでサイズや色を制御できるようになります。

一括エクスポートの効率化

デザイナーがエクスポート設定を事前に行っている場合、コレクション全体を一括でエクスポートできます。左パネルでエクスポート対象を確認し、ファイルメニューから「Export」を選択すると、設定済みのすべてのアセットが一度にダウンロードされます。

デザイナーとの効果的なコミュニケーション

Figmaを介したコミュニケーションを改善するためのポイントを紹介します。

コメント機能の活用

Figmaのコメント機能（Cキーでコメントモードに切り替え）を使って、デザインの特定箇所に関する質問やフィードバックを残しましょう。

効果的なコメントの例

「この要素はスクロール時にfixed配置になりますか？」

「この一覧の要素数が0件の場合のデザインはありますか？」

「画面幅768px以下での表示はどうなりますか？」

「このアニメーションのduration（持続時間）とeasing（イージング）はどうしますか？」

実装に必要な情報が不足している場合、推測で実装するのではなく、コメントで確認するのが最も効率的です。

デザインレビューへの参加

デザインの初期段階からレビューに参加することで、実装上の制約を早い段階でフィードバックできます。

技術的な実現可能性：「このアニメーションはCSSだけでは実現が難しく、JavaScriptライブラリが必要です」

パフォーマンスへの影響：「この大きな背景画像はモバイルでの読み込み速度に影響するので、代替案を検討しませんか」

アクセシビリティ：「このテキストと背景色のコントラスト比が基準（4.5:1）を下回っています」

デザインハンドオフの改善

デザインから実装へのスムーズな受け渡し（ハンドオフ）のために、以下を実践しましょう。

デザインシステムの用語を統一する：Figmaのコンポーネント名やスタイル名をコードの命名と揃えることで、コミュニケーションコストが下がります。

レスポンシブの方針を明確にする：ブレークポイントごとのデザインが用意されていない場合、どのように振る舞うべきかを事前に合意しておきます。

状態やインタラクションを網羅する：ホバー、フォーカス、エラー、ローディング、空状態など、各状態のデザインが揃っているか確認します。

Figmaプラグインとエンジニア向けツール

エンジニアの作業を効率化するFigmaプラグインを紹介します。

開発効率を上げるプラグイン

Figma to Code（HTML/Tailwind/Flutter）：FigmaのデザインからHTML、Tailwind CSS、Flutterのコードを自動生成します。出力されたコードをそのまま使うのではなく、実装の参考として活用するのがおすすめです。

Design Tokens：Figmaのスタイル（色、フォント、余白など）をJSON形式のDesign Tokenとしてエクスポートします。Style DictionaryなどのツールでCSS変数やTailwind CSS設定に変換できます。

Contrast：テキストと背景色のコントラスト比をチェックし、WCAGの基準を満たしているか確認できます。

デザインとコードの同期

最近では、FigmaのDesign Tokenをコードリポジトリと自動同期するワークフローが注目されています。デザイナーがFigmaで色やフォントを変更すると、自動的にCSSカスタムプロパティやTailwind CSS設定が更新される仕組みです。

Style Dictionary、Tokens Studio for Figma（旧Figma Tokens）などのツールを組み合わせることで、デザインとコードの一貫性を自動的に維持できます。

まとめ：Figmaスキルでデザイナーとの協業を改善しよう

本記事では、エンジニアがFigmaを活用するための基本操作とデザイナーとの協業テクニックを解説しました。

エンジニアがFigmaを使いこなすことで得られるメリットをまとめます。

実装の精度が向上する：Dev Modeでデザイン情報を正確に取得することで、ピクセルパーフェクトな実装が可能になります。

コミュニケーションコストが削減される：デザインの意図を直接読み取れるため、デザイナーへの質問回数が減ります。

手戻りが減る：デザインレビューに参加し、実装上の制約を早期にフィードバックすることで、後からの修正を防げます。

コンポーネント設計の質が上がる：FigmaのコンポーネントとVariantsを理解することで、フロントエンドのコンポーネント設計にも良い影響があります。

まずはDev Modeでの情報取得とコメント機能の活用から始めてみてください。デザイナーとの円滑な協業は、プロダクトの品質向上に直結します。