トークングラフとトークンマップ

トークンは互いに参照し合います — セマンティックカラーはプリミティブを、コンポーネントのトークンはセマンティックなトークンを指します。variable Jar はその参照を2つのビューで見せます。トークングラフ は「このトークンを変えたら、ほかに何が変わるか」に答え、トークンマップ はプロジェクト全体を1枚の絵として並べます。

グラフを開く

• プロジェクトを開き、左のレールで トークングラフ タブを選びます。
• マスターグリッドで変数を右クリックして 参照関係を表示 を選ぶと、そのトークンが選ばれた状態でグラフが開きます。
• ビューは上下に分かれています: 上がレベルのツリー、下が要約ビューです。境界をドラッグしてサイズを変え、ダブルクリックで自動サイズに戻します。

レベルとカラーレンズ

ツリーは、すべてのトークンを直接の値からの距離で並べます。

• レベル 0 はプリミティブな値 — 何も参照しないトークンです。レベル 1 はレベル 0 を、レベル 2 はレベル 1 を参照し、以下同様です。各列の見出しにはレベルとトークン数が表示され、ホバーするとタイプの内訳と、その列が プリミティブ値 か 参照 かがわかります。
• 何も参照し合っていない場合は、参照関係なし と表示された すべてのトークン の列がひとつだけになります。
• トークンは名前の接頭辞でまとめられます。グループの行をクリックするとメンバーが開き、行の ↔ N はつながりの数です。列の見出しにホバーすると − / + のステッパー(グループの深さを減らす / グループの深さを増やす)が現れ、その列のグループ分けの深さを変えられます — 名前が入れ子(a/b/c)になっている列にだけ表示されます。
• 行にホバーすると、その行のつながりの線が光り、ほかは薄くなります。
• ツールバーの 色分け は各トークンの前に状態の点を塗ります: なし、Figmaにない(Web で作ったがまだ Figma に届いていないトークン)、スコープ。すると列の見出しに件数のチップ(色の点と数字。ホバーで名前)が表示されます — スコープ ではスコープ指定・すべて・非表示・未取得をそれぞれ1つずつ、Figmaにない では件数のチップを1つ(変数のメタデータを参照)。

影響の要約

トークンをクリックすると、右下に要約パネルが現れます。

• 変更するとN件に影響 — 連鎖を最後までたどって、このトークンを使っているトークンの数。値を編集する前に確認すべき数字です。
• N件の値を参照 — この値がいくつの元のトークンから来ているか(直接の参照とその元)。
• ツリーの下の要約ビューは、選んだトークンのまわりの連鎖を描きます: 左に 参照先、右に 使用箇所、真ん中にトークン。連鎖の中のトークンをクリックするとその経路だけが強調され、もう一度クリックすると解除されます。関係のないトークンには このトークンには参照関係がありません と表示されます。
• フォーカス スイッチ: オンのときは、連鎖の中のトークンをクリックするとビューがそのトークンを中心に並べ直され、無関係なトークンは隠れます。オフのときは強調するだけです。
• パネルのタグの点で、探しているあいだトークンに色で印を付けられます — グリッドの タグ 列で見えるのと同じタグです。
• 境界にホバーして 概要を折りたたむ のハンドルをクリックすると、要約ビューが細い 概要 バーにたたまれます。バー(概要を展開)をクリックすると元に戻ります。どちらの場合も、選んだトークンのパネルは残ります。

移動とジャンプ

• タイトルの横の ‹ / › ボタンで、見たトークンをブラウザの戻る・進むのように行き来します。キーボードショートカットは [(前に表示したトークン)と ](次のトークン)です。入力欄に入力している間は無視されます。
• 要約ビューの空いている所をドラッグするとパンでき、ホイールでもパンします。空いている所をダブルクリックすると中央に戻り、パンしたあとは左下に現れる 中央へ ボタンでも戻れます。
• マスターで開く は、このトークンを選んだ状態でマスターグリッドを開きます。グリッドには トークングラフに戻る のトーストが残り、1クリックで戻れます。Cmd+クリック で新しいウィンドウに開きます。
• トークンマップで開く は同じトークンを選んだ状態でマップにジャンプします。マップの トークングラフで開く で戻ると、グラフに トークンマップに戻る のトーストが表示されます。

循環参照

自分自身に戻ってくるエイリアスの連鎖には、解決できる値がありません。variable Jar はそのような連鎖ができるのを防ぎ、引き継いだものは表示します。

• グリッドでは、輪を閉じてしまうエイリアスはピッカーで 循環参照になります として拒否され、循環を作る貼り付けはそのセルをスキップします: Nセルをスキップしました（循環参照）。
• すでに循環がある場合、グラフに赤い 循環参照 の列が加わります。循環のメンバーは輪の上に並び、矢印が輪をめぐります。輪にホバーすると経路が読め、メンバーをクリックすると選択できます。
• 輪の下の 影響 N件 — 解決できません には、循環の一部ではないが循環を指しているトークンが並びます — これらも解決できません。
• 直すには、循環のどれかのメンバーに直接の値を設定します: ループ内のいずれかに直接値を設定すると、チェーン全体が解決します。

トークンマップ

レールの トークンマップ タブは、プロジェクト全体を一度に見せます: すべてのトークンがノード、すべての参照が線です。グループは最初はたたまれたクラスターなので、大きなプロジェクトでも読みやすさが保たれます。

• ホイール でズームします。クラスターをクリック すると開き(ほかは閉じます)、Shift+クリック で複数を一緒に開けます。ラベルの ✕ でひとつ閉じ、Esc ですべて閉じます。トークンをクリックするとフォーカスします。
• 見出しの すべてのタイプ ドロップダウンは複数選択です: 強調するタイプを選び、最後のひとつを外すとすべてのタイプに戻ります。その横の タグ の色の点は、そのタグを持つトークンを強調します — プロジェクトで使われている色だけが表示されます。
• 未参照を非表示 はつながりのないトークンを取り除きます。検索ボックス(検索 — 一致をハイライト)は一致したものを明るくし、ほかを隠さずに薄くします。
• 左下: クラスターをまとめる でクラスター化をオン/オフし、全体を表示 でマップ全体を表示に戻します。
• トークンをクリックすると、情報パネルにタイプ、接続 N件、中央へ のショートカット、参照先 N と 使用箇所 N の一覧、そして トークングラフで開く と マスターで開く が表示されます。クラスターをクリックすると、グループ バッジ、トークン数、接続先 N件、メンバー が表示されます。
• ‹ / › ボタンと [ / ] のショートカットは、ここでもグラフと同じように使えます。