Using the grid

The master grid is the variable editor in a project’s Master tab. Each row is one variable; there is one value column per mode (light/dark, languages, and so on). Changes made in the grid reach Figma when you press Sync in the plugin.

Collections and groups

• Switch collections from the Collections list in the left sidebar, and create one with the + button (New collection).
• A / in a variable name forms a group (e.g. color/primary). Pick a group in the Groups tree to filter the grid to just that group.

Editing cells

• Click a value cell to edit it. Enter confirms and moves down; Escape restores the original value.
• Input by type: string = text, number = numeric input, boolean = toggle switch, color = color picker + hex.
• In color cells, a value referencing another variable ({Collection/name} format) shows a → arrow and the picker is disabled.
• Double-click a name cell to rename a variable.

Adding, deleting, duplicating rows

• + Add variable — pick a type (STRING/COLOR/FLOAT/BOOLEAN) and enter a name.
• Hover a row and click the trash icon on the right to delete it.
• Shift+Enter — on a single row, inserts a new row of the same type right below; with multiple rows selected, duplicates them.
• The right-click menu’s Duplicate works too.

Multi-select — two modes

Row selection (full-row highlight) — for row-level operations:

• Shift+click: select a range from the last selected row
• Ctrl(⌘)+click: add/remove individual rows
• Shift+Ctrl(⌘)+↑↓: extend with the keyboard
• Available actions: right-click Copy (names and modes included) / Duplicate / Delete, the Delete key, Shift+Enter duplicate

Cell range selection (dashed border) — for bulk value operations:

• Click a value cell to set the anchor, then Shift+click or Shift+arrow to extend a rectangle
• Available actions: batch input, Ctrl(⌘)+C copy, Delete to clear values

Batch input

With a cell range selected, just start typing — editing opens in the anchor cell, and Enter puts that value into every selected cell at once.

Copy & paste

You can move values between the grid and Google Sheets or Excel with copy/paste. Paste a table copied from a sheet into the grid, and copy grid values back out to a sheet.

Copy:

• Select two or more cells and press Ctrl(⌘)+C to copy their values.
• Select rows and right-click Copy to include the variable names and modes. Paste it into a sheet and you get a table.

Paste (Ctrl(⌘)+V): paste a table copied from a spreadsheet straight into the grid. Where it lands depends on your selection.

• A value cell is selected — filling starts at that cell and continues right and down. Rows and columns past the edge of the grid are skipped.
• No cell is selected — the first line is read as a header, and values are matched to existing rows by variable name and mode name. Rows and columns that don’t match are skipped.

Either way, a toast reports how many cells were filled and how many were skipped.

Paste updates existing variables — names not in the grid are skipped, not added as new rows. Create new variables with + Add variable. If search or a filter is active, only the rows visible in the grid are affected.

Undo / Redo

Ctrl(⌘)+Z to undo, Ctrl(⌘)+Shift+Z to redo (up to 50 steps). Toolbar buttons are available too. Edits, deletions, pastes, and batch input can all be undone.

Managing modes (columns)

• Add modes with the + Mode button. At your plan’s language limit, an upgrade prompt appears.
• Double-click a mode header to rename, or use the right-click menu’s Rename / Delete. The last remaining mode can’t be deleted.
• Drag a column edge to resize — widths are saved for next time.

Search and sort

The toolbar has a search box and type filters (Color / String / Number / Boolean); click the Name header to toggle sorting.

The Columns button in the toolbar turns on the Description, Hidden, Tag, and Scopes columns — covered in Variable metadata.

Keyboard shortcuts

Token graph

A project’s Token graph tab visualizes reference (alias) relationships between variables, one step at a time. Use it to see what a token references — and what references it. Turn on the Color: scopes lens to paint metadata state — scopes and gaps — onto the structure (see Variable metadata).

Exporting data

To export files, use the Figma plugin’s More (…) → Export and choose DTCG · JSON · CSV. To pull design tokens from code or CI, use the read-only API and the MCP server.