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

はじめに

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

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

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

バリアブルに関する追加のリソースをお探しですか？バリアブルのガイドをご覧ください。

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

バリアブルモーダルを使用して、以下を作成および管理します。

1. バリアブルコレクション
2. バリアブル
3. バリアブルモード
4. バリアブルグループ

バリアブルモーダルにアクセスするには

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

バリアブルモーダルで追加オプションを表示するには、[サイドバーを切り替える]をクリックします。

バリアブルを作成する

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

各コレクションには最大で5,000個のバリアブルを設定できます。

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

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

エイリアスを作成する

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

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

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

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

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

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

バリアブルのコピーと貼り付け

バリアブルは、別のファイル内のコレクションを含め、任意のコレクションにコピーして貼り付けることができます。

1. バリアブルモーダルで目的のコレクションを開き、1つ以上のバリアブルを選択してください。
2. 1つ以上のバリアブルを選択します。
   • 複数のバリアブルを選択するには、Macの場合は⌘ Command、Windowsの場合は⌃ Controlを押しながらクリックします。
   • ⇧ Shiftキーを押しながら、バリアブルの範囲を選択します。
3. 選択範囲を右クリックして、[コピー]を選択します。
4. 任意のコレクションで右クリックし、[貼り付け]を選択します。

バリアブルを編集する

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

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

1. バリアブルの名前を変更します。
2. バリアブルの使い方を説明する記述を追加します。
3. バリアブルの値を変更します。
4. コード構文を追加します。
5. バリアブルの公開を非表示にします。
6. バリアブルの範囲を設定して、バリアブルを適用できるプロパティを制限します。

バリアブルの範囲の設定

バリアブルを範囲設定して、バリアブルを適用できるプロパティを限定します。これにより、デザインでどのバリアブルを使用するか迷う手間が減ります。

たとえば、数値バリアブルのスコープを角の半径に設定すると、そのバリアブルは角の半径にのみ適用でき、他の対応プロパティには選択肢として表示されなくなります。

スコーピングは、数値、カラー、および文字列のバリアブルで利用可能です。

バリアブルのスコープを設定するには:

1. 1つまたは複数のバリアブルを右クリックし、[バリアブルを編集]を選択します。また、任意のバリアブルの右側にある[バリアブルを編集]をクリックすることもできます。
2. [スコープ]タブを開いてください。
3. チェックボックスを使用して、そのプロパティでバリアブルを使用可能にするかを切り替えます。[すべてに表示]にチェックを入れると、バリアブルがすべての対応プロパティで使用可能になります。

コード構文を追加

コード構文を使用することで、バリアブルを有効な変数名としてコード内に表現でき、スムーズな引き継ぎをサポートします。バリアブルを使用して要素を検査する際、そのバリアブルのコード構文はDev Modeのコードスニペットに表示されます。現在、変数のコードスニペットはCSS、SwiftUI、Composeでサポートされています。

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

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

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

バリアブルの一括編集

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

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

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

コレクションはバリアブルとモードのセットです。コレクションは、関連するバリアブルをひとまとめするために使用できます。たとえば、あるコレクションを異なる言語のテキストをローカライズするために使用し、別のコレクションを空間値に使用したりします。

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

バリアブルコレクションを作成するには、バリアブルモーダルのサイドバーに移動し、[その他のオプション] > [コレクションを作成]をクリックします。

ファイル内にバリアブルが作成されていない場合は、新しいバリアブルコレクションを作成するために、まずバリアブルを作成する必要があります。

バリアブルコレクション名の変更

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

1. バリアブルモーダルのサイドバーでコレクションのドロップダウンを開き、管理したいコレクションを選択します。
2. [その他のオプション]をクリックし、[コレクション名を変更]を選択します。

バリアブルコレクションの削除

バリアブルコレクションを削除すると、その中に含まれるすべてのバリアブルも削除されます。バリアブルを使用していたプロパティは、バリアブルおよび既存のモードとの接続が解除されます。バリアブルとコレクションを元に戻すには、操作直後に取り消すか、ファイルの以前のバージョンを復元する必要があります。

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

1. バリアブルモーダルのサイドバーでコレクションのドロップダウンを開き、管理したいコレクションを選択します。
2. [その他のオプション]をクリックし、[コレクションを削除]を選択します。

ファイル内のバリアブルコレクションの並べ替え

バリアブルコレクションの順序を並べ替えることで、デザインに適用する際にバリアブルを整理・検索しやすくなります。コレクションの順序を変更すると、バリアブルモードセレクターやバリアブルセレクターに表示される順序にも影響します。

ファイル内のバリアブルコレクションを並べ替えるには:

1. バリアブルモーダルのサイドバーで、[その他のオプション]をクリックし、[コレクションを並べ替え]を選択します。
2. [コレクション]ポップアップから、以下の操作ができます。
   • クリック＆ドラッグでコレクションの順序を並べ替える
   • または、[AからZで並べ替え]をクリックして、コレクションを英数字順に並べる

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

コレクション内のグループに追加することで、バリアブルをさらにまとめることができます。たとえば、あるグループをテキストに使用されるカラーに使用し、別のグループを線上で使用されるカラーに使用します。

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

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

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

グループ名を変更する

1. バリアブルモーダルのサイドバーで、グループ名をダブルクリックします。
2. バリアブルグループの新しい名前を入力します。

グループを管理

1. バリアブルモーダルのサイドバーで、グループ名を右クリックします。
2. メニューで、下記から選択します。
   • グループ解除
   • グループを複製
   • グループを削除