バリアブルモード

はじめに

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

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

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

バリアブルは初めてですか? バリアブルのガイドはこちら→

バリアブルモードは、デザインのさまざまなコンテキストを表します。モードにはコレクション内のバリアブルの値のリストが含まれており、バリアブルごとに1つの値が格納されています。

バリアブルコレクションに複数のモードがある場合は、レイヤーおよび要素のモードを切り替えて、さまざまなコンテキストのデザインをすばやく変更できます。

次に、モードを使用してコンテキストを切り替える方法をいくつか示します。

• ライトモードやダークモードなど、さまざまなカラーテーマ
• デザインでコピーがどのように流れるかを確認するためのさまざまな言語
• さまざまな間隔およびパディングで要素がどのように見えるのかを確認するためのデバイスサイズ

モードを作成する

1. 右サイドバーの[ローカルバリアブル]セクションの[バリアブルを開く]をクリックして、[バリアブル]モーダルを開きます。
2. 新しいモードを作成するコレクションを開きます。
3. 列ヘッダーの右にある[新しいバリアブルモード]アイコンをクリックします。最初のモード列から新しいモード列に値が複製されます。

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

デフォルトモード

バリアブルコレクションのデフォルトモードは、そのコレクションの左端のモード列です。バリアブルを持つオブジェクトやページは、モードを切り替えるまでデフォルトでこのモードに設定されています↓。

ページのモードスイッチャーでは、コレクションのデフォルトモードが括弧で表示されます。

モードの切り替え

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

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

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

レイヤーの場合: 適用されているバリアブルが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. 競合が発生しているファイルのライブラリモーダルからの更新を確認して受け入れます。

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

モードの競合の防止

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

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