バリアブルの作成と管理

はじめに

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

すべてのプランの、すべてのユーザー

ファイルへの編集可アクセス権があれば、誰でもバリアブルを作成および編集できます

バリアブルは初めてですか? バリアブルのガイドを確認する→

バリアブルモーダルへのアクセス

バリアブル、モード、グループ、コレクションの作成と管理を行うには バリアブルモーダルを使用します。

1. Escを押すか、またはキャンバスをクリックして、キャンバス上のすべての選択を解除します。
2. 右サイドバーから、[ローカルバリアブル]セクションを 探します。
3. バリアブルを開くをクリックします。

バリアブルを作成する

1. 任意のコレクションから、[+ バリアブルを作成]をクリックします。
2. ドロップダウンから、バリアブルタイプを選択します。
3. バリアブルには1列目に名前、2列目に値を指定します。

バリアブルを複製するには、1つ以上のバリアブルを選択し、⇧ Shift Enterを押します。

バリアブルを削除するには、バリアブルを右クリックして[バリアブルを削除]を選択します。

エイリアスを作成する

バリアブルのエイリアスを作成し、その値を既存のバリアブルにリンクさせます。これにより、デザイントークンを実装し、デザインの更新管理を効率化することができます。

たとえば、同じカラーバリアブルを参照する複数のカラーバリアブルがあるとします。そのカラーを更新する必要がある場合、そのカラーのすべてのインスタンスを手動で更新しなくても、ソースを更新するだけで済みます。

バリアブルは、同じ種類の他のバリアブルを参照できます。

バリアブルのエイリアスを作成するには:

1. バリアブルモーダルから、バリアブルの値を右クリックして[エイリアスを作成]をクリックします。
2. [ライブラリ]タブで、エイリアスを設定するバリアブルを選択します。検索バーを使用して名前でバリアブルを検索したり、有効なライブラリを参照できます。

エイリアスを切り離すには、値フィールドにカーソルを合わせ、 [エイリアスを切り離す]をクリックします。

バリアブルを編集する

バリアブルの行にカーソルを合わせ、 バリアブルを編集アイコンをクリックすると、バリアブルの編集モーダルが開きます。

そこでは以下のことができます。

1. バリアブルの名前の変更
2. バリアブルの使い方に関する説明の追記
3. バリアブルの値の変更
4. チェックボックスを使用して、そのバリアブルが適用できるプロパティ↓がどれかを選択します。
5. コード構文↓を追加
6. バリアブルの公開を非表示にする→

特定のプロパティでバリアブルを表示する

デフォルトでは、バリアブルはサポートされているすべてのデザインプロパティに適用できます。

適用できるプロパティを限定することで、バリアブルの数を制限できます。

バリアブルを編集モーダルから、バリアブルを使用可能にしたいデザインプロパティのオン/オフを切り替えます。

コード構文(近日公開)

コード構文により、コード内のバリアブルを有効なバリアブル名で表すことができます。CSS、JS、Kotlin、Swiftなど、プラットフォームごとに異なる名前を作成できるようになります。

バリアブルのコード構文は、バリアブルを使用している要素を検査しているときに開発モードのコードスニペットに表示されます。

選択したバリアブルをグループ化する

バリアブルを1つのグループにするには:

1. バリアブルモーダルから複数のバリアブルを選択します。
   • ⌘ Command / Controlキーを押しながら、 複数のバリアブルを選択します。
   • ⇧ Shiftキーを押しながら、 バリアブルの範囲を選択します。
2. 選択箇所を右クリックし、[選択した内容でグループを新規作成]を選択します。

バリアブルモーダルのサイドバーにあるグループをクリックし、ドラッグして、グループを並べ替えます。クループをクリックし、他のグループにドラッグして、グループをネストさせることもできます。

グループ名を変更する

1. バリアブルモーダルから、 [スライドバーを切り替える]をクリックして、表示されるようにします。
2. グループ名をダブルクリックします。
3. バリアブルグループの新しい名前を入力します。

グループを管理

1. バリアブルモーダルから、 [スライドバーを切り替える]をクリックして、表示されるようにします。
2. スライドバーのグループ名を右クリックします。
3. メニューで、下記から選択します。
   • グループ解除
   • グループを複製
   • グループを削除

バリアブルコレクションの作成と管理

バリアブルコレクションを作成するには:

1. バリアブルモーダルから、 [スライドバーを切り替える]をクリックして、表示されるようにします。
2. コレクションのドロップダウンを開き、[コレクションを作成]を選択します。

バリアブルのコレクション名を変更または削除するには:

1. バリアブルモーダルから、 [スライドバーを切り替える]をクリックして、表示されるようにします。
2. コレクションのドロップダウンを開き、管理するコレクションを選択します。
3. コレクションのドロップダウンを再び開き、[コレクション名を変更]または[コレクションを削除]を選択します。