グリッドの使い方

マスターグリッドは、プロジェクトの マスター タブにある変数エディターです。1行が1つの変数で、モード(ライト/ダーク、言語など)ごとに値の列が1つあります。グリッドでの変更は、プラグインで同期を押すと Figma に届きます。

コレクションとグループ

• 左サイドバーの コレクション 一覧でコレクションを切り替え、+ ボタン(新しいコレクション)で作成します。コレクションを右クリックすると 名前を変更 / このコレクションをエクスポート / 削除 があります。
• サイドバーの コレクション の見出しをクリックすると コレクションの並び順 メニューが開きます — 作成順(既定)または 名前順（A→Z）。Figma のパネルで並べ替えたコレクションの順序はプラグインから読み取れないため、取り込まれません。
• 変数名の / はグループを作ります(例: color/primary → color グループ)。グループ ツリーでグループを選ぶとグリッドがそのグループだけに絞られ、すべて を選ぶとコレクション全体に戻ります。

グループの作成・名前の変更・移動

• 行を選んで右クリック → 選択項目で新しいグループ — 選んだ変数が 新しいグループ という名前のグループにまとめられます。サイドバーですぐに名前を変えられます。
• サイドバーでグループを右クリックして 名前を変更 を選ぶと、そのグループ(サブグループを含む)のすべての変数のパスが変わります。それらの変数を指すエイリアスは自動で追従します。グループ名は空にできず、/ も使えません。
• グリッドの名前のセルには最後の部分だけが表示され、パスはグループの見出しにあります。ダブルクリックでの編集は最後の部分だけを変えます — パス全体を編集するには、右クリック → 変数を編集 の 名前 欄を使います。
• サイドバーでグループを別のグループ(または すべて)の上にドラッグすると、そのパスが移動先の下に移ります。Ctrl(⌘)+Z で元に戻せ、次の同期で同じパスが Figma に届きます。グループを自分自身、自分のサブグループ、いまの親の上には落とせません。
• グループや変数をドラッグで並べ替えることはできません。

セルを編集する

• 値のセルをクリックすると編集できます。Enter で確定して下に移動し、Escape で元の値に戻します。
• タイプごとの入力: 文字列 = テキスト、数値 = 数値入力、ブール値 = トグルスイッチ、カラー = カラーピッカー + 16進数。
• カラーのセルは Figma と同じく、# なしの16進数とアルファの % を並べて表示します。短い形は展開され(f → FFFFFF)、8桁では最後の2桁がアルファです — 入力のヒントは「Hex 6桁または8桁（末尾2桁＝アルファ）。短縮形は展開されます（f → FFFFFF）。{reference} も使えます」。カラーでない値は保存されません: セルを離れると元に戻り、「色ではないため元に戻しました：{value}」のトーストが出ます。
• カラーピッカーには カスタム / ライブラリ タブがあります。ライブラリ では、同じコレクションのほかのカラー変数を選んで参照(エイリアス)としてつなげます。画面から色を取得 で画面から色を取れます。
• ほかの変数を参照するセルはチップとして表示されます — チップには最後の部分だけが表示され、ホバーするとパス全体と解決された値が見えます。チップをクリックするとピッカーが開き直し、別の変数に切り替えられます。
• 文字列と数値の変数も参照できます。セルにホバーして エイリアスを設定 ボタンで同じタイプの変数を選びます。3つのタイプとも共通の エイリアスを解除 ボタンで参照を外すと、解決された値がそのまま通常の値として残ります。
• 循環になる選択はピッカーでブロックされます(「循環参照になります」)。貼り付けは循環になるセルをスキップし、トーストで知らせます(「{count}セルをスキップしました（循環参照）」)。
• 名前のセルをダブルクリックすると、変数の名前を変えられます。
• セルにコメントを残すには、C を押してセルをクリックします(コメント —「Cを押してからセルをクリックしてください。Escを押すまで有効です。」)。説明・タグ・スコープのセルにもコメントを付けられます。

行の追加・削除・複製

• ツールバーの一番左の +(変数を追加)からタイプ(カラー / 数値 / 文字列 / ブール値)を選ぶと、その場で行が作られてフォーカスされます。先に名前を入力するフォームはなく、新しい変数はタイプごとの既定値で生まれます。その場で名前を変えてください。
• 削除するには、行を選んで Delete を押すか、右クリックメニューの 削除 を使います。
• Shift+Enter — 1行のときはすぐ下に同じタイプの新しい行を挿入し、複数行を選んでいるときは複製します。
• 右クリックメニューの 複製 も使えます。
• 行の右クリックメニュー: コピー · 複製 · 変数を編集 · 選択項目で新しいグループ · コレクションに移動 ▸(コレクション一覧 + 新しいコレクション)· 参照関係を表示 · このコレクションをエクスポート · 削除。

変数を別のコレクションに移す

