はじめに

この機能を使用できるユーザー

バリアントはすべてのチームとプランでサポートされています。コンポーネントセットのライブラリへの公開は、プロフェッショナルチーム、エデュケーションチーム、Figmaビジネスのみでサポートされています。

ファイルへの編集可アクセス権があれば、誰でもそのファイルにバリアントとコンポーネントセットを作成できます。

ファイルへの閲覧のみアクセス権があれば、誰でもライブラリのコンポーネントやコンポーネントセットを使用できます。

コンポーネントの作成とデザインシステムの構築を進めていくと、各コンポーネントで互いに類似していながら、わずかに異なるニーズが見つかります。

たとえば、ボタン用の複数のコンポーネントにはさまざまな状態やサイズ向けに別々のコンポーネントが存在し、ライトモードとダークモードでも異なります。

バリアントなら、類似するコンポーネントを単一のコンテナにグループ化して整理することができます。これにより、コンポーネントライブラリが簡素化され、誰でも簡単に必要なものを探せるようになります。

バリアントのプロパティと値をカスタマイズして、デザインシステムから当て推量を取り除き、コンポーネントをフロントエンドのコードへと近づけましよう。

バリアントのプロパティと値

バリアントプロパティとその値により、バリアントの属性を定義することができます。バリアントプロパティは、バリアントとコンポーネントセットに固有のコンポーネントプロパティの一種です。

プロパティと値は必要に応じて追加し、デザインシステムに合うようカスタマイズできます。さらに、プロパティと値をデザインシステム内のコードコンポーネントにマッピングすることも可能です。

• バリアントプロパティは コンポーネントの変数にあたります。たとえばボタンコンポーネントのプロパティとしては、サイズ、状態、 色があります。
• 値は、それぞれのプロパティで利用できる各種のオプションです。たとえば状態プロパティには、デフォルト、ホバー、押下済み、無効化といった値があります。

コンポーネントセット内のすべてのバリアントで同じプロパティと値を使用する必要がありますが、各バリアントのプロパティと値の組み合わせは一意でなくてはなりません。プロパティと値とのあらゆる組み合わせのコンポーネントを用意する必要はありません。

コンポーネントの名前を変更する

Figmaでは、[アセット]パネルとインスタンスメニューでのコンポーネントの整理に、スラッシュ区切りの命名システムを使用します。コンポーネントの名前のそれぞれの/により、階層に別のレベルが追加されます。

これにより、ライブラリでの移動や関連するコンポーネントの検索と入れ替えを簡単に行えます。コンポーネントの命名と整理の方法はこちら→

また、この命名システムを使用して既存コンポーネントをバリアントに変換することもできます。正確に変換するには、コンポーネントの名前が次の構造に沿ったものとなっている必要があります。

componentName/property1value/property2value/property3value

• 最初の/の前のテキストがコンポーネントセットの名前になります。
• Figmaは、コンポーネントの名前の他のすべての/について新しいプロパティを作成したうえで、値として属性を追加します。
• 命名システムにサフィックスを使用している場合は、/で区切る形でサフィックスをコンポーネントの名前に追加する必要があります。

Button/Primary/Large/Default/Falseという名前のボタンコンポーネントは、次のようなプロパティと値を持つことになります。

コンポーネントセット名: Button
バリアント: Primary
プロパティ2: Large
プロパティ3: Default
プロパティ4: False

以下の画像で、残りのコンポーネント名(左側)がバリアントの値(右側)に変換される仕組みが分かります。

キャンバス上のコンポーネントを整理する

特定のコンポーネント用のバリアントが多数ある場合は、コンポーネントを行、列、またはグリッドで整理するといいでしょう。

これにより、コンポーネントの多元的な性質をデザインシステムの使用者全員に伝えやすくなります。また、コンポーネントセットにテキストレイヤーを付加することで、関連するプロパティと値でアノテーションを行うことができます。

下の例では、ボタンのバリアントをグリッドに並べています。また、プロパティの値に対応するテキストレイヤーをキャンバスに追加しました。

