Getting Started with Token Designer
Token Designer is a design token editor with a built-in AI assistant. You use it to build the raw values that power your design system (colors, type, spacing, borders) and then get them out to your team, whether that's publishing a versioned release for developers or pushing directly into Figma.
What's in the app
The app is split into three areas. The left sidebar is where your token groups live, along with the theme switcher and AI chat panel. The center is the main editor, either the token table or a Design Guide depending on what you have selected. The right side is a live preview that renders real UI using your current tokens as you work.
A few things you can do:
- Build and organize tokens into groups, with types for colors, dimensions, font settings, durations, and more
- Use the Design Guides for a more guided approach to setting up color palettes, type scales, border styles, and spacing
- Create multiple themes (light, dark, whatever you need) and override specific tokens per theme
- Chat with the AI to create or modify tokens, either within a single group or across the whole project
- Publish versioned releases or download the current state whenever you need it
- Use the Figma plugin to push tokens into Figma as variables, or pull Figma variables back in
Finding your way around these docs
| Section | What's in it |
|---|---|
| Token Editor | The token table, token types, and how to organize things |
| AI Assistant | Chatting with the AI to build and edit tokens |
| Design Guides | Guided setup for color, type, spacing, and themes |
| Live Preview | The preview panel and switching templates |
| Publishing | Downloads, versioned releases, and release notes |
| Figma Integration | Syncing tokens with Figma variables |