Code export
Download your design system as code for the platform you build on. Four formats are free.
Where to export
- On the web: in Studio, open Use it → Code.
- In Figma: in the plugin, open Export → Code.
Pick a format and its files open in the code viewer. Your saved system also has hosted links for CSS, Tailwind v4 and tokens that update on their own.
All 21 formats
| Format | Plan |
|---|---|
| CSS variables | Free |
| Tailwind v4 (@theme) | Free |
| W3C DTCG / Style Dictionary | Free |
| AI Pack (AGENTS.md, DESIGN.md, shadcn) | Free |
| React components (shadcn-style) | Pro |
| MCP server (Claude, Cursor) | Pro |
| SwiftUI | Pro |
| Jetpack Compose | Pro |
| Android XML | Pro |
| Flutter | Pro |
| WordPress (theme.json) | Pro |
| Elementor (site kit) | Pro |
| Webflow (variables) | Pro |
| Email (MJML + HTML) | Pro |
| SCSS | Pro |
| Tailwind v3 config | Pro |
| Tokens Studio (JSON) | Pro |
| UIX config (lossless) | Pro |
| Markdown docs | Pro |
| HTML style guide | Pro |
| Docs website (HTML) | Pro |
What the free formats give you
- CSS variables: every token as a variable, with light and dark sets. Works on any website.
- Tailwind v4: a theme file that starts with
@import "tailwindcss", so classes likebg-surfaceandtext-fg-primaryuse your tokens. - W3C DTCG: token JSON files for Style Dictionary and other token tools.
- AI Pack: AGENTS.md, DESIGN.md, a component catalog, llms.txt and a shadcn theme, so AI agents follow your system. See AGENTS.md and the AI Pack.
More with UIX Pro
Pro adds the other 17 formats. In the Figma plugin, Pro also adds:
- Download all (.zip): every format in one download.
- GitHub sync: push a pull request with your tokens, or pull changes back.
See every plan detail on Pricing, and a tour of the formats on Generator page.