• 行を選んで右クリック → コレクションに移動 ▸ を選び、移動先のコレクションか 新しいコレクション を選びます。両方のコレクションのモード名が同じなら、行はすぐに移ります。
• モードが違う場合は、残す値 ボード付きの {collection}に移動 ダイアログが開きます。現在のコレクションの各モードについて、その値を移動先のモードの列のどれかに置くか、破棄 を選びます。置いていないモードがある間はボタンがロックされ、ダイアログに「未配置: {modes}」と表示されます。ボタンは 移動、値を捨てる選択がある場合は {count}個を破棄して移動 になります — 別の確認はありません。デフォルトに戻す で最初の配置に戻ります。
• 移動のあと「{count}個の変数を{collection}に移動しました」のトーストが出て、元に戻す ですぐに元に戻せます。
• Figma ファイルとつながっているプロジェクトでは、ダイアログに「Figmaのレイヤーは次回の同期で再接続されます。再接続できなかったものは行に表示されます。」と表示されます。移した行には、プラグインで同期を押すまで Figmaで反映待ち バッジが付きます。同期で Figma 側の新しいコレクションに変数が作られ、レイヤーがつなぎ直されます。

複数選択 — 2つのモード

行の選択(行全体を強調)— 行単位の操作に:

• Shift+クリック: 最後に選んだ行から範囲を選択
• Ctrl(⌘)+クリック: 行をひとつずつ追加/解除
• Shift+Ctrl(⌘)+↑↓: キーボードで広げる
• 使える操作: 右クリック コピー(名前とモードを含む)/ 複製 / 削除、Delete キー、Shift+Enter での複製、選択項目で新しいグループ、コレクションに移動

セル範囲の選択(点線の枠)— 値をまとめて扱う操作に:

• 値のセルをクリックしてアンカーにし、Shift+クリックまたは Shift+矢印で長方形を広げます
• 使える操作: 一括入力、Ctrl(⌘)+C でのコピー、Delete での値の消去

一括入力

セル範囲を選んだまま入力を始めると、アンカーのセルで編集が開き、Enter でその値が選んだすべてのセルに一度に入ります。

コピー&ペースト

コピー&ペーストで、グリッドと Google スプレッドシートや Excel の間で値を移せます。シートからコピーした表をグリッドに貼り付けたり、グリッドの値をシートにコピーしたりできます。

コピー:

• 2つ以上のセルを選んで Ctrl(⌘)+C を押すと、値がコピーされます。
• 行を選んで右クリック → コピー を選ぶと、変数名とモードも含まれます。シートに貼り付けると表になります。

貼り付け(Ctrl(⌘)+V): スプレッドシートからコピーした表を、そのままグリッドに貼り付けます。どこに入るかは選択によって変わります。

• 値のセルが選ばれている — そのセルから右と下に向かって埋めます。グリッドの端を越える行と列はスキップされます。
• セルが選ばれていない — 最初の行を見出しとして読み、変数名とモード名で既存の行に値を合わせます。グリッドにない変数名は新しい行として作られます(トーストに「新規変数：{count}」)。合わない列はスキップされます。

どちらの場合も、いくつのセルが埋まり、いくつスキップされたかがトーストで表示されます。循環参照になるセルはスキップされます。

選んだ値のセルへの貼り付けは既存の行を埋めるだけです — 貼り付けながら新しい変数を作るには、セルの選択を外して見出し行付きの表を貼り付けるか、先に +(変数を追加)で行を作ってください。検索やフィルターが有効な場合は、グリッドに見えている行だけが対象になります。

元に戻す / やり直す

Ctrl(⌘)+Z で元に戻し、Ctrl(⌘)+Shift+Z でやり直します(最大50ステップ)。ツールバーのボタンも使えます。編集、削除、貼り付け、一括入力、グループの名前の変更と移動は、すべて元に戻せます。

モード(列)を管理する

• 最後のモードの見出しの右端にある + ボタン(モードを追加)でモードを追加します。プランの言語数の上限に達すると、アップグレードの案内が表示されます。
• モードの見出しをダブルクリックして名前を変えるか、右クリックメニューの 名前を変更 / 削除 を使います。最後に残ったモードは削除できません。
• 列の端をドラッグして幅を変えます — 幅は次回のために保存されます。

検索と並べ替え

ツールバーには検索ボックスとタイプのフィルター(すべてのタイプ · カラー / 文字列 / 数値 / ブール値)があります。名前 · 説明 · タグ · スコープ の見出しをクリックするとその列で並べ替え、もう一度クリックすると向きが逆になります。並べ替えは各グループのセクションの中だけに適用され、グループのセクション自体の順序は変わりません。

ツールバーの 表示 — 列・色分け ボタンで モード · 説明 · タグ · スコープ の列をオン/オフします(メニューは開いたままなので複数を切り替えられます)— 変数のメタデータで説明しています。

キーボードショートカット

トークングラフ

プロジェクトの トークングラフ タブは変数どうしの参照(エイリアス)関係を1段ずつ視覚化し、トークンマップ タブはプロジェクト全体を1枚の地図として並べます。グラフでトークンをクリックすると、要約に「変更すると{count}件に影響」と「{count}件の値を参照」が表示され、編集する前に影響範囲がわかります。グリッドで行を右クリックして 参照関係を表示 を選ぶと直接移動できます。詳しくはトークングラフを参照してください。

データをエクスポートする

Web から直接エクスポートできます — プロジェクトカードの ⋮ メニューの エクスポート、またはサイドバーのコレクションやグリッドの行を右クリックして このコレクションをエクスポート を選びます。6つの形式(DTCG · JSON · CSV · CSS · SwiftUI · Jetpack Compose)が使えます。詳しくはエクスポートとコードを参照してください。Figma プラグインの その他(…)→ エクスポート でもファイルを保存できます。コードや CI からデザイントークンを取得するには、読み取り専用の API と MCP サーバーを使ってください。