How to make a UI kit in Figma: a step-by-step guide for beginners

Step 1

Decide what the kit is for and what goes in it

A UI kit is always made for something specific: a mobile app, a website, a user dashboard. Pick a learning product, such as a barber booking app or a habit tracker, and sketch two or three key screens. Then list every element that repeats on them. That's your kit list:

• •foundations: colors, fonts, spacing, corner radii, shadows;
• •basic elements: buttons, input fields, checkboxes, toggles, icons;
• •larger blocks: a card, a list item, a top bar, bottom navigation, a modal.

💡 Don't add components "just in case". A small kit where every component is actually used is more useful than a big one where half of them sit idle.

Step 2

Plan the file structure

A tidy kit is easy to read even for someone opening it for the first time. Split the file into pages: Cover (with the name and version), Foundations (color, text, spacing), Components (all components) and Examples (screens built from the kit). Use slashes in component names: in Figma each "/" creates a new level in the Assets panel and in the instance swap menu.

• •example names: Icon/Arrow, Icon/Close, Navigation/Top bar, Navigation/Tab bar;
• •one language and one naming style throughout the file — English, as is usual in teams;
• •a short text label next to each component: what it is and where to use it.

Step 3

Build the foundation: styles and variables

Before drawing buttons, fix your base values. Figma has five types of styles: color, text, effect, layout guide and animation. For a kit, the first three plus variables for spacing are enough. Show everything on the Foundations page: named color swatches, an example of each text style and the spacing scale.

• •colors: primary, accent, error, success and warning, plus neutrals for text, lines and backgrounds;
• •text styles: two or three heading levels, body text, a caption and button text;
• •effects: one or two shadows for cards and modals;
• •spacing and radii: a small scale, for example 4, 8, 12, 16 and 24 px.

💡 Check text contrast against backgrounds at this stage: Figma's color picker has a Check color contrast button. Fixing a color in a style now is cheaper than fixing it later in every component.

Step 4

Build components with variants and properties

Select your layers and create a component: Create component in the right sidebar, or Option + Cmd + K (Mac) / Ctrl + Alt + K (Windows). Make states and types variants: in Figma a variant name looks like Property=value, for example State=Hover, Size=Large. Use component properties for small settings so you don't multiply variants:

• •Boolean: show or hide a layer, such as an icon in a button;
• •Text: text that can be changed right in the right sidebar;
• •Instance swap: a nested component that can be replaced, such as an icon;
• •Slot: a flexible area where you can add your own content in an instance, such as a modal body or list items.

💡 Figma recommends not grouping different icons as variants of one component. Each icon is its own component, and you swap it inside a button with Instance swap.

Step 5

Test the kit on screens and share it

On the Examples page, build two or three new screens using only instances from the kit. Make the texts longer, switch states, remove icons. If something breaks or you have to detach an instance, go back to the component and fix it. To use the kit in other files you publish it as a library, which is available on paid plans and the Education plan. On the free Starter plan, keep the kit and your working screens in the same file.

💡 Share a link to the file in the community and ask someone to build one screen from your kit. Wherever they get stuck is the best list of fixes.