デザインハンドオフガイド：デザイナーとエンジニアの連携を円滑にする方法

デザインハンドオフとは、デザイナーが作成したUIデザインをエンジニアに引き渡し、実装してもらうプロセスです。ハンドオフの質がデザインの実装精度とチームの生産性に直結します。本記事では、Figmaを中心にした効率的なデザインハンドオフのベストプラクティスを解説します。

デザインハンドオフで起きがちな問題

実装とデザインのズレ：

スペーシング・フォントサイズ・カラーがデザインと実装で一致していない。コンポーネントの各状態が定義されておらず、エンジニアが独自に判断してしまう。

コミュニケーションコスト：

「この状態はどうするの？」「このスペースは何px？」「エラーメッセージのテキストは？」といった質問がハンドオフ後に多発し、デザイナーもエンジニアも時間を取られる。

アセットの管理問題：

書き出したアセット（画像・アイコン）のサイズ・フォーマットがデバイスに合っていない。アセットの更新時に古いものと新しいものが混在する。

Figmaのハンドオフ機能

Dev Mode（開発者モード）：

FigmaのDev Modeはエンジニア向けのビューで、選択した要素のCSS値・サイズ・カラー・スペーシングが表示されます。デザイントークンと連携したコード提案も可能で、実装時の「この値は何px？」という質問を大幅に削減します。

Inspect（インスペクト）：

無料版でも使えるFigmaのInspect機能で、フォントファミリー・サイズ・ウェイト・カラーコード・スペーシングを確認できます。

コメント機能：

デザインの特定の箇所にコメントを残せるFigmaのコメント機能を活用して、インタラクション・アニメーション・特定状態の注意点を記載します。

デザインスペックの作成

スペックが必要な情報：

• インタラクションと状態変化（ホバー・フォーカス・ローディング・エラーなどの各状態）
• アニメーションの詳細（種類・デュレーション・イージング）
• レスポンシブの挙動（各ブレークポイントでのレイアウト変化）
• エラーメッセージのテキスト・条件
• 空のステートのデザイン

効果的なスペックの書き方：

• 状態ごとにフレームを分けて並べる（Default・Hover・Focus・Error・Disabled・Loading を横並びに）
• アニメーションはFigmaプロトタイプまたはGIF・動画で補足
• テキストのコピーは正確に記載（コーディング中に変更しない）

コンポーネントの整理

ハンドオフ前のコンポーネントチェックリスト：

• [ ] すべてのバリアント（状態）が作成されているか
• [ ] Auto Layoutが適切に設定されているか（サイズ変更時の挙動確認）
• [ ] コンポーネント名が明確かつ一貫しているか
• [ ] デザイントークン（スタイル・変数）が適用されているか
• [ ] レスポンシブの各ブレークポイントのフレームが用意されているか

アセットの書き出し設定

画像のフォーマット：

• 写真・複雑なグラフィック: WebP（次世代フォーマット） または JPEG
• アイコン・ロゴ・シンプルなグラフィック: SVG
• PNGは互換性のために必要な場合のみ

解像度の設定：

モバイルでは @2x・@3x の解像度が必要です。Figmaの書き出し設定で複数解像度を同時に書き出せます。

命名規則：

icon_home_24.svg・img_hero_banner.webp のようにカテゴリ・名前・サイズを含む命名規則を統一します。

エンジニアとの効率的なコラボレーション

デザインレビューの設定：

実装ステージングでのデザインレビューを定期的に行い、ずれが生じた場合に早期修正します。「完成してから全部確認」より「こまめな確認」の方が修正コストが低い。

Figmaへの直接コメント：

エンジニアがFigmaに直接コメントできる環境を整えることで、「Slackで聞いてFigmaで確認」というロスが減ります。

スプリント内でのデザイン先行：

エンジニアの実装スプリントより1〜2スプリント先行してデザインを完成させることで、実装開始前に質問・修正を処理できます。

まとめ

良いデザインハンドオフは「伝わるデザイン」を作ることです。Figmaのコンポーネント整理・Dev Mode・スペック資料の作成・定期的なレビューを組み合わせることで、デザインと実装のズレを最小化し、チームの生産性を高めるハンドオフが実現します。UI ZUKANではデザインシステムの実装事例を紹介しています。