【実務・中級編】Figmaの「Component Set」を駆使したステート管理！複雑なフォームUIの全状態を1つのマスターに集約する裏技 – UI/UX・デザインツール活用バイブル

Figma Component Setの真髄：複雑なフォームUIの全状態を1つのマスターに集約する設計手法

テックリードの〇〇だ。日々のプロダクト開発、本当にお疲れ様。

「またか」と思っていないだろうか。
ボタンのホバー、アクティブ、フォーカス、ローディング、そしてエラー。さらにそれが入力欄（Input）やチェックボックスと組み合わさった瞬間、Figmaのアセットパネルは数え切れないほどの単体コンポーネントで埋め尽くされ、どれが最新のマスターなのか誰にも分からなくなる。デザインシステムをメンテナンスしているつもりが、いつの間にか「負債の温床」になっている。

エンジニアとデザインのハンドオフ（引き渡し）の現場で、こういう会話が生まれていないだろうか？

  • 「このエラー状態のパディング、他と違くない？」
  • 「ローディングからエラーへの遷移時のレイアウトシフトがデザインで見えないんだけど」
  • 「実装しようとしたら、必要なバリアントがFigma側に存在しなかった」

この地獄を終わらせる切り札が、Figmaの「Component Set（バリアント機能）」を極限まで使い倒したステート管理の集約だ。

今回は、単なるツールの使い方ではない。コンポーネント指向プロトタイピングの思想をFigmaに持ち込み、開発スピードを劇的に高めるための「プロの実践テクニック」をすべて授ける。

—

1. 思想：なぜ「個別のコンポーネント」を乱立させてはいけないのか？

従来のFigma運用では、`Button/Primary/Default`、`Button/Primary/Hover`、`Button/Primary/Disabled` と、状態ごとに独立したマスターやコンポーネントを作りがちだった。これはアンチパターンだ。

Reactなどのモダンなフロントエンド開発において、UIコンポーネントは次のように設計されるはずだ。

UIは「状態（State）の関数」である。Figma上でもこのメンタルモデルを完全に一致させるべきだ。Component Setを使うことで、Figmaのプロパティ＝コードのPropsという直感的なマッピングが完成し、デザイナーの意図とエンジニアの実装が完全に同期する。

—

2. 構築：複雑なフォームコントロールを1つのComponent Setに集約する

例として、実務で最も破綻しやすい「バリデーションエラー付きインプットフィールド」をマスター化するプロセスを解説する。

ステップ1：プロパティ設計の命名規則

Component Set化する前に、プロパティの軸（AXIS）を定義せよ。ここを適当にやると後で破滅する。

  • `State` (Value Type: String or Variant): `Default` | `Hover` | `Focus` | `Filled` | `Error` | `Disabled` | `Loading`
  • `HasIcon` (Value Type: Boolean): `true` | `false`
  • `Size` (Value Type: String): `Sm` | `Md` | `Lg`

ステップ2：Auto Layoutの階層構造の統一

すべてのバリアントでレイヤー構造を完全に一致させよ。これが崩れていると、バリアントを切り替えた瞬間に要素が明後日の方向に飛び散る。

[Component Set: Input Field]
┗ ◼︎ Variant (State=Error, HasIcon=true, Size=Md) [Auto Layout: Vertical / Gap: 4px]
┣ ◻︎ Label Wrapper [Auto Layout: Horizontal]
┃ ┗ A Label Text
┣ 🟩 Input Base [Auto Layout: Horizontal / Padding: 12px / Hugging]
┃ ┣ ❖ Left Icon (Instance)
┃ ┗ A Input Text (Value or Placeholder)
┗ 🔴 Error Message [Auto Layout: Horizontal / Gap: 4px]
┣ ❖ Alert Icon
┗ A Error Text

  • ポイント: エラーメッセージやヘルパーテキストの領域は、「条件付き表示（Visibilityプロパティ）」またはレイヤーの有無で制御する。Auto Layoutの `Hug contents` を組み合わせることで、エラーが出現した瞬間にフォーム全体が滑らかに押し下がるアニメーションの検証も可能になる。

—

3. 生産性を加速させる！隠れたキーボードショートカット

Figmaでのコンポーネント設計スピードを3倍にするためのショートカットを体に叩き込め。

  • `⌥ + ⌘ + K` (Mac) / `Alt + Ctrl + K` (Win)
  • 選択したフレームを即座にコンポーネント化。
  • `⌥ + ⌘ + C` / `⌥ + ⌘ + V` (Mac)
  • プロパティ（デザインのスタイルやバリアント設定）のコピー＆ペースト。膨大なバリアントを作る際にこれがないと発狂する。
  • `Shift + A`
  • Auto Layoutの適用。コンポーネント内のレスポンシブ挙動の生命線。
  • `Enter` / `Shift + Enter`
  • Auto Layout階層内での子要素の選択と親への移動。レイヤーパネルを開かずに構造を高速で操作する。