バリアントとして結合する

1. 結合するコンポーネントを選択します。レイヤーとオブジェクトの選択方法についてはこちら→
2. 右サイドバーで、[バリアントとして結合]ボタンをクリックします。
3. Figmaはすべてのコンポーネントを単一のコンポーネントセットに追加します。

内容を表す名前をプロパティに付ける

変換プロセスの一環で、Figmaは汎用的なプロパティを作成し、コンポーネントの名前に含めた任意の属性を値として追加します。

Figmaではプロパティの名前が分からないため、最初のプロパティの名前をバリアントとしたうえで、次はプロパティ2、さらにプロパティ3、と順に番号を振っていきます。

これらのプロパティを内容を分かりやすく表した名前に変える必要があります。

1. コンポーネントセットを選択します。
2. 現在のプロパティの内容を右サイドバーの[バリアント]セクションで確認します。
3. プロパティの上にカーソルを合わせると、その周囲にグレーのボックスが表示されます。
4. クリックしてプロパティを編集し、内容を分かりやすく表した名前に変更します。
5. プロパティの外側をクリックして適用します。
6. 残りのプロパティについても同じ作業を繰り返します。

新しいバリアントを作成する

新しいバリアントの作成方法はいくつかあります。メインコンポーネントを選択し、次のいずれかを実行します。

• ツールバーでをクリックするか、
• メインコンポーネントを右クリック > [メインコンポーネント] > [バリアントを追加]の順に選択するか、
• 右サイドバーの[プロパティ]セクションで > [バリアント]の順にクリックします。これにより、新しいバリアントプロパティが作成され、メインコンポーネントがコンポーネントセットに変換されます。そこから、
  コンポーネントセットの下のをクリックし、バリアントを追加します。

Figmaで次の内容が実行されます。

• 同じプロパティを持つ同一のコンポーネントを作成
• 両方のコンポーネントをバリアントとしてコンポーネントセットに追加
• スラッシュ区切りの命名規則を使用していた場合は、/の前のテキストがコンポーネントセットの名前になり、後ろの属性が値として使用されます。

新しいバリアントの作成は、複数コンポーネントの結合↑によっても可能です。

既存のコンポーネントセットがある場合は、いつでもバリアントをさらに追加↓を実行できます。

プロパティと値を追加する

最初にバリアントを作成する際に、またはデザインシステムの進展に合わせてプロパティと値を作成しバリアントに適用します。プロパティと値の作成および適用方法の詳細はこちら→

コンポーネントセットにバリアントをさらに追加する

次のいずれかの方法で、コンポーネントセットにバリアントを追加していきます。

• 任意のコンポーネントセットを選択し、ツールバーでをクリックします。
• 任意のコンポーネントセットを選択し、コンポーネントセットのすぐ下の部分をクリックします。このオプションは、2つ以上のバリアントが含まれる場合にのみ表示されます。
• 次のキーボードショートカットを使用し、既存のバリアントを複製します。
  • Mac: ⌘ CommandD
  • Windows: CtrlD
• 他のコンポーネントをコンポーネントセットにドラッグし、バリアントとして追加します。

バリアントを管理する

バリアントを整理する

新しいバリアントをコンポーネントに追加すると、Figmaはデフォルトの動作として、バリアントを単一の列に等間隔で追加します。

変換前にコンポーネントが別のレイアウトになっていた場合、Figmaはコンポーネントセットでも同じレイアウトを維持します。

Figmaのデフォルトの動作を上書きし、バリアントを好みの方法で調整することができます。

• 任意のバリアントを選択し、コンポーネントセット内の新しい座標に移動します。Figmaでは、バリアントはコンポーネントセット内のどこにでも配置でき、他のバリアントの上に重ねることも可能です。
• 右サイドバーでコンポーネントセットの寸法を調整するか、通常のフレームのようにキャンバス内でサイズ変更します。
• すべてのバリアントが選択された状態で、右サイドバーのフィールドを使用しでバリアント間の上下の間隔を、で左右の間隔を調整します。

