バリアブルの作成と管理

はじめに

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

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

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

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

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

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

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

バリアブルを作成する

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

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

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

エイリアスを作成する

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

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

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

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

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

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

バリアブルを編集する

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

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

1. バリアブルの名前の変更
2. バリアブルの使い方に関する説明の追記
3. バリアブルの値の変更
4. チェックボックスを使用してバリアブルの範囲を設定します ↓
5. コード構文↓を追加
6. バリアブルの公開を非表示にする→

バリアブルの範囲の設定

バリアブルの範囲を設定すると、バリアブルを適用できるプロパティを制限できます。これにより、バリアブルを使用できる場所をより適切に制御できるようになり、デザインを行うときに当て推量を排除します。

たとえば、数値バリアブルを角の半径にスコープした場合、そのバリアブルを適用できるのは角の半径だけです。このバリアブルは、他のサポートされているプロパティのオプションとしては表示されません。

数値バリアブルと色バリアブルには範囲設定が使用できます。

数値バリアブルの場合は、範囲設定ができます。

• 角の半径
• 幅と高さ
• 間隔
• テキストコンテンツ
• 線の太さ
• レイヤーの不透明度
• エフェクト

カラーバリアブルの場合は、範囲設定ができます。

• フレーム塗り
• シェイプ塗り
• テキスト塗り
• 線
• エフェクト

バリアブルの範囲を設定するには、バリアブルの[バリアブルの編集]モーダルを開き、範囲設定セクションを見つけます。

• デフォルトでは、すべてのサポートされているプロパティにバリアブルを使用できるように、すべてのボックスがオンになります。
• 制限したいプロパティのチェックボックスをオフにします
• [すべて表示]にチェックを入れると、サポートされているすべてのプロパティでバリアブルを使用できるようになり、チェックを外すとバリアブルがどこでも使用できなくなります。

コード構文の追加

コード構文を使用すると、有効なバリアブル名を使用してコード内のバリアブルを表現し、シームレスなハンドオフエクスペリエンスをサポートできます。バリアブルのコード構文は、バリアブルを使用して要素をインスペクトする際に、開発モードのコードスニペットに表示されます。現在、バリアブルのコードスニペットはCSS、SwiftUI、Composeでサポートされています。

Web、Android、iOSなどのプラットフォームごとに1つの名前を作成できます。これにより、バリアブルごとに最大3つのコード構文が可能になります。

コード構文をバリアブルに追加するには、次の手順を実行します。

1. [バリアブルの編集]モーダルの[コード構文]セクションで、[コード構文の追加]をクリックします。
2. ドロップダウンから、Web、Android、またはiOSを選択します。
3. 入力ボックスを使用してバリアブル名を入力します。プレビューで、コードスニペットではバリアブル名がどのように表示されるかを示します。

バリアブルの一括編集

複数のバリアブルを一度に編集するには、次の手順を実行します。

1. バリアブルモーダルから任意のコレクションを開きます。
2. キーボードショートカットを使用して複数のバリアブルを選択します。
   • ⌘ Command/Controlを押しながらクリックして個々のバリアブルを選択します。
   • Shiftを押しながらクリックしてバリアブルの範囲を選択します。
3. 選択したバリアブルを右クリックし、[バリアブルの編集]をクリックします。
4. [バリアブルの編集]モーダルから、次のことができます。
   • バリアブルタイプでサポートされている場合、バリアブルを範囲設定します。
   • バリアブルの公開を非表示にする

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

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

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

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

グループ名を変更する

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

グループを管理

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

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

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

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

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

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