バリアブルモード
🚧 バリアブルは現在オープンベータ版です。この期間中に、さらに機能を追加して使いやすくしていきます。予定されている新機能はこちら→
はじめに
この機能を使用できるユーザー
エデュケーション、プロフェッショナル、ビジネス、エンタープライズプランのすべてのメンバーは、バリアブルモードを作成および使用できます。
バリアブルコレクションごとに作成できるモードの数は、プランによって異なります
バリアブルは初めてですか? バリアブルのガイドを確認する→
バリアブルモードは、デザインのさまざまなコンテキストを表します。モードにはコレクション内のバリアブルの値のリストが含まれており、バリアブルごとに1つの値が格納されています。
バリアブルコレクションに複数のモードがある場合は、レイヤーおよび要素のモードを切り替えて、さまざまなコンテキストのデザインをすばやく変更できます。
次に、モードを使用してコンテキストを切り替える方法をいくつか示します。
- ライトモードやダークモードなど、さまざまなカラーテーマ
- デザインでコピーがどのように流れるかを確認するためのさまざまな言語
- さまざまな間隔およびパディングで要素がどのように見えるのかを確認するためのデバイスサイズ
モードを作成する
- 右サイドバーの[ローカルバリアブル]セクションの [バリアブルを開く]をクリックして、[バリアブル]モーダルを開きます。
- 新しいモードを作成するコレクションを開きます。
- 列ヘッダーの右にある [新しいバリアブルモード]アイコンをクリックします。最初のモード列から新しいモード列に値が複製されます。
モードヘッダーを右クリックして[モードを複製]を選択しても、モードを複製することができます。
ヒント: コレクションのデフォルトモードは、左側の最初の列です。バリアブルが適用されているレイヤーは、モードを切り替え ↓ない限り、このモードにデフォルトで設定されます。
モードを切り替える
オブジェクトまたはページのモードを、デザインで表示するバリアブル値のセットに切り替えます。次のモードを切り替えることができます。
- レイヤー
- フレーム
- コンポーネントとコンポーネントセット
- セクション
- グループ
- ページ
オブジェクトのモードを切り替える
レイヤーの場合: 適用されているバリアブルが1つ以上あり、バリアブルに複数のモードがある場合は、モードを切り替えることができます。
グループ、フレーム、コンポーネント、コンポーネントセット、およびセクションの場合: ネストされたレイヤーに、適用されているバリアブルが1つ以上あり、バリアブルに複数のモードがある場合は、モードを切り替えることができます。
オブジェクトのモードを切り替えるには:
- レイヤー、グループ、またはコンテナオブジェクトを選択します。
- 右サイドバーの[レイヤー]セクションで、 [バリアブルモードを変更]をクリックします。
- 1つのバリアブルコレクションにカーソルを合わせ、モードを選択します。
オブジェクトのモードを指定すると、左サイドバーのレイヤーパネルにあるレイヤー名の横にモードアイコンとモード名が書かれたタグが表示されます。複数のモードがある場合は、タグにカーソルを合わせるとモードのリストが表示されます。
ページのモードを切り替える
バリアブルのローカルコレクションに複数のモードがある場合は、ページのモードを切り替えることができます。
- キャンバス上のすべての選択を解除します。
- 右サイドバーの[ページ]セクションで、 [バリアブルモードを変更]をクリックします。
- 1つのバリアブルコレクションにカーソルを合わせ、モードを選択します。
注: バリアブル変更メニューでグレーアウトされているモードに切り替えることはできません。選択されたバリアブルまたは(何も選択されていない場合は)ページ内のバリアブルが無効なモードにマップされ、しかも競合がある場合モードは無効になります。これは無効なモードが異なるファイルにあり公開済みの更新があるにもかかわらず、現在のファイルが更新をまだ受け入れていない場合に発生することがあります。
デフォルトモード
バリアブルコレクションのデフォルトモードは、そのコレクションの最初のモード列です。
バリアブルがあるページは、デフォルトでこのモードに設定されます。これは、コレクションのデフォルトモード(括弧内に示されます)が適用されることを意味します。
自動モード
バリアブルがあるオブジェクトは、デフォルトで[自動]に設定されます。これは、親コンテナのモードが適用されることを意味します。
- 親コンテナも[自動]に設定されている場合、オブジェクトは指定されたモードがあるコンテナに達するまでレイヤー階層を上り続けます。
- モードが指定されている親コンテナがない場合、オブジェクトはコレクションのデフォルトモード(括弧内に示されます)にフォールバックします。
バリアントインスタンスで使用する
ブーリアン、数値、文字列の各バリアブルは、バリアント型プロパティを持つコンポーネントインスタンスに割り当てることができます。
文字列および数値バリアブル
文字列および数字バリアブルは、バリアントインスタンスにマップできます。このようにすると、モードが変更されたとき、異なるバリアントに切り替わります。これを行うには、バリアブルの値がバリアント型プロパティの値と一致する必要があります。
- 複数の値(またはモード)を持つ文字列バリアブルまたは数値バリアブルを作成します。
- バリアント型プロパティの値と一致するようにバリアブルの値を設定します。
- バリアントのコンポーネントインスタンスを取得し、右サイドバーのバリアント型プロパティにカーソルを合わせます。
- [バリアブルを割り当て]をクリックし、バリアブルを選択します。
これで、モードが切り替わると、インスタンスが異なるバリアントに切り替わるようになります。
ブーリアンバリアブル
ブーリアンバリアブルは、trueおよびfalseの値を持つバリアント型プロパティにマップできます。
注: 現在、ブーリアンバリアブルをブーリアン型プロパティに適用することはできません。2つの値(trueおよびfalse)を持つコンポーネントにバリアント型プロパティを追加する必要があります。その後、ブーリアンバリアブルをインスタンスのバリアント型プロパティに適用します。
- 複数の値(またはモード)を持つブーリアンバリアブルを作成します。
- 同じコンポーネントセット内で、2つのバリアントインスタンスを作成します。
- 一方のバリアントの値を
Trueに、もう一方をFalseに設定します。 - どちらかのバリアントのコンポーネントインスタンスを取得し、右サイドバーのバリアント型プロパティにカーソルを合わせます。
- [バリアブルを割り当て]をクリックし、ブーリアンバリアブルを選択します。