Dev Modeのバリアブル
Dev Modeでデザインを確認している開発者は、色、数値、文字列、ブール値のバリアブルを目にすることになります。これらバリアブルの値は、バリアブルモードなどの要因に依存することがあり、デザインから取得したい正確な値を特定するのが難しくなることがあります。
Figmaは、開発者がバリアブルをより簡単に操作できるようにするために、Dev Modeでいくつかのオプションを提供しています。
バリアブルの詳細
Dev Modeでデザインをインスペクトしているときに、デザインで使用されているバリアブルの詳細を閲覧できます。バリアブルの詳細モーダルには、以下のようなバリアブルに関する情報が一覧表示されます。
- バリアブルの名前
- バリアブルをホストするファイルへのリンク
- バリアブルを含むバリアブルコレクションの名前
- バリアブルのモード
- バリアブルの値と、該当する場合は、未加工の値へのエイリアスの連鎖
- バリアブルの範囲(使用可能な場所)
- バリアブルを使用するためのコードスニペット
便利な機能として、バリアブルエイリアスの連鎖をたどって特定の値に戻ることができることができます。例えば、前の画像では、「Background/Positive/Default」バリアブルが「Green/500」をエイリアスとして使用しており、これは色の値「#14AE5C」に対応しています。
[バリアブルの詳細]モーダルを使用してモードを変更し、バリアブルが持つことができる他の値を確認することもできます。
バリアブルの詳細モーダルを開く
[バリアブルの詳細]モーダルを開く方法は2つあります。
CSSのデザイントークンなど、コードスニペットに表示される変数の場合、[インスペクト]パネルでバリアブル名をクリックして[バリアブルの詳細]モーダルを開きます。
[選択範囲の色]セクションに表示されるバリアブルなど、その他のバリアブルについては、[インスペクト]パネルの[バリアブルの詳細]をクリックして、[バリアブルの詳細]モーダルを開きます。
バリアブル候補
Dev Modeでは、デザインをインスペクトしているときに、バリアブルやスタイルではなく、未加工の値に出くわすことがあります。これは、デザイナーがデザイン段階でバリアブルを切り離した場合など、さまざまな理由で発生する可能性があります。未加工の値を見かけたら、代わりに使用すべき既存のバリアブルがあるかどうかを確認するとよいでしょう。
対応するバリアブルを簡単に識別できるよう、Dev Modeではバリアブルの候補を表示できます。
バリアブルの候補を表示するには、そのバリアブルが以下を持っている必要があります。
- まったく同じ値
- 適切なスコープ
バリアブル候補のいずれかをクリックすると、名前をコピーできます。
バリアブル候補を取得する
Dev Modeで値のバリアブル候補を取得するには、[インスペクト]パネルで、候補を表示する値をクリックします。クリックした値の横に[バリアブル候補]モーダルが表示されます。
ローカルバリアブルコレクションにアクセスする
Dev Modeでは、ファイル内のローカルバリアブルコレクションにアクセスして閲覧できます。
たとえば、上の画像の[このファイルのコレクション]セクションでは、[色のプリミティブ]バリアブルコレクションが選択されています。上の名前は一例に過ぎず、実際のコレクション名とバリアブル名は、ファイル内のローカルバリアブルとコレクションに対応しています。
[このファイルのコレクション]セクションの下には、[ブランド]、[ブラック]、[ホワイト]など、コレクションに表示されるすべてのバリアブルグループのリストがあります。デフォルトでは[すべてのバリアブル]が選択されています。グループは、バリアブルモーダルで整理されているのと同じ順序で並べられています。
グループを選択すると、バリアブルテーブルにバリアブルと各モードの値が表示されます。[すべてのバリアブル]を選択した場合、テーブルはグループごとに整理されます。
個別のバリアブルや値をクリックすることで、クリップボードにコピーしたり、バリアブルの詳細を閲覧したりできます。
バリアブルテーブルを開く
バリアブルテーブルを開くには、[インスペクト]パネルの[バリアブル]セクションで[バリアブルを開く]をクリックします。バリアブルテーブルがキャンバスいっぱいに広がります。