The Design side
The Design side shows the variables synced from Figma. Every value is read-only here until you turn on editing. Everything else works: the search, the filters, the token panel and Export.
The collections
The left panel lists every collection synced from Figma. Each collection expands to show its groups, which come from the / in the variable names: Colors / Primary is a group inside the Colors collection.
- Clicking a collection shows all of its variables.
- Clicking a group narrows the table to that part of the path.
- A yellow badge means the collection is outdated: it changed in Figma since the last sync. That covers its variables, its name, the name of one of its modes, or its default mode.
- A red badge means the collection was deleted in Figma but still exists in Grails.
The table
The table has one row per variable, grouped by collection, and these columns:
| Column | What it shows |
|---|---|
| Variable name | The leaf name of the variable, with its path collapsed in front. The type icon sits on the left. |
| One column per mode | The resolved value of the variable in that mode. |
| Scopes | Where the variable can be applied in Figma. See Scopes. |
Click a row to open the token panel.
Modes
A collection can have several modes: for example Light and Dark, or Desktop and Mobile. A variable holds one value per mode, so the same name can be a dark grey in Dark and a light grey in Light.
The table shows one column for each mode of the collection, so you can read the whole set of values side by side. A collection with a single mode has one value column. There is no separate mode selector on the Design side: the modes are already on the screen.
Types and their icons
Each row starts with an icon that shows the variable’s type.
| Icon | Type | Examples |
|---|---|---|
| Palette | COLOR | Fill colours, border colours, background colours |
# | FLOAT | Spacing, font sizes, border radius, opacity |
T | STRING | Font families, labels, URLs |
| Settings | BOOLEAN | Feature flags, visibility toggles |
Use the filter icon that appears on the Variable name header when you hover it, to show only one type in the current collection.
Scopes
In Figma, a variable’s scopes say in which pickers it appears. A colour with the Frame fill scope shows up in the fill picker of a frame; a colour with no scope does not show up in any picker at all.
The Scopes column shows up to two scope tags for each variable, and a +N badge when there are more. The tags use Figma’s names with the underscores turned into spaces. The scopes a type can take depend on the type: the editor offers only the ones that fit.
NO SCOPE: primitive-only tokens
A dashed NO SCOPE badge means the variable has no scopes. That is a deliberate state, not missing information. It means the token can only be used as a primitive: other tokens can alias it, but a designer cannot apply it directly to any property.
This is the usual way to keep a primitives layer out of the designers’ way, so that only the semantic tokens above it can be picked. It is the opposite of All scopes: a token with all scopes can be applied to every property its type supports.
If you want a token to become directly applicable, edit its scopes and pick the properties it should appear for.
Aliased values
When a variable’s value in a mode is a reference to another variable (an alias), the cell shows:
- The resolved value at the end of the chain, for example
#1A73E8or16. - A pill badge with the name of the first variable in the chain, for example
Colors/Base/Blue-500.
Click the pill to open the Inheritance Chain popover, which lists every step of the chain, each with its collection. Clicking a step’s name opens that variable’s token panel, so you can inspect it without losing your place in the table.
If an alias is broken (a loop, or a variable that was deleted), a warning mark appears in the cell, and the pill cannot be opened for that reference.
Colours with an opacity on top
Figma lets a colour be built from another colour plus an opacity. In the table, that colour shows the hex of the colour underneath, with the opacity next to it, for example #000000 50%. Its swatch is painted at that opacity, the way Figma shows it.
If the opacity comes from its own token, that token appears as a step in the chain, with the percentage it ends at. Changing that token changes every colour built on it.
A colour built this way cannot be edited from Grails. A lock replaces the pencil on it. See Composed colours.
Search and filters
- Search variables, at the top of the left panel, filters by variable name and by value, in every mode, as you type. It works inside the collection you have selected.
- The Status filter, under the search, keeps the collections in one sync state.
- The type filter on the Variable name header keeps one type of variable.