バリアントの作成と整理

Figmaにおける「バリアント」は、1つのコンポーネントセット内で複数のコンポーネントの異なるバージョンを効率的に作成および管理できる機能を提供します。この機能を活用することで、デザインシステム全体を整理し、関連するコンポーネントのさまざまな状態やバリエーションを簡単に切り替えることができます。たとえば、ボタンコンポーネントには、デフォルト、ホバー、アクティブなどの状態や、プライマリー、セカンダリー、無効といった異なる種類のバリエーションを作成することが可能です。バリアントを使用すると、関連するすべてのコンポーネントを1つのセットにまとめ、デザインシステム全体での一貫性を保ちながら、デザインプロセスを大幅に効率化することができます。これにより、デザイナーはより迅速に作業を進め、チーム全体でのデザインの整合性を確保することができます。

バリアントの利点

バリアントは、コンポーネントや拡張性のあるデザインシステムに新しい可能性をもたらします。一見すると、バリアントの作成や整理には多くの作業が必要に思えるかもしれませんが、実際にはデザインの複雑さを軽減し、ユーザーにとってよりシンプルで楽しい体験を提供します。具体的には、以下のような利点があります。

コンポーネントのブラウジングが簡単に – デザイナーはアセットパネルで同じコンポーネントの複数のバリエーションを探し回る必要がなくなり、どのバリエーションが正しいかを迷うことがありません。これにより、作業の効率が向上し、誤って異なるバリエーションを使用するリスクが減少します。

インスタンスの複雑さを軽減 – コンポーネント全体を変更することなく、特定のプロパティを簡単に選択または調整できるため、デザインの変更が迅速に行えます。これにより、デザインの一貫性を保ちながら、柔軟に対応することができます。

オーバーライドの保持 – バリアント間を切り替える際にも、ネストされたコンポーネントやスタイルのオーバーライドが保持されるため、デザインのカスタマイズが容易になります。これにより、デザインの変更や調整がスムーズに行えます。

既存の作業との互換性 – バリアントは既存のコンポーネントを自動的に置き換えるため、既存ファイルの移行が簡単に行えます。これにより、新しいデザインシステムへの移行がスムーズになり、作業の効率が向上します。

効果的なバリアントの使用

バリアントをすべてのコンポーネントに適用する前に、バリアントを使用するのが適切な状況と避けるべき状況を理解することが重要です。すべてのコンポーネントがバリアントである必要はなく、バリアントと既存の技術を組み合わせて使うことも可能です。具体的には、以下のような場合にバリアントを使用するのが効果的です。

バリアントを使用する場合

• 複数の類似コンポーネントが状態、サイズ、数、レイアウトなどの同じプロパティを共有する場合
• コンポーネントがtrue/false、オン/オフ、はい/いいえなどの2つの明確なバリエーションを切り替えることができる場合
• コンポーネントバリアントがReactやVueなどの人気のあるフロントエンドフレームワークで使用されるprop/value形式に従うコードコンポーネントにマッピングされる場合

避けるべき状況

• バリアントの追加によって管理が難しいほどの多くの組み合わせが生じる場合。こうした場合には、インスタンスを入れ子にするか、ベースコンポーネントを使用することを検討するべき
• カラーやテーマの変更がバリアントを増加させ、すべてのコンポーネントで管理する必要がある場合。これにより、デザインの維持管理が難しくなる可能性がある

インスタンスの入れ子

インスタンスの入れ子は、複雑なデザインを構成するための強力な手法であり、バリアントと併用することで、より複雑なコンポーネントセットを効率的に管理できます。例えば、ボタンを考えてみましょう。ボタンには、タイプ（プライマリ、セカンダリ）、状態（アクティブ、ホバー）、アイコンの有無などの複数のプロパティがあります。すべての可能なアイコンに対してバリアントを定義すると、管理が難しくなります。そこで、アイコンのインスタンスを使用し、ネストされたインスタンスを交換する方法が効果的です。これにより、バリアントの数を抑えつつ、デザインの柔軟性を保つことができます。

ライブラリの整理

Figmaでは、レイヤー、フレーム、ページの命名規則を通じて、アセットパネル内のコンポーネントを整理するためのいくつかのアプローチを提供しています。バリアントを使用してデザインシステムを合理化することで、これらの規則の一部が簡素化され、他の規則が不要になることがあります。具体的には、以下のような方法でライブラリを整理することができます。

レイヤー

バリアントを結合する際に、レイヤー名に含まれるスラッシュ（/）で区切られたグループが、バリアントプロパティの値に変換されます。他の階層レベルを後から追加したり復元したりすることも可能で、デザインの整理が柔軟に行えます。

フレーム

フレームを使用して関連するコンポーネントをグループ化することができます。しかし、バリアントを結合する際にはフレームが不要になる場合があるため、フレームを削除するか、ページ上に複数のコンポーネントセットがある場合には大きなグループ化として使用することができます。

ページ

複数のページにメインコンポーネントが存在する場合、ページ名もアセットパネルに表示されます。ページ上のすべてのコンポーネントが1つのコンポーネントセットに結合される可能性があります（例：Buttons/Button）。これは繰り返しのように感じるかもしれませんが、「Buttons」ページを保持することで、将来的に追加されるボタンコンポーネントを管理する際に便利です。また、ページをより論理的なコンポーネントセットのグループにまとめることも検討できます。たとえば、単一のInputコンポーネントセットがあるページと、単一のDropdownコンポーネントセットがある別のページがある場合、それらを「Forms」ページにまとめることで、デザインの整理と管理がしやすくなります。

バリアントの説明の追加

各バリアントコンポーネントには、それぞれ独自の説明を付けることができ、コンポーネントセット全体の説明も追加できます。これにより、コンポーネントセットおよび特定のバリエーションの説明がインスペクトパネルに表示されるようになります。既存のコンポーネントの説明は、バリアントとして結合された際に自動的にバリアントの説明に変わるため、これまでに追加した情報が失われることはありません。説明を付けることで、コンポーネントの理解が深まり、チーム内での情報共有がスムーズになります。