Figmaコンポーネントのベストプラクティス：設計・命名・バリアント・プロップスの管理

Figmaのコンポーネント機能は、デザインシステムの核心をなす要素です。適切に設計されたコンポーネントは、一貫性のあるUIデザインを効率的に作成・管理することを可能にします。本記事では、プロのデザイナーが実践するFigmaコンポーネントの設計・命名・バリアント・プロパティ管理のベストプラクティスを解説します。

コンポーネント設計の基本原則

Single Source of Truth（単一の真実の源）：

同じUIパターンを複数の場所でバラバラに管理するのではなく、1つのコンポーネントから派生させることで、変更時の更新コストを最小化します。

アトミックデザインの考え方：

Brad Frost提唱のアトミックデザインでは、UIを「原子（Atoms）→分子（Molecules）→有機体（Organisms）→テンプレート→ページ」の階層で構成します。Figmaでも同様に、ボタン・インプットなどの基礎コンポーネントを組み合わせてフォームなどの複合コンポーネントを作る設計が効果的です。

コンポーネントの粒度：

コンポーネントが大きすぎると再利用性が低下し、小さすぎると管理が煩雑になります。「独立して意味を持つ最小単位」を目安に粒度を決めます。

命名規則

階層と種類を反映した命名：

カテゴリ/コンポーネント名/バリアント の形式が一般的です：

• Button/Primary/Default
• Button/Primary/Hover
• Input/Text/Default
• Input/Text/Error

スラッシュ区切りのメリット：

Figmaのコンポーネントパネルでスラッシュ区切りの命名は自動的にグループ化されるため、大量のコンポーネントを整理しやすくなります。

一貫した言語の使用：

チーム内で英語統一か日本語統一かを決め、混在させないことが重要です。エンジニアとの連携を考えると英語統一が後々スムーズです。

Variantsの設計

Variantsとは：

FigmaのVariants機能を使うと、ボタンの「色・サイズ・状態」など複数のバリエーションを1つのコンポーネントセットとして管理できます。

プロパティの設定例（ボタンコンポーネント）：

• Type: Primary / Secondary / Text
• Size: Small / Medium / Large
• State: Default / Hover / Focus / Loading / Disabled
• Icon: Left / Right / None

これらを組み合わせることで、ボタンの全バリエーションを1つのコンポーネントセットで管理します。

バリアント数の管理：

バリアントの組み合わせが爆発的に増えないよう、実際に使用するバリアントのみを作成します。「理論上あり得るが実際に使わない組み合わせ」は省略します。

コンポーネントプロパティ（Component Properties）

FigmaのComponent Properties機能では、コンポーネントのインスタンスレベルで変更できるプロパティを定義できます。

Boolean Property：

アイコンの表示/非表示などのON/OFF切り替えに使います。

Text Property：

ボタンラベルや見出しテキストをインスタンスで変更可能にします。

Instance Swap Property：

アイコンのSwapなど、別のコンポーネントインスタンスに入れ替えられるプロパティです。

これらを活用することで、バリアントの数を削減しながら柔軟性を確保できます。

Auto Layoutの活用

コンポーネントへのAuto Layout適用：

コンポーネントにAuto Layoutを設定することで、テキストが長くなった場合の自動リサイズ・パディングの一貫した管理が可能になります。

ネストされたAuto Layout：

カードコンポーネントでは、ヘッダー・本文・フッターそれぞれにAuto Layoutを設定し、さらにカード全体にもAuto Layoutを適用するネスト構造が効果的です。

Spacing Mode：

Auto Layoutの「Space between items」と「Fixed spacing」を使い分けることで、コンテンツ量に関わらず均等な間隔や両端寄せのレイアウトが維持されます。

コンポーネントの管理と共有

ライブラリファイルの運用：

コンポーネントは専用の「UIライブラリ」ファイルに集約し、他のデザインファイルから参照する運用が推奨されます。

更新の通知とレビュー：

コンポーネントを更新した際に、使用中のファイルへのアップデートを確認するレビュープロセスを設けることで、意図しない破壊的変更を防ぎます。

まとめ

Figmaコンポーネントの品質はデザインチームの生産性と一貫性に直結します。適切な命名規則・Variants設計・Component Properties・Auto Layoutの活用で、チーム全員が使いやすいデザインシステムの基盤が完成します。UI ZUKANではFigmaを使ったUIデザインの実装事例を紹介しています。