Typography list

The list is where you browse the text styles. Each style appears once, with its values in columns or on a card, and each value that is linked to a design token shows a small mark.

Table and cards

The bar at the foot of the page switches the list between two views, Table and Cards. The page always opens as a table. The choice is not remembered, so reloading the page opens the table again.

Both views show the same styles. The search, the Status filter and the groups in the left panel work in either one.

Table

The table has one row per text style, and these columns:

• Sample: an “Aa” drawn in the style’s own font family, weight and letter spacing.
• Name: the last part of the style’s name. The group heading above the row holds the rest of the path, and hovering the name shows the full path.
• Family, Weight and Size: the font, its weight (for example Bold), and the size in pixels.
• Line height and Letter spacing: in the unit the style is saved with, so 32px or 150%.
• Status: the sync status badge.

A dash in a cell means the style has no value for that property. A dash is never a default value.

A tap anywhere on a row opens the style’s panel. The name is also a button, so you can reach it with the keyboard.

On a phone the table scrolls sideways inside its own area. The page itself does not move.

Cards

Cards are the list the page used before. Each style has a card with its name, a preview of the style applied to a sentence, and chips with its family, weight, size and line height. Clicking a card opens the style’s panel.

Token marks

When a value is bound to a design variable (a token), a small token mark sits beside it in the table. It has three states:

• A token of this project: the mark is drawn in the token colour. Tapping it opens the token’s panel.
• Token not in Grails: a grey dashed mark. The token exists in another file or library that this project has not synced. Tapping it tells you why. To see the token, sync the file or library that holds it into this project. Grails does not look for tokens in other teams’ projects.
• Token in two files: the same grey dashed mark, for a token that two other Figma files in the project define, while the style’s own file does not. Grails cannot tell which one is meant, so it does not pick one. Tapping it tells you why.

The mark is the same one the panel shows, without the name, because a table cell has no room for it. The name is the mark’s label.

Groups and the left panel

Styles are grouped by their path in Figma, for example Heading/H1, Body/Regular or Caption/Small. Each group has its own heading. The left panel lists these groups in an index:

• Picking a group scrolls the main area to it, in the table and in the cards.
• The search field (Search text styles) filters by style name as you type. It narrows both the index and the list. Clearing it restores the full view.
• The Status filter keeps the styles in one sync status: All, Synced, Outdated or Deleted in Figma.

When nothing matches, the panel and the main area both say so and offer Clear search and filters.

On a wide screen the panel floats over the page or sits docked beside it, as chosen in User Settings → Appearance → Side panels. On a phone it does not take the width of the screen: the button at the bottom left opens it over the page, and picking a group closes it again.

Documentation

Each row shows a documentation book beside its name. On a computer it appears when you hover the row. On a touch screen it is always visible. Tapping it opens the style’s documentation. See Docs for how documentation works.

Available actions

Action	Roles	What it does
Search styles	All	Filters styles by name as you type, in the left panel.
Filter by status	All	The Status filter keeps styles in one sync status.
Navigate by group	All	Clicking a group scrolls to it, in the table and in the cards.
Switch between table and cards	All	The Table and Cards buttons in the bar at the foot. The page opens as a table.
View style detail	All	Clicking a row or a card opens the style’s panel. See Text style panel.
Open a token	All	Tapping a token mark in the table opens the token, or tells you why it cannot be opened.
Open documentation	All	Tapping the documentation book on a row.