デザインハンドオフ仕様書作成の原則
デザインハンドオフとは、デザイナーが開発者に実装に必要なすべての情報を渡すプロセスです。曖昧な仕様書は頻繁な質問往復につながり、最終成果物がデザイン意図と異なる原因になります。良い仕様書は開発者がデザイナーに確認しなくても実装できるレベルで作成する必要があります。
カラートークン・タイポグラフィ・余白・コンポーネント状態・レスポンシブブレークポイントが5つのコアカテゴリです。FigmaのDev ModeやZeplinなどのツールでこれらを自動抽出できますが、ホバー/フォーカス状態やアニメーションなどの動的仕様は見落とされやすいです。
トークンベースの仕様書
カラー・サイズ・余白をデザイントークンとして定義すると、デザイナーと開発者が同じ名前でコミュニケーションできます。color-primary-500やspacing-mdのような意味のある名前を使うと、値が変更されてもトークン名は維持されメンテナンスが容易になります。
よくある質問
仕様書にはpxとremどちらを使うべきですか？
アクセシビリティのためフォント・余白はrem推奨、px併記。チームで合意した単位を一貫して使うことが最も重要です。
ハンドオフ仕様書に必ず含める項目は？
カラートークン・タイポグラフィ・余白・コンポーネント状態(hover/focus/disabled)・レスポンシブブレークポイントが必須です。
Figmaプラグインなしでも仕様を伝えられますか？
FigmaのInspectパネル共有やNotionの仕様テーブルで十分です。コンポーネント名・状態・単位を明確に記述することが重要です。