How to Build a UI Kit in Figma

A UI kit is a collection of reusable design elements — color styles, text styles, components — organized so you can build new screens quickly without starting from scratch each time. It's different from a design system in scope: a design system includes documentation, usage guidelines, coded components, and governance. A UI kit is the Figma file part.

Building your own is the right call when you need something custom to your brand. Buying one is faster when your visual language is flexible and you'd rather spend your time on product decisions.

Here's how to build one from scratch.

What to include

A complete UI kit has four layers:

Color styles. All the colors in your palette, defined as Figma styles (or variables in newer Figma). Not just brand colors — all the semantic roles too: backgrounds, surfaces, text colors, interactive colors, feedback colors.

Text styles. Every text style in your type system — headings, body, captions, labels, code blocks. Name them semantically: "Heading/XL" beats "Proxima Nova 40px Bold."

Basic components. Buttons, inputs, checkboxes, radio buttons, toggles, dropdowns, badges, tags, tooltips, modals, alerts, navigation components, cards. This is the core set that appears in nearly every product.

Icon set. A consistent icon library. You can use an existing set (Lucide, Feather, Phosphor) or custom icons, but they should be in the same file as your other components.

File organization

Use a multi-page structure:

• Cover — title, version number, last updated date
• Foundations — color styles, text styles, spacing scale, grid system
• Components — your component library
• Icons — icon library
• Templates — common page templates built from the components

Within the Components page, group by category using frames as section dividers: Forms, Navigation, Feedback, Data Display, Overlays.

Using auto layout in every component

Every component you build should use auto layout. This is non-negotiable. Auto layout makes components responsive to content changes, makes spacing consistent, and makes it far easier for anyone who picks up your file later.

The pattern: start from the smallest piece and auto-layout outward. A button starts as a text layer. Wrap it in an auto-layout frame with horizontal padding 16px, vertical padding 10px. Add the icon if needed. Wrap in another auto-layout frame if it's part of a button group.

When you're building a component, ask: if this text were twice as long, would the component still work? If no, add more auto layout.

Dealing with states

Every interactive component needs its states designed. The five essential states:

• Default — the resting state
• Hover — mouse over (only relevant for desktop)
• Focus — keyboard focus ring (critical for accessibility)
• Disabled — not interactive
• Error — for form inputs specifically

Use Figma's component variants to package all states together. A Button component should have variants for: State (default/hover/focus/disabled), Size (sm/md/lg), Type (primary/secondary/ghost/destructive), and Icon position (none/left/right).

Naming convention for variants: capitalize and use consistent values across components. State should always be called "State" and always have the same options. This makes using the kit much faster.

When to buy a UI kit instead

If your product doesn't have strong brand constraints — if you can work within a clean, neutral design language — buying a UI kit saves significant time.

Untitled UI is the benchmark for what a well-built UI kit looks like. The free version has over 100 components with full variants and a complete design system foundation. The pro version ($129 one-time or included with team) adds more components, page templates, and 4000+ icons.

Get Untitled UI

The honest comparison: building a complete UI kit from scratch takes 20-40 hours of focused work to do properly. Untitled UI costs $129 and gives you something that would take weeks to build to the same quality. For most teams and freelancers, buying is the right call. The exception: when your visual system is too custom to adapt a third-party kit, or when you're building a design system that needs to match an existing coded component library.

The naming system that prevents confusion

Name your components with a consistent hierarchy: Category/Component/Variant

Examples:

• Forms/Input/Default
• Forms/Input/Error
• Buttons/Primary/Default
• Navigation/Sidebar/Collapsed

This naming maps directly to the component picker in Figma and makes finding things fast. Document the naming convention in your Cover page so anyone joining the project later can follow the same system.