Figma Plugin Beta

Bring uicraft tokens and components into Figma

Generate selected components, create foundation variables, and move the same theme.json between Figma and the uicraft Theme Builder.

uicraft Design Tokens v0.9 beta

Foundation

Colors Typography Spacing Border Width Shadows

Generate

1 Choose components and foundations

2 Bind semantic variables

3 Export the theme file to web

What it does

A practical bridge between Figma and uicraft

The plugin is built for teams that want one token model across design and implementation instead of maintaining separate systems by hand.

Import only the parts of the design system you need instead of dropping a full library into every file.

Foundation tokens for color, typography, spacing, radius, border width, and shadows are created from the same uicraft data model.

Semantic variables map the same token names across both modes, so the design side mirrors the web theme structure.

Use the exported theme.json in the website Theme Builder and keep customization flowing in both directions.

Workflow

The plugin already covers the core path: pick foundations, generate components, then export theme data back to the site.

Open the Figma Community page and run the plugin inside a design file where you want to generate the system.

Pick token groups and the exact components you want. The plugin focuses on selective generation rather than all-or-nothing import.

Adjust colors, typography, radius, and other primitives, then keep the same structure available to the web Theme Builder.

Move theme.json into uicraft on the web side to continue iterating with the same token contract.

Start

The current beta is best suited for teams that already use uicraft tokens and want a tighter Figma workflow.

Some dark mode variable flows depend on Figma variable support and may be limited on the free Figma plan.