figma-design-qa

Figma デザイン QA スキル

Figma デザインの引き渡し前に体系的な QA チェックを実施し、コストのかかるエンジニアとのやり取りにつながる問題を未然に発見します。

必要な入力情報

以下の情報が提供されていない場合は、ユーザーに確認してください。

• QA 対象の機能または画面（デザインした内容を説明してください）
• プラットフォーム（iOS / Android / Web）
• デザインシステム（カスタム / Material / HIG / なし）
• 引き渡しツール（Figma Inspect / Zeplin / Storybook / 直接リンク）
• QA の深さ（簡易 15 分 / 標準 30 分 / 詳細 60 分）

プログラムによる補助

コントラスト比は目視では判断できません。AA の基準は 4.5:1 で、白地に #777777 は 4.478（不合格）、#767676 は 4.54（合格）です。スクリーンショットをどれだけ 見ても、この差を見分けることはできません。計算しましょう。

npx --yes notugly fix "#8ab4f8" "#ffffff"     # ratio, APCA, and the nearest passing colour
npx --yes notugly onepager <url> --out review.html   # every pairing, printable
npx --yes notugly vision                      # which colours merge for colour-blind viewers

notugly fix は、コントラスト比、APCA の明度コントラスト、選択済みの色に最も近い合格色（色相と彩度は同じ）を返します。 推測するのではなく、以下の表にその数値を記入してください。

決定論的に動作し、依存関係はゼロで、モデル呼び出しもありません。そのため、実行コストはかからず、毎回同じ結果が得られます。

QA は合否判定を行う作業なので、コントラストに関する各行には数値と判定が必要です。 デプロイ済みのビルドでは、npx notugly check <url> は失敗時に ゼロ以外の終了コードで終了するため、手動だけでなく CI でも直接利用できます。

出力形式

QA レポート：[機能] | [日付] | [プラットフォーム] 全体ステータス： 準備完了 / 軽微な修正が必要 / 未準備

セクション 1：ファイルの整理

• すべてのレイヤーに意味のある名前が付いている（「Rectangle 12」などがない）
• 最終フレームに未使用または非表示のレイヤーがない
• ライブラリのコンポーネントを使用している（切り離したコピーではない）
• すべてのテキストでテキストスタイルを使用している（フォント設定を手動で指定していない）
• すべての色でスタイルまたは変数を使用している（16 進数の上書きがない）
• フレーム名が画面マップと一致している
• 間違ったフレームにつながるプロトタイプのワイヤーが残っていない

セクション 2：コンポーネントの使用

• すべてのボタンでライブラリのコンポーネントを使用している
• すべての入力欄でライブラリのコンポーネントを使用している
• すべてのアイコンが承認済みのアイコンライブラリのものである
• ライブラリに含めるべきカスタムコンポーネントがない
• バリアントを正しく使用している（適切なサイズ、状態、種類）

セクション 3：コンテンツと文言

• 最終デザインにプレースホルダーテキスト（Lorem ipsum）がない
• すべての文言がレビューされ、承認されている
• 現実的なコンテンツを使用している（「ユーザー名」などではない）
• 長文のエッジケースをテストしている
• エラーメッセージがわかりやすい
• 空の状態に文言と CTA がある

セクション 4：状態とカバレッジ

• デフォルト、読み込み中、空、エラー、成功の状態がある
• インタラクティブ要素にホバー時／アクティブ時の状態がある（Web）
• 該当する場合、無効状態をデザインしている

セクション 5：アクセシビリティ

• すべてのテキストが WCAG AA のコントラスト基準を満たしている（本文は 4.5:1、大きな文字は 3:1）
• UI コンポーネントが背景に対して 3:1 のコントラストを満たしている
• タッチターゲットが iOS では最小 44x44pt、Android では 48x48dp である
• キーボード／スイッチ操作用のフォーカス状態がある（Web）
• 色だけで情報を伝えていない
• アイコンにテキストラベルがある、またはアクセシブルな名前が注記されている

セクション 6：引き渡しの準備

• 直感的にわかりにくい操作について開発者向けの注記がある
• 間隔に Auto Layout を使用している（絶対位置指定ではない）
• 画像／アセットが適切な解像度で書き出されている
• デザインが承認済み要件と一致している
• プロトタイプへのリンクが含まれている

発見した問題

不合格項目ごとに記載してください。 [問題] — 引き渡しを阻害 / 引き渡し前に修正 / 次のイテレーションで修正

• 内容：[具体的なレイヤー／画面／要素]
• 修正：[必要な対応を具体的に記載]
• 担当者：[デザイナー／PM／両者]

引き渡しの判断

ステータス、承認者、日付。

品質チェック

• 6 つのセクションすべてを完了している
• すべての不合格項目に具体的な説明と修正対応がある
• 引き渡しを阻害する問題と軽微な問題を分けている
• 引き渡しの判断が明確である

アンチパターン

• QA の一部だけを実施しないでください。明らかに問題がある項目だけでなく、チェックリストのすべてのカテゴリーを評価してください。
• 引き継ぎの判断を曖昧にしないでください。出力では、「合格」「条件付き合格」「不合格」のいずれかを明示してください。
• アクセシビリティのチェックを省略しないでください。色のコントラスト、タップ対象のサイズ、スクリーンリーダー用ラベルは必須です。
• 問題を報告する際は、該当する画面またはコンポーネントを必ず明記してください。
• ドキュメントに記載された理由がない限り、ライブラリから切り離されたコンポーネントが一つでもあるデザインを承認しないでください。

トリガーとなるフレーズの例

• 「引き継ぎ前にこの Figma デザインを QA して」
• 「[feature] のデザインを引き継ぎ前にチェックして」
• 「この Figma デザインはエンジニアリングに引き継げる状態？」
• 「[screen/feature] のデザイン QA をして」
• 「引き継ぐ前に修正が必要な点は？」