Add design tokens

studio:design-token:add brings design tokens into your project. Give it a Figma design-token ID to fetch from Figma, or run it with no ID and it analyzes your project (CSS custom properties, JS/TS token files) and generates a register-design-tokens file.

Import the generated file into your app's entry point (main.tsx, index.tsx, etc.) so the tokens register at boot. Re-run the command any time to refresh.

csdx studio:design-token:add --design-token-id=abc123-def456
csdx studio:design-token:add                 # generate by analyzing the project

When generating from the project, the CLI prompts for the token access level (dynamic / tokens / arbitrary). See the deep dive for what each level exposes to authors.

• Design tokens: access levels and what the generated file looks like.
• Update design-token config: change values in the generated file later.
• Studio CLI