TABLE

The table

The Table tab is the spreadsheet view: every variable in the file, filtered by the sidebar, five columns wide.

Name · Value · Collection · Accessibility · Actions

Editing

Click a Name or Value cell and type. Edits commit when the field loses focus — clicking away or tabbing out. There is no Enter to commit and no Escape to revert, so check a value before you click away.

Editing a name only changes the last segment. The group prefix stays, so renaming color/red/500 to 600 gives you color/red/600.

Boolean variables get True / False buttons instead of a text field.

What you can type in a value

  • A reference to another variable — {color/red/500}. The name must match a local variable exactly, or you get "Referenced variable not found".
  • A colour — #RGB, #RRGGBB, rgb(r, g, b) or rgba(r, g, b, a).
  • A number — anything numeric.
  • A boolean — exactly true or false.

Note that a colour with transparency is displayed as 8-digit hex, but 8-digit hex is not accepted as input. Use rgba(…) to set an alpha value.

Groups

A group is everything before the last / in a variable's name. Groups collapse and expand: click the group name, or use the toggle in the Name column header to expand or collapse all of them at once.

Each group row carries its own actions:

  • Edit as text — opens the group in a text editor. See below.
  • Delete group — deletes every variable in it, after a confirmation.
  • Collection dropdown — moves the whole group to another collection.
  • Shades or Steps — for colour and number groups, see Generating shades and Generating steps.

Edit as text

Edit as text opens a group as plain text, one variable per line:

name, value

Name and value are separated by a comma or a tab, and only the first separator counts — so rgb(0, 0, 0) survives as a value. A live preview under the box marks each line as new or modified.

Three things to know before you apply:

A variable you delete from the text is deleted from the file. The text is the whole group, not a patch.

A name that does not exist yet is created, with its type guessed from the value — # or rgb( makes a colour, a number makes a number, true/false makes a boolean, anything else a string.

Values are written to the collection's first mode, not the mode you have selected in the sidebar.

Accessibility

The Accessibility column checks contrast. Pick a comparison colour from the dropdown — Pick Color for a literal, Reference Color to compare against another variable — and the cell shows the ratio plus AA and AAA badges.

  • AA passes at a ratio of 4.5 or better.
  • AAA passes at 7 or better.

The comparison uses the row's value in the currently selected mode.

Setting a comparison colour on a group header applies it to every row in that group. These choices last for the session only — they are not saved with the file.

Creating variables

Add Variable offers Color, Number, String and Boolean, then asks for a name.

New variables go into the first collection in the file. There is currently no control for choosing which collection Add Variable targets, so to add to another collection, create the variable and then move it with the Collection dropdown on its row.

Add Collection at the bottom of the sidebar creates a collection. Collections cannot be renamed or deleted from the plugin — Figma's own variables panel does that.

Searching and filtering

The Search box filters by name as you type. The sidebar filters by mode, type and collection, with a tri-state tree down to individual groups. Drag the sidebar's right edge to resize it; the width is remembered.

Picking a mode cascades to same-named modes in other collections, so choosing "Dark" once switches every collection that has a mode called "Dark".