uix-uiFigma
UIX for Figma is the sister product. It builds the same design system in Figma, with the same names as the code.
UIX for Figma
UIX for Figma is a separate product, a plugin for Figma. It turns one brand colour into a complete design system inside your file: colour scales, type, tokens, light and dark themes, components and documentation, all as native Figma variables and styles.
uix-ui is its sister. The components here come from the same generator, so what you design in Figma and what you ship in React stay in step. You can use either one without the other.
See the Figma plugin, or read about UIX Pro. One Pro key works for both products.
The same names
A component, a variant and a size have the same names in both places. Read a Figma layer name and you know the code.
| In Figma | In code |
|---|---|
| Button / Primary / md | <Button variant="primary" size="md"> |
| Button / Outline / lg | <Button variant="outline" size="lg"> |
| Button / Destructive / sm | <Button variant="destructive" size="sm"> |
Button has the variants primary, secondary, soft, outline, ghost, destructive and link, and the sizes sm, md and lg. See every component on the components page.
Tokens and code
The plugin can export your design system as CSS variables or Tailwind v4 tokens for free. The React export, which writes components like the ones in uix-ui, is part of Pro.
UIX_LICENSE=<key> npx uix-ui add hero.Bring your own system
You do not have to use a preset. Make your system in the UIX Figma plugin, then install it as your own theme. With Pro, your components follow your own sizes, shapes and styles too.
Prefer to start from a ready-made look? Pick a theme and change tokens in your own CSS, as described in theming.
npx uix-ui init --preset lagoon-stretch