バリアブルモード

はじめに

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

エデュケーション、プロフェッショナル、ビジネス、エンタープライズプランのすべてのメンバーは、バリアブルモードを作成して使用できます。

バリアブルコレクションごとに作成できるモードの数は、プランによって異なります

バリアブルに関するその他のリソースをお探しですか？バリアブルのガイドを確認する→

バリアブルを使用すると、色や間隔、サイズなど、さまざまなデザインプロパティに適用できる再利用可能な値を保存することができます。

バリアブルモードを使用することで、必要なコンテキストごとに複数のフレームを作成することなく、デザインの異なるコンテキストを表せます。これは、各モードでバリアブルごとに1つの値を格納するバリアブルモードによって整理されることで、バリアブルに複数の値を含むことができるためです。

たとえば、ライトモードとダークモードの2つのデザインバージョンを作成する必要があるとします。

バリアブルモードがない場合、ライトモード(デフォルト)用のデザインを作成し、それらのデザインを複製して、塗り色すべてをダークモードで必要な色に更新する必要がありました。

バリアブルモードを使用する場合は、2つの値またはモードのセット（デフォルトのライトモード用とダークモード用）を含むバリアブルのコレクションを作成します。この状態でバリアブルを1つのデザインセットに適用すると、ライトモードとダークモードのデザインを迅速に切り替えることができます。

3つ目のカラーテーマが必要な場合は、新しいモードを作成し、テーマの値を入力します。デザインに値を再度適用する必要はありません。

バリアブルモードで対応しているコンテキストは数多く存在します。以下のアイデアを参考に使用してみましょう。

• 色バリアブルを使用して、ハイコントラストモードや色覚異常い配慮したさまざまなテーマなど、アクセシブルなカラーテーマを作成しましょう。
• UIコピーをローカライズし、文字列バリアブルを使用してデザイン内でコピーがどのように表示されるかを確認しましょう。
• 数値バリアブルを使用して、腕時計、モバイル、デスクトップなど、複数のデバイスサイズを考慮し、異なる間隔やパディングサイズに要素がどのように対応するかを確認しましょう。

モードを作成する

1. キャンバス上の任意の場所をクリックして、すべてのオブジェクトの選択を解除します。
2. 右サイドバーの[ローカルバリアブル]セクションにある[バリアブルを開く]をクリックして、バリアブルモーダルを開きます。
3. 新しいモードを作成するコレクションを開きます。
4. 既存のバリアブルから、列ヘッダーの右側にある[新しいバリアブルモード]をクリックします。Figmaが最初の列から新しい列に値を複製します。

モードヘッダーを右クリックして[モードを複製]を選択しても、モードを複製することができます。

デフォルトモードを変更する

バリアブルモーダルでは、バリアブルコレクションのデフォルトモードが左端のモード列に表示されます。

オブジェクトがバリアブルオブジェクトを使用している場合、またはページにバリアブルを使用するオブジェクトが含まれている場合、オブジェクトまたはページに特定のモードを明示的に設定するまで、デフォルトモードの値が使用されます。

バリアブルコレクションのデフォルトモードを変更するには、モードを並べ替えます。

デフォルトモードを別のモードに変更するには:

1. バリアブルモーダルから、バリアブルモードが存在するバリアブルコレクションを開きます。
2. モードを探し、次のいずれかを実行します。
   • 右クリックして[デフォルト]を選択する
   • バリアブルモードをクリックして左端の列にドラッグする

オブジェクトやページのバリアブルモードが[自動]または[デフォルト]に設定されている場合、指定されたモードではなく、新しいデフォルトモードを継承します。

オブジェクトまたはページが、たまたまデフォルトのモードに明示的に設定されていた場合、モードがデフォルトでなくなった後も、そのモードにリンクされたままになります。

モードを並べ替える

バリアブルコレクション内のモードを並べ替えるには、次のいずれかを行います。

• 右クリックして[列を右に移動]または[列を左に移動]を選択する
• 列をクリックして左または右にドラッグする

バリアブルコレクション内の列を一番左に移動すると、その列がデフォルトモードになります。

モードの切り替え

オブジェクトやページのモードを切り替えて、デザインに必要なバリアブル値を使用します。モードを切り替えることができます。

• レイヤー
• フレーム
• コンポーネントとコンポーネントセット
• セクション
• グループ
• ページ

オブジェクトのモードを切り替える

レイヤーの場合: 適用されているバリアブルが1つ以上あり、バリアブルに複数のモードがある場合は、モードを切り替えることができます。

グループ、フレーム、コンポーネント、コンポーネントセット、およびセクションの場合: ネストされたレイヤーに、適用されているバリアブルが1つ以上あり、バリアブルに複数のモードがある場合は、モードを切り替えることができます。

