Variable metadata

Variables carry more than values — they carry information about where they can be used. variable Jar manages four kinds of metadata in the master grid and the detail panel.

MetadataWhat it doesFigma sync
ScopesLimit which property pickers show the variable✓ round-trip
DescriptionA note on what the variable is for✓ round-trip
TagColor-coded internal groupingWeb-only
HiddenMark variables to hide from publishingWeb-only

Scopes and descriptions are read from Figma on Sync, and your web edits land back in Figma’s variable panel. Tags and hidden flags are web-only — they never touch Figma.

Turning on metadata columns

Use the Columns button in the toolbar to toggle the Description, Hidden, Tag, and Scopes columns.

Scopes — where a variable can be used

Scopes decide which property pickers offer the variable in Figma. Narrow a color variable to Text fill and it stops appearing when someone picks a frame background color.

  • The Scopes cell summarizes the current state — All supported properties, a count (e.g. “2 scopes”), None, or ”—” for variables that haven’t been synced yet.
  • Click the cell to toggle scopes in a popover — several in a row without reopening. The list only shows scopes valid for that variable’s type; color, number, and string each have their own set.
  • All supported properties is exclusive: turning it on clears individual picks.
  • Boolean scope cells are read-only — Figma does not support scoping boolean variables.

Description

  • Type directly in the Description column, or edit in the detail panel. Descriptions round-trip with the variable’s description in Figma.
  • Clearing a description on the web never deletes the one in Figma — sync does not erase Figma-side descriptions.

Tags and hidden

  • A Tag is a color-coded label for internal grouping. Assign one and a color strip appears by the variable name.
  • Hidden marks a variable to hide from publishing; the row gets a Hidden badge.
  • Both are web-only — never written to Figma, and never cleared by sync.

Editing many variables at once

Open the detail panel from the detail icon that appears when you hover a row. With multiple rows selected, the panel edits the whole selection.

  • A description you type applies to every selected variable.
  • Scope chips show Mixed when the selection disagrees; clicking a chip unifies all of them.
  • Scopes can’t be edited across mixed types — select variables of one type.
  • One Ctrl(⌘)+Z undoes the whole batch.

Seeing state in color — grid and graph

Beyond reading columns, paint metadata onto the view.

  • In the grid toolbar, Color: tag paints each row’s name strip with its tag color, and Color: gaps highlights variables missing a description or scopes — the fastest way to find tokens that need attention.
  • The same lenses work in the token graph tab. Pick Color: scopes and each reference level shows chips counting scoped · all · hidden · uncollected variables, so you can spot unfinished tokens right on the structure.