変数のメタデータ

変数が持つのは値だけではありません — どこで使えるかという情報も持っています。variable Jar はマスターグリッドと詳細パネルで3種類のメタデータを管理します。

メタデータ役割Figma との同期
スコープどのプロパティのピッカーに変数を表示するかを制限する✓ 往復
説明変数の用途についてのメモ✓ 往復
タグ色分けされた内部用のグループ分けWeb のみ

スコープと説明は同期のときに Figma から読み取られ、Web での編集は Figma の変数パネルに戻ります。タグは Web だけのもので、Figma には触れません。

値と同じように、スコープと説明も競合することがあります。同期の前に同じ変数のスコープや説明が Figma と Web で別々に変えられていた場合、競合バナーに スコープも食い違っています · N件 / 説明も食い違っています · N件 と件数が表示され、値の競合と同じように、その列で行ごとに Figma 側か VA 側を選びます(スコープ列で行ごとに選択してください / 説明列で行ごとに選択してください)。選択と反映のしかたは Figma 同期の競合の節のとおりです。

メタデータの列を表示する

ツールバーの列アイコン(ツールチップ 表示 — 列・色分け)を押し、列 セクションで モード · 説明 · タグ · スコープ の列をオン/オフします。メニューは開いたままなので、続けて複数の列を切り替えられます。

表示メニュー — 列セクションでモード・説明・タグ・スコープを切り替える
表示メニュー — 列セクションでモード・説明・タグ・スコープを切り替える

3つともオンにすると、マスターグリッドの1行で説明・タグ・スコープを読めます。

説明・タグ・スコープの列をオンにしたマスターグリッド
説明・タグ・スコープの列をオンにしたマスターグリッド

コメントは値のセルと同じく、説明・タグ・スコープのセルにも付けられます。その列を非表示にしてもコメントは残り、コメントに移動すると非表示の列がまた表示されます。

スコープ — 変数を使える場所

スコープは、Figma でどのプロパティのピッカーに変数が表示されるかを決めます。カラー変数を テキスト の塗りに絞れば、フレームの背景色を選ぶときには表示されなくなります。

  • スコープ のセルには現在の状態が要約されます — すべて(対応するすべてのプロパティ)、なし、選んだスコープの名前(例:「フレーム, テキスト」— 列が狭いと残りは +N バッジにまとまります)、まだ Figma からスコープを集めていない変数は「—」。「—」にホバーすると まだFigmaから取得していません — 次回の同期で反映されます と表示されます。
  • セルをクリックすると、Figma のスコープダイアログと同じ階層・アイコンのリストが開き、続けて複数のスコープを切り替えられます。リストには変数のタイプに有効なスコープだけが表示されます — カラーは 塗り(その下に フレーム · シェイプ · テキスト)と 線 · エフェクト、数値は 角の半径 から タイポグラフィ グループまで、文字列は テキストコンテンツ · フォントファミリー · フォントの太さまたはスタイル です。
  • サポートされているすべてのプロパティで表示 は、すべてのスコープに一度にチェックを入れた状態そのものです — オンにするとすべての個別スコープがオンになり、どれかひとつを外すと一番上の行だけが外れて残りはオンのままです。カラー変数では、塗り がフレーム・シェイプ・テキストの塗りに対して同じように働きます。
  • ブール値のスコープのセルは読み取り専用です — Figmaはブール値変数のスコープ設定に対応していません。
セルから開いたスコープのリスト — Figma のスコープダイアログと同じ階層
セルから開いたスコープのリスト — Figma のスコープダイアログと同じ階層

説明

  • 説明 の列に直接入力するか、詳細パネルで編集します。説明は Figma の変数の説明と往復します。
  • Web で説明を消しても、Figma の説明は消えません — 同期が Figma 側の説明を消すことはありません。

タグ

  • タグ は7色のパレット(レッド · アンバー · グリーン · ブルー · パープル · マゼンタ · グレー)から選ぶ内部用のグループ分けです。タグ の列のセルをクリックしてパレットで色を切り替えます。ひとつの変数に複数のタグを付けられます。
  • セルにはタグの色が点で並びます。4つを超えると残りは +N にまとまります。パレットの タグなし ですべて外せます。
  • タグは Web だけのもので、Figma に書き込まれることも、同期で消えることもありません。

多くの変数をまとめて編集する

行にホバーすると出る詳細アイコンから詳細パネルを開きます。複数の行を選ぶと、パネルは N個選択中 に切り替わり、選択全体を編集します。

  • 入力した説明は、選択したすべての変数に適用されます。
  • 選択の中で値がそろっていないスコープとタグには 混在 と表示されます。スコープのチェックボックスやタグの色の点をクリックすると、すべてがそろいます。
  • タイプの異なる変数をまたいでスコープを編集することはできません — 同じタイプの変数を選んでください。
  • Ctrl(⌘)+Z 1回でまとめた変更全体を元に戻せます。
詳細パネル — 名前、説明、タグのパレット、スコープのリストがひとつの場所に
詳細パネル — 名前、説明、タグのパレット、スコープのリストがひとつの場所に

状態を色で見る — グラフ

トークングラフのタブでは、メタデータを構造の上に色で塗って、ひと目で見渡せます。

  • グラフのツールバーの 色分け で Figmaにない を選ぶと、まだ Figma にない変数が強調され、参照レベルごとに件数入りの Figmaにない N チップが表示されます。マスターグリッドでは、プロジェクトが Figma ファイルとつながっていればこの状態が常に表示されます — 名前の横の点にホバーすると Figmaにまだありません — 次回の同期で作成されると消えます と表示されます。
  • スコープ を選ぶと、参照レベルごとに スコープ指定 N · すべて N · 非表示 N(スコープなし — どのピッカーにも表示されない)· 未取得 N のチップが表示され、構造の上で未完成のトークンを見つけられます。
  • タグの色の点もグラフのトークンの横に表示されます。