—

4. チーム開発の品質を底上げする「神プラグイン」3選

手作業でデザインシステムの整合性を保つのは不可能だ。CI/CDの概念をFigmaにも持ち込め。

1. Tokens Studio for Figma (旧Figma Tokens)

  • 用途: デザインシステムの色、タイポグラフィ、スペーシングをJSON形式で管理し、GitHubと双方向同期する。
  • テックリードの視点: これを使うことで、Figma上のトークン変更をそのままPR（Pull Request）としてエンジニアに飛ばすことが可能になる。

2. Automator by Figma

  • 用途: Figma内の定型作業（例：「選択した全バリアントに正しい命名規則のプロパティを付与する」など）をマクロ化して自動実行。
  • テックリードの視点: 人的ミスによる命名揺れ（例: `Focus` と `focused` の混在）を根絶できる。

3. Accessibility Color Contrast Checker (A11Y)

  • 用途: WCAGのコントラスト比をリアルタイムで検証。
  • テックリードの視点: 特に「Error State」や「Disabled State」でアクセシビリティ基準を満たしていないデザインをリリース前に弾く。

—

5. チーム開発で役立つ設定の共有化ルール

組織がスケールしてもデザインが崩壊しないためのガバナンスルール。

1. 「Component Set化されていない単体コンポーネント」のパブリッシュ禁止

  • チームライブラリには必ず親となるComponent Setのみをパブリッシュし、個別のバリアントは外部から直接選択させない強制力を働かせる。

2. 命名規則の厳格化（Slash命名法からの脱却）

  • 旧来の `Button / Primary / Hover` 方式は禁止。Component Setのプロパティ機能（Properties）を必ず使い、コードのProps構造と一致させる。

3. Property値は英数字（PascalCase / camelCase）に統一

  • 日本語をプロパティ値に使うな（例: `状態=エラー` はNG。`state=error` または `State=Error` にする）。エンジニアがコードに起こす際のメンタルモデルを阻害する。

—

6. 実戦投入：Design Tokensと連携するJSON構成例

Figmaで設計したコンポーネントのステートやデザイン変数は、Tokens Studio等のツールを経由してコード側に同期される。以下は、プロフェッショナルな現場で使われている、フォームUIステートのJSON設定ファイルのベストプラクティス構成だ。

{
“component”: {
“input”: {
“base”: {
“borderRadius”: { “value”: “{border.radius.md}” },
“borderWidth”: { “value”: “{border.width.thin}” },
“fontFamily”: { “value”: “{font.family.base}” },
“fontSize”: { “value”: “{font.size.sm}” }
},
“states”: {
“default”: {
“borderColor”: { “value”: “{color.border.neutral}” },
“backgroundColor”: { “value”: “{color.surface.default}” },
“textColor”: { “value”: “{color.text.primary}” }
},
“hover”: {
“borderColor”: { “value”: “{color.border.hover}” },
“backgroundColor”: { “value”: “{color.surface.default}” }
},
“focus”: {
“borderColor”: { “value”: “{color.action.primary}” },
“ringColor”: { “value”: “{color.action.focusRing}” },
“ringWidth”: { “value”: “{border.width.thick}” }
},
“error”: {
“borderColor”: { “value”: “{color.feedback.error}” },
“backgroundColor”: { “value”: “{color.surface.errorLight}” },
“textColor”: { “value”: “{color.text.error}” }
},
“disabled”: {
“borderColor”: { “value”: “{color.border.disabled}” },
“backgroundColor”: { “value”: “{color.surface.disabled}” },
“textColor”: { “value”: “{color.text.disabled}” },
“opacity”: { “value”: “0.6” }
}
}
}
}
}

  • 解説: このJSON構造をFigmaのトークンと紐付けておけば、デザイントークン（色や余白）が変更された瞬間、Figma上の全フォームの全ステート（DefaultからErrorまで）が一網打尽にアップデートされる。手作業での修正漏れは、この瞬間から宇宙から消え去る。

—

最後に：デザインとコードの境界線を溶かせ

優秀なエンジニアと優秀なデザイナーの境界線は曖昧だ。
FigmaのComponent Setを「絵を描くツール」としてではなく、「ステートマシン（状態機械）を定義するプロトタイピング環境」として捉えた瞬間から、あなたのチームのプロダクト開発速度は爆発的に跳ね上がる。

無駄なレイヤーの重複に怯える日々はもう終わりにしよう。
さあ、今すぐFigmaを開き、野放図に散らばったコンポーネントたちを1つの美しいComponent Setへと統合してこい。

スポンサーリンク
タイトルとURLをコピーしました