See it as a real product.
Then make it yours.
Every preset, shown across ten real screens and components. Open one to try it in light and dark.
Loading presets…
How a preset is made
Taste first, then the rules. A preset that fails a check never ships.
A brief
A real kind of product, who it is for and how it should feel. Banking for freelancers. A calm telehealth app at night. A loud, playful fitness club.
A whole system
From that brief: brand, neutral and status colors in 11-shade ramps, a font pairing, a radius, spacing and shadows. Light and dark, from the start.
A second, critical pass
Every preset was reviewed again with an art director’s eye: clashing colors calmed down, weak hierarchy made clearer, bland ones given a stronger character.
The checks
Text passes 4.5:1 and UI 3:1 contrast in both modes. Action and danger colors stay clearly apart. Scales stay in order. Anything that fails is fixed or dropped.
One preset, everywhere you build
The same colors and type, in Figma, in your code, and in the AI tools that write it.
In Figma
Open UIX, go to Presets and press Use this preset. It becomes your own system: edit anything, then sync variables, text styles, components and docs.
In code
A Tailwind v4 and shadcn/ui theme, plus W3C design tokens. Free presets install with one npx shadcn add command.
For AI agents
Every preset ships a DESIGN.md that Claude Code, Cursor and other coding agents read, so they build with your colors and type instead of guessing.
Questions about presets
Are the presets free?
41 presets are free, with every file. The other 210 come with UIX Pro, the same plan that unlocks every Pro feature in the plugin.
How do I use a preset in Figma?
Install UIX from Figma Community, open the Presets tab, pick a preset and press Use this preset. Its colors, fonts, spacing and radius load into your system. Check it, then press Sync to Figma.
Can I use a preset without Figma?
Yes. Free presets come with a shadcn/ui install command, a Tailwind v4 theme, W3C design tokens and a DESIGN.md for AI coding agents.
Can I change a preset after I load it?
Yes. Once it is loaded it is your system. Change any color, font or token, and undo the whole preset in one step if you change your mind.
Start from a point of view.
Free to start in any Figma file. UIX Pro unlocks all 251 presets.