Figma plugin basics

UIX Design System Generator turns your design system into Figma variables, styles, components and a docs page, in the file you have open.

Install and run it

1. Install

   Open the UIX Design System Generator on Figma Community and add it.

2. Run it in any file

   Open a Figma file, then run UIX Design System Generator from the plugins menu. Everything it makes goes into that file.

3. Follow the three steps

   Start, Edit and Export, across the top of the plugin. They are described below.

Start, Edit, Export

The plugin uses the same three steps as Studio on the web (there they are called Create, Tweak and Use it).

Start

• Ready-made: start from a ready design system, then make it yours.
• From my brand: a brand color, a logo, a palette, or describe it to AI.
• Bring my own: from this Figma file, Tokens Studio, Style Dictionary, CSS or Tailwind.
• Saved: systems in your UIX account and on this computer.

Edit

• Colors: brand, neutral and status color scales.
• Fonts: fonts, type scale and text styles.
• Themes: light, dark and high-contrast colors for your screens.
• Spacing & sizes: spacing, radius, borders, sizing, shadows, motion and grids.
• Components: components that use your tokens.

Export

• Figma: variables, styles, components and the docs page in this file.
• Code: CSS, Tailwind, DTCG, SwiftUI, Compose, Flutter and more. See Code export.
• AI tools: files and a live connection so Claude, Cursor, Lovable and v0 use your system.
• Brand kit: brand kit, brand book and social posts.
• Check my file: find hard-coded values and see which tokens are used.

Brand kit and Check my file work only on the Figma canvas, so Studio on the web doesn’t have them.

What it adds to your file

• Variable collections for primitives (your color scales), the theme (light and dark modes), typography and dimensions.
• Text styles for Desktop. Tablet and Mobile styles are Pro.
• Effect styles for shadows, glass and glow.
• A docs page that documents your system.
• Component sets on the Components page, bound to your variables. See Components.

You don’t have to rebuild everything each time. Choose what to sync:

Open systems from your account

Systems you made on the website or with your AI agent can open in Figma.

1. Ask for a code

   In the plugin, go to Start → Saved and press Open from my UIX account. The plugin shows a short code.

2. Enter the code

   Open useuix.com/device and sign in. Under Connect the Figma plugin, type the code and press Connect.

3. Open a system

   Back in the plugin, your saved systems are listed. Press Open next to one. It replaces the system in this file. You can undo this.

4. Save changes back

   Press Save to “name” to update the system you opened, Save as new to keep both, or Save to my account for a system that isn’t saved yet. On Free, which keeps one saved system, you can choose to Replace it.

Check my file

Check my file scans your file for hard-coded values, like colors typed in by hand, and shows which tokens are used. Free fixes 3 issues per scan in one click. Pro fixes everything at once and adds the accessibility report.

UIX Pro in Figma

• UIX Pro starts with a 7-day free trial. After checkout you get a license key to paste into the plugin.
• One key works on 3 devices. The plugin checks it once a day and keeps working for 7 days without a connection.
• Free keeps 1 saved system and its last 3 versions. Pro keeps as many systems as you like, with 25 versions per file.

Plans and prices are on Pricing. For a full walkthrough, read How to create a design system in Figma.