Design graph

The 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.

How it works in Builder Studio

Each canvas has one design system, and the design graph is how that system is stored. It holds four kinds of object:

Variables: named values such as a colour, a font size or a duration. Each one prints as a single CSS custom property. Variables are the product's name for design tokens.
Aliases: variables whose value points at another variable, so a change to the source carries through.
Modes: alternative values grouped on an axis, such as light and dark. A frame set to a mode shows every bound value in that mode.
Styles: reusable classes with their own rules, applied to layers the way a class is applied to an element.

Layers bind to variables and styles by reference, not by a copied value, so renaming a variable never breaks a binding. Before you delete a variable that is in use, the design system view shows what depends on it.

Import, export and publishing

Import an existing system from CSS, HTML, a DTCG token file (the Design Tokens Community Group format), Figma Variables, Tokens Studio or a design.md file. The import shows a preview before anything is applied, and importing the same source again merges its changes with your edits.

Export writes tokens.css and styles.css, a DTCG bundle or design.md. When you publish, the same graph compiles into the published site's stylesheet, so the live page uses the values the canvas shows.

For agents

Agents connected over MCP work on the graph with four tools: design_system_read, design_system_patch, design_import and design_export. A patch applies all of its changes or none of them.