preparing-design-handoff

デザインのハンドオフ準備

このスキルは、In-Design 工程の最終ゲートです。エンジニアリングチームは、デザインの実装準備が整っているかを判断するため、一貫したシグナルに頼っています。シグナルが欠けているハンドオフでは、後工程で確認事項が発生し、エピックの開発着手が遅れます。

ハンドオフは1つではなく2つの要素で構成されます

次の両方が整った時点で、ハンドオフは完了です。

1. Figma ファイルが「Ready-for-Dev」状態であること。 最終デザインを1つのページにまとめ、実装時に参照するエンジニアリングストーリーに合わせてセクション名を付けます。Figma でセクションに「Ready for Dev」のマークを付けます。ユーザーに表示される文字列（トースト、エラーメッセージ、フォームの確認メッセージ、メール本文の文言）をフレームに注釈として付けます。注釈付きのプロトタイプも用意します。
2. Jira の状態が一致していること。 Figma ファイルをエピックの「Design」フィールドにリンクし、Figma でセクションに Ready for Dev のマークを付け、EM がエピックを Ready for Dev に移行します。全体の手順については navigating-design-jira-process を参照してください。

いずれかが欠けている場合、ハンドオフは完了していません。

準備チェックリスト（ハンドオフを宣言する前に）

• プロダクトイニシアチブまたは PRD ページが存在し、最新の状態である。
• Jira にエンジニアリングエピックがあり、デザイナーが担当者に割り当てられている、または割り当てられていた。
• デザインについて30％、60％、90％の各段階でレビューが行われ、90％レビューでの指摘に対応済みである。
• 該当する場合、実ユーザーテストが実施されている（90％レビューはこのためにあります）。
• Figma ファイルの最終デザインページが整理されている。Ready-for-Dev 対象には下書きページや未使用のフレームがない。
• ユーザーに表示される文字列すべてに、該当するフレームと合わせて Figma で注釈が付けられている。

項目に漏れがある場合は、ハンドオフ準備完了を宣言する前に明らかにしてください。ハンドオフの段階で、90％レビューが行われていなかったと初めて気付くようなことがあってはなりません。

Figma の準備状況の確認

セクションに Ready for Dev のマークを付ける前に、次の点を確認します。

• セクションがストーリーに対応している。 名前を付けた各セクションが、1つのエンジニアリングストーリーに対応している。複数のストーリーにまたがるセクションや、複数のセクションにまたがるストーリーは避けてください。
• トークンがライブラリに紐付いている。 デザインシステムの変数がある箇所に、生の16進数カラー値を使わないでください。using-figma と get_variable_defs を組み合わせて確認します。
• 文字列に注釈が付いている。 ボタンラベル、エラーメッセージ、トースト、空の状態、ヘルパーテキストなど、ユーザーに表示される文字列がすべて Figma のフレームまたは注釈に含まれている。
• エッジケースが網羅されている。 空、エラー、一部成功、オフライン、プレミアム限定の各状態が関連するフレームにある（または対象外であることが明記されている）。

他のスキルとの組み合わせ

• using-figma。 get_metadata を使って、期待する名前の Ready-for-Dev セクションがあることを確認します。get_variable_defs を使って、トークンが生の値ではなくライブラリに紐付いていることを確認します。デザイン内のコンポーネントが既存のものと酷似している場合は、search_design_system を使います。
• navigating-design-jira-process。 ハンドオフに伴う Jira 上の操作（Figma をエピックの「Design」フィールドにリンクする、Figma で Ready for Dev のマークを付ける、EM がエピックを移行する）は、こちらに記載されています。
• content-style-guide。 ハンドオフを宣言する前に、注釈が付いた文字列をすべてスタイルガイドに照らして確認します。エンジニアリングチームがローカライズする前にコンテンツスタイルの問題を見つけるうえで、トースト、エラー、フォーム確認メッセージの確認が最も効果的です。

見落としやすい点

• Ready-for-Dev のマークがない Figma ファイル。 エンジニアリングチームが最終版を見つけられません。最も見落とされやすい手順です。
• ストーリーと対応していないセクション。 各ストーリーは、そのストーリーだけの内容を含む Figma セクションに対応する必要があります。不一致があるとレビュー時に曖昧さが生じます。
• 文字列の注釈漏れ。 エンジニアリングチームはエピックに着手した時点で文字列を求めます。ハンドオフを宣言する前に、該当するフレームと合わせて Figma に注釈を付けてください。エンジニアリングチームに文言の考案を委ねないでください。
• エッジケースの状態がない。 空、エラー、一部成功、オフライン、プレミアム限定。対象外の場合は、フレームまたは dev-support コメントに明記してください。

出力形式

引き継ぎの準備を手伝うよう求められた場合：

1. 準備チェックリスト — 準備できている項目と、不足している項目。
2. Figma の準備状況チェック — セクションとストーリーの整合性、トークンのバインド、文字列の注釈、エッジケース。
3. Jira の変更 — 適用する具体的なステータス遷移と Figma リンク（Epic の "Design" フィールドにリンクし、セクションを Ready for Dev にし、EM が Epic を遷移させます）。正式な手順については navigating-design-jira-process を参照してください。

最後に、明確な可否を必ず示してください。この引き継ぎは本当に準備できていますか？