Figma WebデザインをCodexへ渡す

渡す前にデザイン側で整える

デザインをそのまま実装へ渡すと、意図が伝わりません。渡す前に次を整えてください。

1. レイヤーやフレームの名前を意味のあるものにする — 「Frame 12」では何か分かりません
2. 繰り返しの要素をまとめておく — 部品として扱えるようにする
3. 使っている色と文字サイズの種類を減らす — 種類が多いと、実装側で定義が増えます

3番目が効きます。感覚で少しずつ変えた色は、実装では全部別の値になります。渡す前に一覧にして、統合できるものはまとめてください。

伝えるべきは見た目より「ふるまい」

デザインから読み取れないのは、静止した見た目ではなく動きと状態です。次を添えてください。

• 押した時、読み込み中、無効の見え方
• 文字数が想定を超えた時の扱い — 折り返すか、省略するか
• 画面幅が変わった時の優先順位 — 何から隠すか

3番目を伝えないと、実装側が推測します。「狭くなったら何を残すか」はデザインの判断なので、実装に委ねないでください。

できたものを確認する順番

実装が上がってきたら、細部より先に見るところがあります。

1. 文章の内容が合っているか — 見た目より先。誤字や古い文言
2. 狭い画面で崩れていないか
3. 押した後に何が起きるか
4. 細部の余白や色

4番目を先に見ると、時間を使い切ります。余白が1px違うことより、文言が古いことのほうが問題です。影響の大きい順に見てください。

一度に渡す量を決める

全ページ分をまとめて渡すと、確認が追いつかず手戻りが大きくなります。

• 1画面ずつ渡す — 確認しやすく、間違いが局所で止まります
• 共通部分を先に渡す — ヘッダー、フッター、ボタンなど。あとの画面で使い回せます
• 動きのある部分は最後 — 静止した形が固まってから

2番目の順番が効きます。共通部分を先に確定させると、以降の画面で同じ議論を繰り返さずに済みます。