プロパティと値を管理する

プロパティと値は、作成後いつでも名前の変更と並べ替えが可能です。プロパティの削除は不要になりました。プロパティと値の名前の変更方法はこちら→

• プロパティを並べ替える場合、Figmaではバリアントの名前と構文を調整して一致させます。
• 既存のコンポーネントをバリアントに変換した場合は、内容を分かりやすく表したものへとプロパティの名前を変更する必要があります。

コンポーネントセットをライブラリに公開する

プロフェッショナルチーム、エデュケーションチーム、Figmaビジネスのメンバーであれば、バリアントをコラボレーターと共有できます。

コンポーネントセットをスタイルや通常のコンポーネントと合わせて公開し、チームや組織のメンバーも使用できるようにします。

コンポーネントセットは、アセットパネルに他のコンポーネントとともに表示されます。Figmaは、コンポーネントセットの左上隅のバリアントをデフォルトのバリアントとして使用します。

その後、コラボレーターがコンポーネントセットをファイルにドラッグしてインスタンスを作成できるようになります。さらに、右サイドバーでプロパティの値を構成することで、コンポーネントセット内の他のすべてのバリアントにもアクセスできます。

ライブラリを公開する方法はこちら→

バリアントを使用する

コンポーネントセットは、通常のコンポーネントと合わせてアセットパネルに表示されます。そのため、アセットパネルで特定のバリアントを探さなくても、コンポーネントセットを選択するだけで済みます。

そのコンポーネントセットのインスタンスをキャンバス上に設定すると、インスタンスのプロパティを構成してバリアントを選択できます。

コンポーネントセットを選択する

1. 左サイドバーの[アセット]タブをクリックするか、次のキーボードショートカットを使用します。
   • Mac: ⌥ Option 2
   • Windows: Alt + 2
2. コンポーネントセットの上でクリックし、キャンバスまでドラッグします。Figmaでは、そのコンポーネントセットのデフォルトのバリアントのインスタンスを作成します。
3. 右サイドバーのコンポーネントセットの名前とプロパティを確認します。
4. プロパティの横のを使用し、希望する値の組み合わせを選択します。
5. とのトグルスイッチを使用し、特定のプロパティをオフまたはオンにします。

バリアントを構成する

右サイドバーでプロパティと値を構成し、コンポーネントセット内の他のバリアントを選択します。

1. インスタンスを選択します。
2. 右サイドバーのコンポーネントの名前を確認します。そのコンポーネントにバリアントが含まれる場合は、コンポーネントの名前の下にそのコンポーネントセットのプロパティと値を構成するためのフィールドが表示されています。
   • プロパティの横のを使用し、希望する値の組み合わせを選択します。
   • とのトグルスイッチを使用し、特定のプロパティをオフまたはオンにします。

オーバーライドの保存

Figmaは、別のバリアントを選択したり、インスタンスメニューでインスタンスの入れ替えを行うと、オーバーライドを保存しようとします。

Figmaでは、オーバーライドを保存するかどうかを決定するために次の基準を使用します。

• レイヤーの名前が現在のインスタンスと選択中のバリアントやインスタンスとで一致している必要があります。これは、インスタンスの入れ替え時とバリアントの選択時で適用されます。
• バリアントの選択時には、元々上書きしていたレイヤープロパティがバリアント間で一致するかどうかのチェックも行われます。一致する場合、Figmaはオーバーライドを保存します。

以下の例では、Figmaはステップ3の塗りのオーバーライドは保存しますが、ステップ4は保存しません。これは、デフォルトプライマリーボタンとホバープライマリーボタンの両方が、同じ#1BC47Dの塗りで開始となったためです。このオーバーライドは、Hexコードを#1BC47Dから#F531B3に変更するというものでした。

Figmaは、ステップ4のオーバーライドを保存しません。ホバーセカンダリーのバリアントには#ffffffの塗りが含まれており、元のオーバーライドを適用した塗り(#1BC47D)とは異なるためです。