Figma-first kits start from the design file. Untitled UI is the largest of them, and the proposition is appealing: one system, thousands of screens and components, with the code as an export of the design rather than a separate artefact.
What survives the handoff is the interesting question, because the answer is "the visual language, and much less of the structure than the file implies".
What transfers
The visual language. Type scale, spacing, colour and the shapes of things. This is the genuinely valuable part, and it transfers well because it is a token set at heart, which the theming guide shows is exactly what a code design system needs.
The inventory. Knowing which components a product needs is half the work of building one, and a comprehensive kit is a good specification even when none of its code is used.
The screen compositions. Layouts, page structures, the arrangement of a settings page or a dashboard. Those are design decisions and they port directly.
What does not
Behaviour. A Figma component has variants, not focus management. Every keyboard path, every announcement, every portal and collision behaviour is written in code from scratch, and it is the part that takes longest. This is why the primitives layer exists.
The states nobody drew. Loading, empty, error and permission are rarely in a kit, and neither are the six control states. The design file shows the happy path because that is what a design file is for.
Component boundaries. Figma's nesting is not React's composition. A "card with a button" in a design file is one component with variants; in code the question is whether the card accepts children, which is not a question the file answers.
The workable combination
Take the design system, build on code primitives. Concretely: turn the kit's type scale, spacing and colour into CSS variables, take the composition and inventory from the file, and build the components on shadcn/ui or the primitives underneath it.
That gets the part a design kit is genuinely good at without pretending its export is an application. The failure mode is the opposite order - starting from exported code and trying to make it behave - which produces components that look right and cannot be used from a keyboard.
Checking a kit before buying one
Four questions worth asking, because these kits are usually paid.
Does it ship code, and is that code a design system or a demo? Exported components and a documented React library are different products.
Does it include the states? Look for loading, empty and error in the file. Their absence tells you how much design work remains after purchase.
How are its tokens structured? A kit with a real token layer maps onto CSS variables in an afternoon. One with hardcoded values in every component does not.
What is the licence? Per project, per developer, and whether client work is covered.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| Untitled UI and similar kits | A complete visual system and inventory in one file | Behaviour and states are still yours to build |
| shadcn/ui | Code with the behaviour already correct | No design system; you bring the taste |
| Community themes | A token set to start from, free | Not a component inventory |
| 21st | Built components to fill the inventory a kit specifies | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- What transfers from a Figma UI kit to code?
- The visual language, which is a token set at heart and maps onto CSS variables well; the inventory, since knowing which components a product needs is half the work; and the screen compositions, which are design decisions and port directly.
- What does not transfer from a design kit?
- Behaviour, because a Figma component has variants rather than focus management, and every keyboard path and announcement is written from scratch. Also the states nobody drew, and component boundaries, since Figma nesting is not React composition.
- How should you combine a design kit with code components?
- Take the design system and build on code primitives: turn the kit's type scale, spacing and colour into CSS variables, take the inventory and compositions from the file, and build on shadcn/ui or the primitives beneath it. The failure mode is starting from exported code and trying to make it behave.
- What should you check before buying a UI kit?
- Whether it ships code and whether that code is a design system or a demo; whether the file includes loading, empty and error states, whose absence tells you what work remains; how its tokens are structured, since a real token layer maps in an afternoon; and what the licence covers.