Figma
The design tokens behind every component, as a file Figma's variables can import: 242 variables, generated from the same CSS the components install, so the file and the code never disagree.
Download the tokens
notchset.tokens.json is W3C design-token (DTCG) JSON. Each value is resolved for its mode, because Figma variables can't hold var() or color-mix(), and each variable keeps the CSS variable it stands for as its web code syntax: pick ns/panel in Figma and Dev Mode shows var(--ns-panel).
| Collection | Modes | Holds |
|---|---|---|
| Theme | Light, Dark | every colour role and shadow |
| Metal | Amethyst, Graphite | the signal metal, per theme |
| Density | Desktop, Touch, Phone | the sizes that grow on touch screens and phones |
| Foundation | Default | type, weights, space, sizes, radii, durations and curves |
Import it into Figma
- Open the Figma file you design in and open its local variables.
- Import
notchset.tokens.json. Figma's own variables import reads DTCG JSON; where your plan doesn't have it yet, a design-tokens plugin imports the same file, modes included. - Each collection arrives with its modes. Switch a frame between Light and Dark (or Desktop, Touch and Phone) and every bound value follows.
The file changes only when the system's roles do. After an update, import it again: variables keep their names, so what you bound stays bound.
From Figma to code
The MCP server's tokens tool takes any name a role has (a Figma variable such as ns/panel, a CSS variable, or a short name) and answers with its CSS variable, its value in each mode and the Tailwind class that reads it. An agent reading a design through Figma's own MCP can turn each variable it finds into the role that styles it here. See AI and MCP.
The component library
A Figma library of the components, built from the same code, is coming. Until it ships there is no Figma file to duplicate and no item links to one. Nothing in installing or using Notchset depends on Figma.