violet-600inkSynced
Colors
OKLCH scales with 11 shades per color, and contrast checked on every one.
Figma plugin
Real variables and components, not pictures.
UIX Design System Generator builds your colors, type, tokens, themes and 74 components inside Figma as real variables, styles and component sets. Pick a color, preview the changes, press Sync.
Works in any Figma file. Nothing changes until you press Sync.
#6D2DDA
Variables
Styles
Components
Variables
Styles
Components
UIX at a glance
The plugin in six facts.
What it is, who it is for and what goes in and out.
- What it is
- A Figma plugin that builds a design system from one color.
- Who it is for
- Designers and teams who want variables and components that match their code.
- Input
- A brand color, one of 251 presets, or a system saved on the web.
- Output
- Variables, styles, 74 component sets and code in 21 formats.
- Works with
- Any Figma file, plus Claude Code, Cursor and other agents over MCP.
- Price model
- Free to start. Pro adds everything.
What you get
Everything a design system needs, made in Figma.
Six things land in your file when you sync, and the plugin never touches the rest of it.
6.9:1contrast
Type and tokens
50 font pairings and separate Desktop, Tablet and Mobile text styles. Spacing to motion as variables.
Dark modeChecked for AA
Themes
Light, dark, high-contrast and multi-brand themes as variable modes.
How it works
Three steps, in the file you already have.
Install it, choose a start, check the preview and sync. Run it again later and only the changes move.
1. Install and open it
Get the plugin from Figma Community and open it from Plugins in any design file.
tealvioletamber
2. Pick a preset or your color
Start from one of 251 presets, your brand color or a system saved on the web.
preview
- + 142 variables
- + 9 text styles
- + 74 components
3. Preview, then sync
See what will be created or changed before anything moves.
In depth
What the plugin does once it is in your file.
Each part is a real Figma object you can edit, publish and reuse.
sets74 componentsstyles10 looks
Components
74 component sets in 10 styles and 3 corner shapes, plus page templates. They use your variables, so a color change reaches every one.
See the componentsexport
- $ tokens.css
- tailwind theme
- design tokens
Code export
21 formats, including React and an MCP server. Download a .zip or sync to GitHub. Four formats are free.
See code exporthealth scoreFixed
guidelines
- style Bold
- Corporate · Swiss
- Glow · Bento
Brand guidelines
Five styles: Bold, Corporate, Swiss, Glow and Bento. Preview every slide, then add it to Figma.
Keep mineImport first
Safe on existing files
It can import the variables and styles you already have, updates its own in place and never duplicates them.
6sizes
Social posts
Paste rows from a sheet and get one post per row, in 6 sizes. Works in Figma Buzz.
For AI agents
Your agent follows the same system.
The plugin exports an AI Pack and an MCP server, so Claude Code, Cursor and v0 build with your tokens.
The AI Pack and MCP server
Files and a small server that tell your agent which colors, type and components to use. See how agents connect.
For AI agentsPlans
Free to start. Pro when you need everything.
The Figma file, React components and Icons are separate one-time buys. All plans are on the pricing page.
Free
$0 forever, no card
- 1 saved design system
- Colors, type, tokens and a light theme
- 41 free presets and 12 core components
- 4 code formats
Pro
$5.99 a month, after a 7-day free trial
- All 251 presets and 74 components
- Dark, high-contrast and multi-brand themes
- All 21 code formats, brand guidelines, unlimited fixes
- 25 versions per file, 3 devices per license
Questions
Questions people ask.
Short answers about the plugin, your files and plans.
Ask us anythingWhat can I do for free?
Make colors, type and tokens with a light theme, use the 41 free presets and the free components, and export 4 code formats: CSS, Tailwind v4, W3C tokens and AI Pack. Pro adds every preset and component, dark, high-contrast and multi-brand themes, brand guidelines, unlimited audit fixes and version history.
Will it mess up my existing Figma file?
No. The plugin can import the variables and styles you already have, shows a preview of every change before syncing, and updates its own variables in place. Nothing is duplicated, and you can sync one part, such as only colors.
Are these real variables and components?
Yes. Colors, spacing and themes become Figma variables with modes. Type becomes text styles. Each of the 74 components is a component set that uses those variables, so changing a variable changes the component.
Do I need the web version too?
No. The plugin works on its own. If you sign in with the same UIX account, you can pull in a system you saved on the web and send the same one to code.
Can I get the code too?
Yes. The plugin exports 21 formats, including React and an MCP server. Four are free: CSS variables, Tailwind v4, W3C design tokens and the AI Pack.
How many devices can I use?
One license works on up to 3 devices. Pro starts with a 7-day free trial, and you can ask for a full refund within 14 days of your first payment.
Start with one color.
Free to start. Your designers, your developers and your AI agent get one system to follow.
Figma
tokens.css
Agent