Design tokens
Named values for colour, type, space, shadow and motion that layers reference instead of repeating, so one change restyles every place that uses them.
A token gives a value a name and one home. A button's background, a heading's size and a card's corner radius can each point at a token, and editing the token updates all three.
How it works in Builder Studio
In the design system view, tokens are called variables. Each variable has a type, and Builder Studio supports 15 of them, among them colour, dimension, font family, font weight, duration, easing, shadow, gradient and transition. Every variable prints as one CSS custom property, so a published page reads it the way any stylesheet would.
A variable can alias another variable, and it can hold a different value per mode, such as light and dark. Bind a layer's fill, text size or spacing to a variable in the properties panel, and ask the panel why a layer shows the value it does. Detaching a layer writes its current value back as a plain value. A variable can also say what it is used for, such as spacing or font size, so it binds only where it fits.
Variables, their modes and the styles built from them make up the canvas's design graph.
Moving tokens between tools
Design tokens are also a file format. The Design Tokens Community Group (DTCG) format is how tokens travel between tools. Builder Studio imports and exports DTCG files, imports Figma Variables and Tokens Studio files, and exports plain CSS. When you publish, the variables a page uses compile into the published site's stylesheet.
Related
- GlossaryDesign graphThe structured model of a design system in Builder Studio: its variables, modes and styles and the references between them, stored so it reads and writes as plain CSS.
- FeaturesCanvas: design the page that shipsPages, components and media in one document.
- GlossaryCanvasThe infinite document where pages, components and media are drawn, arranged and published from.