Editing on the Design side

You can change the values and scopes of the Figma variables from the Design side. A change made in Grails is not written to Figma at once. It is queued, in a batch that the whole team shares, and the batch reaches Figma when someone applies it from the Figma plugin.

Who can edit

• Edit appears in the bar at the foot of the table only for admins and editors, on a plan that includes token editing. Viewers never see it, and they see the queued batch read-only.
• Edit switches on the editing affordances: a pencil on each value and each scope. It is a choice kept for this project in this browser. It is not a permission, and it does not change what you are allowed to do.
• Done switches the pencils off again. It does not discard or apply anything: the queued changes stay in the batch.
• The question-mark button beside Edit opens How token editing works, a short explanation of the batch described below.

What happens when you change a value

Nothing changes in Figma when you make the change. Each change is queued the moment you make it, and the table keeps showing Figma’s value until the batch is applied. A queued cell shows:

• Both values, before → after, with the new one in the amber colour used for work that is waiting.
• A tooltip that says Pending — not yet in Figma and who queued it.

Editing a cell that already has a queued change replaces that change; it does not add a second one. If you set the value back to the one Figma has, the queued change is removed, and the message says Back to the value in Figma — nothing queued. Otherwise a message says Change queued for Figma.

Editing a value

In edit mode, a pencil appears on the right edge of a cell when you hover it. Click it to open the Edit value dialog. The dialog names the variable and the mode it applies to, and shows the value now as Current. When a change is already queued, it shows Current → queued.

The dialog has up to two tabs:

• Raw value sets a fixed value.
• Alias points the value at another variable.

The Alias tab is offered only when another variable of the same type exists to point to. The dialog opens on the tab the token already uses.

Setting a fixed value

• Colour: pick on the colour picker, or type a hex code such as #FF00CC. Hex takes three or six digits. Transparency is not set here, because Figma keeps opacity apart from the hex value. If the token already has an opacity, the dialog keeps it and says so, so you change it in Figma.
• FLOAT (numbers): type a number. A value that is not a finite number is refused.
• STRING (text): type the text. Invisible control characters are refused, and a value is limited to 10,000 characters.
• BOOLEAN: switch between True and False.

Submit update queues the change. Cancel closes the dialog and changes nothing. Enter submits from the Raw value tab, and Escape closes the dialog.

Setting an alias

On the Alias tab, type to search by name or by collection. Two collections can each hold a variable with the same name, so the collection is shown under every result. Only variables of the same type are listed. The alias the token uses now is marked current and scrolled into view.

Clicking a variable on this tab queues the alias at once. There is no Submit button on this tab.

Composed colours are locked

A colour that Figma builds from another colour plus an opacity cannot be edited from Grails. Figma does not let a plugin write that kind of value, so Grails does not offer the edit. A lock replaces the pencil in that cell, and it is always visible. Hovering the lock, or reaching it with the Tab key, explains:

This colour uses a composed opacity from Figma. Figma does not allow a plugin to change it, so it can be viewed but not edited. Edit it in Figma and sync again.

Only that colour, in that mode, is locked. The other modes of the same token can still be edited if their value is a plain colour or a plain alias.

Editing scopes

Scopes belong to the variable, not to a mode, so one scopes change covers every mode.

1. Click the Scopes cell. A menu titled Scopes with the variable’s type opens, with a checkbox for each scope that fits that type.
2. Tick the scopes you want. The menu stays open while you tick.
3. All scopes is exclusive. Ticking it clears the others, and ticking any other scope clears it.
4. Untick everything to make the token primitive-only. This is allowed, and it is a choice: the cell then shows NO SCOPE.

Each change is queued, and the message says Scopes change queued for Figma. While a scopes change is queued, the cell shows before → after and a pencil labelled Edit scopes, so you can correct it.

Review the batch

The batch is shared, so the page tells everyone what is waiting. A banner sits above the table with the number of changes and a Review changes button. Everyone sees the banner, viewers too. It also names the collections the changes touch, and how many members queued them.

Review changes opens Pending token changes. It lists each change under its collection, with who queued it, its current value and its proposed one.

• Remove this change takes out one change on its own. The others stay. This needs edit rights.
• Discard all removes every queued change, after a confirmation. It cannot be undone. Nothing in Figma changes, and nothing already synced is affected.

How a change reaches Figma

Queued changes are applied from Figma, not from Grails:

1. An admin or editor opens the Grails plugin in the Figma file that owns these tokens.
2. The plugin shows the queued batch. The reviewer checks it and applies it there.
3. Once the batch is applied or discarded, Figma’s sync for that file resumes.

The banner says the same thing: open the Grails plugin in the Figma file that owns these tokens to review and apply them. The help in the bar says that token sync from Figma is paused for that file until the batch is applied or discarded.

New collections, and the values that Figma holds, reach Grails only through the sync of the Figma plugin.