# UIX Design System

> UIX Design System is a Figma plugin by Sigma Studio that turns one brand color into a complete, accessible design system — color scales, typography, design tokens, light and dark themes, 74 components, documentation and code — created as native Figma variables and styles in your file.

## Key facts

- Type: Figma plugin, installed from Figma Community. Works in any Figma file on the web, macOS and Windows.
- Made by: Sigma Studio (https://sigmastudioo.com), founder Rakib Shekh.
- Price: free plan; UIX Pro has a 7-day free trial, then costs $5.99 per month or $48.99 per year (USD, taxes added at checkout). Sold through Paddle as Merchant of Record. One license works on up to 3 devices. 14-day refund on the first payment. Launch price: 50% off until April 10, 2027; subscribers who join before then keep their price. After that the regular price is $11.99 per month or $97.99 per year.
- What it creates in Figma: variable collections for primitives (color scales), theme (light and dark modes), typography and dimensions; text styles for Desktop, Tablet and Mobile; effect styles (shadows, glass, glow); a documentation page; 74 token-bound components in 10 visual styles (Modern, Glass, Neumorphism, Brutalism, Neon, Clay, Gradient, Minimal, Tonal, Skeuomorphic).
- Color: 11-step OKLCH scales for brand, neutral and feedback colors, with WCAG contrast checks on every shade, a library of 34 palettes, palette from a logo or image, APCA and color-blind preview. All free.
- Typography: 50 font pairings, modular type scales; Tablet and Mobile sizes are Pro.
- Free web generator: https://uixdesign.pagestro.com/generate/<hex> (e.g. /generate/962e65) turns one color into OKLCH scales, light and dark tokens, a WCAG 2 + APCA contrast receipt for every text pair, and Tailwind v4 / CSS / DTCG / DESIGN.md code. The full editor (no Figma needed) is at https://uixdesign.pagestro.com/studio/.
- Code export (21 formats): CSS variables, Tailwind v4, W3C DTCG / Style Dictionary and AI Pack (free); React, MCP server, SwiftUI, Android XML, Jetpack Compose, Flutter, WordPress, Elementor, Webflow, email, SCSS, Tailwind v3, Tokens Studio, UIX JSON, Markdown, HTML style guide and a docs website (Pro). Pro can also open a GitHub pull request.
- Other tools: design system audit with health score and one-click fixes, part-by-part sync (e.g. only colors), version history, optional AI brand generator using the user's own API key.
- Privacy: the design system lives in the user's Figma file; it is not uploaded to UIX servers.

## Free vs Pro

- Free: the full color engine (OKLCH, palettes, palette from a logo or image, APCA, color-blind preview); light theme with semantic tokens; the full type scale; every token type; 12 core components (Button, Icon Button, Input, Select, Checkbox, Radio, Switch, Badge, Avatar, Card, Alert, Tabs) in the Modern style with all 3 shapes; brand guidelines (preview all 5 styles, add Bold or Corporate to Figma with 3 applications); social posts (2 templates, Instagram post size, up to 6 posts per run, in Figma Design and Figma Buzz); code export to CSS, Tailwind v4, W3C DTCG and AI Pack; audit with 3 one-click fixes per scan; a docs page in Figma with UIX branding; 1 saved system and the last 3 versions.
- Pro: everything in Free plus dark, high-contrast and multi-brand themes with Material 3, shadcn and UIX Extended presets; responsive Tablet and Mobile type; all 74 components in 10 styles and page templates; all 5 guideline styles, all 14 applications, PDF, PNG and HTML export and a brand book website; all 8 social templates, 6 sizes, up to 120 posts per run and "My Figma design" fill; all 21 code formats including React and MCP server, Download all (.zip) and GitHub sync; unlimited audit fixes, Make components and bulk rename; white-label docs and docs export; unlimited saved systems and up to 25 versions per file; AI assistant.

## Sister product: uix-ui

- [uix-ui](https://uixdesign.pagestro.com/ui) is a separate, open-source React component library from the same team (MIT licence). React + Tailwind v4, 64 components with the same names as the components the UIX plugin builds in Figma, 41 free themes plus the UIX default, installed through its CLI, the shadcn registry or MCP. It does not need the Figma plugin; the plugin does not need it.

## Links

- [Home](https://uixdesign.pagestro.com/): product overview, features, FAQ
- [Pricing](https://uixdesign.pagestro.com/pricing): plans, full feature comparison, billing FAQ
- [Presets](https://uixdesign.pagestro.com/presets): 251 ready design systems (41 free), each with color ramps, a font pairing and radius that pass WCAG AA in light and dark; catalog JSON at /registry/index.json; free presets ship DESIGN.md, a Tailwind v4/shadcn theme, W3C tokens and a shadcn install item (/registry/r/<id>.json)
- [Services](https://uixdesign.pagestro.com/services): done-for-you design systems by the UIX team — audit from $299, DS Starter in 48 hours for $990, DS Pro from $2,490, brand kit add-on $490, monthly care from $490/mo
- [Features](https://uixdesign.pagestro.com/features/): one page per feature —
  [Colors](https://uixdesign.pagestro.com/features/colors), [Typography](https://uixdesign.pagestro.com/features/typography), [Tokens](https://uixdesign.pagestro.com/features/tokens), [Themes](https://uixdesign.pagestro.com/features/themes), [Components](https://uixdesign.pagestro.com/features/components), [Code export](https://uixdesign.pagestro.com/features/code-export), [Audit](https://uixdesign.pagestro.com/features/audit)
- [Guide: How to create a design system in Figma](https://uixdesign.pagestro.com/guide/create-a-design-system-in-figma): 11 steps from an empty file to code
- [Install on Figma](https://www.figma.com/community/plugin/1632177375200350305)
- [Buy UIX Pro](https://uixdesign.pagestro.com/checkout)
- Support: support@uixdesign.pagestro.com
- [Terms](https://uixdesign.pagestro.com/terms), [Privacy](https://uixdesign.pagestro.com/privacy), [Refunds](https://uixdesign.pagestro.com/refunds)