バリアブルの作成と管理
🚧 バリアブルは現在、オープンベータ版です。この期間中、さらに機能を追加し、エクスペリエンスに磨きをかけていきます。次に何が登場するかはこちら →
バリアブルは初めてですか? バリアブルのガイドを確認する→
バリアブルモーダルへのアクセス
バリアブル、モード、グループ、コレクションの作成と管理を行うには バリアブルモーダルを使用します。
- Escを押すか、またはキャンバスをクリックして、キャンバス上のすべての選択を解除します。
- 右サイドバーから、[ローカルバリアブル]セクションを 探します。
- バリアブルを開くをクリックします。
バリアブルを作成する
- 任意のコレクションから、[+ バリアブルを作成]をクリックします。
- ドロップダウンから、バリアブルタイプを選択します。
- バリアブルには1列目に名前、2列目に値を指定します。
バリアブルを複製するには、1つ以上のバリアブルを選択し、⇧ Shift Enterを押します。
バリアブルを削除するには、バリアブルを右クリックして[バリアブルを削除]を選択します。
ヒント: バリアブルは複数の値を格納できるため、よりダイナミックなデザインが可能となります。バリアブルに複数のモードを作成する方法についてはこちら→
エイリアスを作成する
バリアブルのエイリアスを作成し、その値を既存のバリアブルにリンクさせます。これにより、デザイントークンを実装し、デザインの更新管理を効率化することができます。
たとえば、同じカラーバリアブルを参照する複数のカラーバリアブルがあるとします。そのカラーを更新する必要がある場合、そのカラーのすべてのインスタンスを手動で更新しなくても、ソースを更新するだけで済みます。
バリアブルは、同じ種類の他のバリアブルを参照できます。
バリアブルのエイリアスを作成するには:
- バリアブルモーダルから、バリアブルの値を右クリックして[エイリアスを作成]をクリックします。
- [ライブラリ]タブで、エイリアスを設定するバリアブルを選択します。検索バーを使用して名前でバリアブルを検索したり、有効なライブラリを参照できます。
エイリアスを切り離すには、値フィールドにカーソルを合わせ、 [エイリアスを切り離す]をクリックします。
バリアブルを編集する
バリアブルの行にカーソルを合わせ、 バリアブルを編集アイコンをクリックすると、バリアブルの編集モーダルが開きます。
そこでは以下のことができます。
- バリアブルの名前の変更
- バリアブルの使い方に関する説明の追記
- バリアブルの値の変更
- チェックボックスを使用して、そのバリアブルが適用できるプロパティ↓がどれかを選択します。
- コード構文↓を追加
- バリアブルの公開を非表示にする→
特定のプロパティでバリアブルを表示する
デフォルトでは、バリアブルはサポートされているすべてのデザインプロパティに適用できます。
適用できるプロパティを限定することで、バリアブルの数を制限できます。
バリアブルを編集モーダルから、バリアブルを使用可能にしたいデザインプロパティのオン/オフを切り替えます。
カラーバリアブルのフルサポートは間もなく実施予定です。現在、カラーバリアブルの範囲を狭める選択ができます。ただし、こうした制限には効力はありません。つまり、制限を選択した場合でも、サポートされているすべてのプロパティからカラーバリアブルを使用できます。
コード構文(近日公開)
コード構文により、コード内のバリアブルを有効なバリアブル名で表すことができます。CSS、JS、Kotlin、Swiftなど、プラットフォームごとに異なる名前を作成できるようになります。
バリアブルのコード構文は、バリアブルを使用している要素を検査しているときに開発モードのコードスニペットに表示されます。
注: コード構文はまだご利用いただけませんが、近日中に提供予定です。
選択したバリアブルをグループ化する
バリアブルを1つのグループにするには:
-
バリアブルモーダルから複数のバリアブルを選択します。
- ⌘ Command / Controlキーを押しながら、 複数のバリアブルを選択します。
- ⇧ Shiftキーを押しながら、 バリアブルの範囲を選択します。
- 選択箇所を右クリックし、[選択した内容でグループを新規作成]を選択します。
バリアブルモーダルのサイドバーにあるグループをクリックし、ドラッグして、グループを並べ替えます。クループをクリックし、他のグループにドラッグして、グループをネストさせることもできます。
グループ名を変更する
- バリアブルモーダルから、 [スライドバーを切り替える]をクリックして、表示されるようにします。
- グループ名をダブルクリックします。
- バリアブルグループの新しい名前を入力します。
グループを管理
- バリアブルモーダルから、 [スライドバーを切り替える]をクリックして、表示されるようにします。
- スライドバーのグループ名を右クリックします。
- メニューで、下記から選択します。
- グループ解除
- グループを複製
- グループを削除
バリアブルコレクションの作成と管理
バリアブルコレクションを作成するには:
- バリアブルモーダルから、 [スライドバーを切り替える]をクリックして、表示されるようにします。
- コレクションのドロップダウンを開き、[コレクションを作成]を選択します。
バリアブルのコレクション名を変更または削除するには:
- バリアブルモーダルから、 [スライドバーを切り替える]をクリックして、表示されるようにします。
- コレクションのドロップダウンを開き、管理するコレクションを選択します。
- コレクションのドロップダウンを再び開き、[コレクション名を変更]または[コレクションを削除]を選択します。
バリアブルのジャーニーを続ける準備はいいですか? 次のトピックを確認してください。