オブジェクトのモードを切り替えるには:

1. レイヤー、グループ、またはコンテナオブジェクトを選択します。
2. 右サイドバーの[外観]セクションから、[バリアブルモードを適用]をクリックします。
3. 1つのバリアブルコレクションにカーソルを合わせ、モードを選択します。

オブジェクトのモードを指定すると、左サイドバーのレイヤーパネルにあるレイヤー名の横にモードアイコンとモード名が書かれたタグが表示されます。複数のモードがある場合は、タグにカーソルを合わせるとモードのリストが表示されます。

 

ページのモードを切り替える

バリアブルのローカルコレクションに複数のモードがある場合は、ページのモードを切り替えることができます。

1. キャンバス上のすべての選択を解除します。
2. 右サイドバーの[ページ]セクションで、[バリアブルモードを適用]をクリックします。
3. 1つのバリアブルコレクションにカーソルを合わせ、モードを選択します。

オートモードに設定(オブジェクトのみ)

バリアブルがあるオブジェクトは、デフォルトで[自動]に設定されます。これは、親コンテナのモードが適用されることを意味します。

• 親コンテナも[自動]に設定されている場合、オブジェクトは指定されたモードがあるコンテナに達するまでレイヤー階層を上り続けます。
• モードが指定されている親コンテナがない場合、オブジェクトはコレクションのデフォルトモード(括弧内に示されます)にフォールバックします。

バリアントインスタンスで使用する

ブーリアン、数値、文字列の各バリアブルは、バリアント型プロパティを持つコンポーネントインスタンスに割り当てることができます。

文字列および数値バリアブル

文字列および数字バリアブルは、バリアントインスタンスにマップできます。このようにすると、モードが変更されたとき、異なるバリアントに切り替わります。これを行うには、バリアブルの値がバリアント型プロパティの値と一致する必要があります。

1. 複数の値(またはモード)を持つ文字列バリアブルまたは数値バリアブルを作成します。
2. バリアント型プロパティの値と一致するようにバリアブルの値を設定します。
3. バリアントのコンポーネントインスタンスを取得し、右サイドバーのバリアント型プロパティにカーソルを合わせます。
4. [バリアブルを割り当て]をクリックし、バリアブルを選択します。

これで、モードが切り替わると、インスタンスが異なるバリアントに切り替わるようになります。

ブーリアンバリアブル

ブーリアンバリアブルは、trueおよびfalseの値を持つバリアント型プロパティにマップできます。

1. 複数の値(またはモード)を持つブーリアンバリアブルを作成します。
2. 同じコンポーネントセット内で、2つのバリアントインスタンスを作成します。
3. 一方のバリアントの値をTrueに、もう一方をFalseに設定します。
4. どちらかのバリアントのコンポーネントインスタンスを取得し、右サイドバーのバリアント型プロパティにカーソルを合わせます。
5. [バリアブルの割り当て]をクリックして、ブーリアンバリアブルを選択します。

プロトタイプでのバリアントおよびバリアブル使用方法はこちら →

ネストされたインスタンス

ネストしたインスタンスのバリアントプロパティに、バリアブルをバインドすることもできます。

1. ネストした他のコンポーネントのインスタンスで、コンポーネントを作成します。
2. 複数の値(またはモード)を持つ文字列、バリアブル、またはブーリアンのバリアブルを作成します。
3. ネストしたインスタンスコンポーネントのプロパティの値に合わせてバリアブルの値を設定します。
4. コンポーネントのインスタンスを作成します。
5. ネストしたインスタンスのバリアントプロパティにバリアブルを割り当てます。

これで、モードが切り替わると、ネストしたインスタンスが別のバリアントに切り替わるようになります。

モードの競合

競合するモードは、モードスイッチャー内で横に情報アイコンが表示されます。競合は、ファイル内のオブジェクトが同じバリアブルの異なるバージョンを使用する場合に発生します。

競合するモードを選択した場合、そのモードはレンダリング可能なレイヤーにのみ適用されます。レイヤーは、そのモードを含むバージョンのバリアブルを使用している必要があります。

競合するモードを解決するには、次のようにします。

1. メインバリアブルがあるファイルを開き、チームライブラリに公開します。
2. 競合が発生しているファイルのライブラリモーダルからの更新を確認して受け入れます。

ファイルの編集、公開、レビューに加え、ファイルへのライブラリの更新を確認して承認することができるのは、ファイルに対する[編集可]アクセス権を持つユーザーのみであることに注意してください。

モードの競合の防止

モードの競合は、バリアブルでモードが削除または追加されたものの、更新内容がファイルまたはオブジェクトに届いていない場合に発生する可能性があります。

ここでは、このような競合が発生する原因と、その対処方法をいくつか紹介します。