figma-variant-matrix

Figma Variant Matrix Skill

Figma でコンポーネントを作成する前に必要なすべてのバリアント、プロパティ、状態を定義し、コンポーネントが 40 の画面で使用された後にバリアントの不足が判明するのを防ぎます。

必要な入力

• コンポーネント名（Button、Card、Input、Badge、Navigation item など）
• コンポーネントの目的（どのような機能があり、どこで使用されますか？）
• プラットフォーム（iOS／Android／Web／マルチプラットフォーム）
• デザインシステムのコンテキスト（単独／既存のシステムの一部）

出力構成

1. コンポーネントの概要

名前、カテゴリ（インタラクティブ／表示／レイアウト／フォーム／ナビゲーション／フィードバック）、使用されるコンテキスト。

2. バリアントのプロパティ

プロパティ	値	備考
Type	Primary、Secondary、Tertiary、Destructive
Size	Large、Medium、Small
State	Default、Hover、Active、Disabled、Loading
Icon	None、Leading、Trailing、Only

組み合わせの合計：[N]。50 を超える場合はフラグを付け、複数のコンポーネントへの分割を検討してください。

3. 状態の定義

各状態について、Default から変更される点のみを列挙します。

• Default：[ビジュアル仕様の全体]
• Hover（web）：[Default からの差分]
• Active／Pressed：[差分]
• Disabled：[差分 — コンポーネント全体の不透明度ではなく、レイヤーレベルのプロパティを使用]
• Loading：[ラベルの代わりに表示するもの、読み込み中も操作可能か]
• Error（フォーム）：[境界線の色、補助テキスト、アイコンの変更]

4. 構成要素の内訳

レイヤー名	目的	必須？	備考
container	背景と境界	はい
label	テキスト	条件付き	アイコンのみの場合は非表示
icon-leading	先行アイコンのスロット	いいえ

5. トークンのマッピング

プロパティ	トークン	フォールバック
デフォルトの背景	color.brand.primary	#hex
角丸	radius.medium	8px

6. 作成順序

1. Default 状態と、最も一般的なバリアント
2. コンポーネントに変換し、プロパティを追加
3. サイズのバリアント
4. 状態のバリアント
5. タイプのバリアント
6. 最後にアイコンスロットのバリアント

品質チェック

• すべてのインタラクティブな状態が定義されている
• バリアントの合計数が計算され、50 を超える場合はフラグが付けられている
• すべてのレイヤーに意味のある名前が付いている
• トークンのマッピングがすべてのビジュアルプロパティを網羅している
• Disabled 状態では不透明度ではなく、レイヤーレベルのプロパティを使用している

アンチパターン

• 重複または競合するプロパティを含むバリアントマトリックスを作成しないでください。各プロパティは独立して変更可能である必要があります
• Disabled 状態に不透明度を使用しないでください。Disabled 状態では不透明度ではなく、レイヤーレベルのプロパティを使用する必要があります
• 無効な組み合わせが多い場合、数学的に考えられるすべての組み合わせを列挙しないでください。有効で作成可能な組み合わせのみを記載してください
• レスポンシブ動作を考慮せずにバリアントを定義しないでください。画面サイズに応じて変化するプロパティを指定してください
• Figma での実装ガイダンスなしにマトリックスを作成しないでください。バリアントの命名規則は Figma のプロパティシステムに従う必要があります

トリガーフレーズの例

• 「Figma で [コンポーネント] のバリアントを定義して」
• 「自分の [コンポーネント] にはどのような状態が必要？」
• 「[コンポーネント] のバリアントマトリックスを計画するのを手伝って」
• 「[button/card/input] の Figma プロパティを設定して」
• 「自分の [コンポーネント] に必要な組み合わせをすべて教えて」