If you’ve ever opened a fresh Figma file and felt overwhelmed by the idea of building a scalable design system, you’re not alone. Most tutorials skip the practical “where do I actually click?” details. In this walkthrough, we’ll show you how to create a design system in Figma from scratch, using a clear, repeatable process that works whether you’re a solo designer or part of a growing product team.
By the end of this guide, you’ll have a working library with color tokens, text styles, reusable components, and variants ready to power real product screens.
What Is a Design System (and Why Build One in Figma)?
A design system is a single source of truth that brings together your visual language, UI components, and the rules that govern how they’re used. In Figma, this typically includes:
- Design tokens (colors, spacing, typography values stored as variables)
- Styles (color styles, text styles, effect styles)
- Components and variants (buttons, inputs, cards, etc.)
- Documentation pages describing usage rules
Figma is ideal for this because of native variables, auto layout, variants, and the ability to publish libraries that teams can consume across files.
Step 1: Set Up Your Figma File Structure
Before drawing a single rectangle, organize your workspace. A clean structure saves hours later.
- Create a new team project called “Design System”.
- Inside, create three files: Foundations, Components, and Patterns.
- In each file, use Figma pages to separate concerns: Cover, Changelog, Tokens, Colors, Typography, Spacing, etc.
This separation lets you publish foundations independently from components, so updates don’t break everything at once.
Step 2: Define Your Design Tokens with Figma Variables
Tokens are the atomic decisions of your system. In Figma, variables let you store and reuse them across themes and modes (light/dark, brand A/brand B).
Color tokens: a two-tier approach
Use a primitive layer and a semantic layer. This is the most flexible setup and is now considered best practice.
- Primitive tokens: raw values like
blue/500,gray/100 - Semantic tokens: contextual meaning like
background/default,text/primary,border/subtle
Semantic tokens reference primitive tokens. When you switch to dark mode, only the semantic layer changes, not your components.
Naming convention example
| Layer | Token Name | Value |
|---|---|---|
| Primitive | color/blue/500 | #3B82F6 |
| Semantic | color/action/primary | {color/blue/500} |
| Semantic | color/text/onPrimary | {color/white} |
Spacing and radius tokens
Create a number variable collection for spacing using a 4 or 8 point scale:
- space/0 = 0
- space/1 = 4
- space/2 = 8
- space/3 = 12
- space/4 = 16
- space/6 = 24
- space/8 = 32
Apply these variables directly to auto layout padding and gap fields.
Step 3: Create Your Color Styles
Even with variables, color styles still help for gradients and complex fills. For solid colors, bind the style fill to a semantic variable so it stays in sync.
- Create a frame, fill it with your semantic variable.
- Click the four-dot style icon, then “Create style”.
- Name it using slashes for grouping: Background/Default, Action/Primary, Text/Primary.
Step 4: Build Your Type Scale and Text Styles
A consistent type scale is what makes a product feel professional. Start with a modular scale (1.125 or 1.25 ratio works well).
| Style Name | Size / Line Height | Weight |
|---|---|---|
| Display/XL | 48 / 56 | 700 |
| Heading/H1 | 32 / 40 | 700 |
| Heading/H2 | 24 / 32 | 600 |
| Body/Default | 16 / 24 | 400 |
| Body/Small | 14 / 20 | 400 |
| Caption | 12 / 16 | 500 |
Create each as a text style with the same slash naming. Avoid creating a style for every weight variation, group them logically.
Step 5: Build Your First Component (a Button)
The button is the perfect first component because it touches almost every part of your system.
Build the base
- Draw a frame, add auto layout (Shift + A).
- Set horizontal padding using
space/4and vertical padding usingspace/2. - Add a text layer using Body/Default, bind the color to Text/OnPrimary.
- Fill the frame with Action/Primary, set corner radius to
radius/md. - Select the frame and press Create component (Ctrl/Cmd + Alt + K).
Add variants
Select the component and click Add variant. Create the following properties:
- Variant: Primary, Secondary, Ghost, Destructive
- Size: Small, Medium, Large
- State: Default, Hover, Pressed, Disabled
- Icon: Boolean (true/false)
- Label: Text property bound to the button text
Naming variants consistently is critical. Use PascalCase or Title Case with comma separation, for example: Variant=Primary, Size=Medium, State=Hover.
Step 6: Naming Conventions Cheat Sheet
Consistency beats cleverness. Here’s a reliable convention you can adopt today:
| Asset Type | Pattern | Example |
|---|---|---|
| Color variable | category/role/weight | color/action/primary |
| Text style | Category/Variant | Heading/H2 |
| Component | Category/Name | Form/Button |
| Variant property | Property=Value | Size=Medium |
Step 7: Publish and Consume Your Library
- Open the Assets panel, click the library icon, then Publish.
- Write a short changelog entry so consumers know what changed.
- In your product file, click the same library icon and enable your design system.
- Drag components from the Assets panel into your designs.
Step 8: Document as You Go
A design system that nobody understands gets abandoned. For each component, add a documentation frame next to it including:
- What the component is for
- When to use it (and when not to)
- Anatomy with labeled parts
- Accessibility notes (contrast, focus states, touch targets)
Common Beginner Mistakes to Avoid
- Skipping the primitive/semantic split, which makes theming nearly impossible later.
- Creating components too early, before validating patterns in real screens.
- Over-naming styles, like having ten shades of gray with no semantic meaning.
- Not using auto layout, which kills scalability.
- Forgetting to align with code. Token names should match what developers ship.
FAQ
How long does it take to build a design system in Figma?
A minimum viable system covering colors, typography, spacing, and a handful of core components can be done in 2 to 3 weeks for a solo designer. A full production-ready system typically takes 2 to 4 months with iteration.
Should I use Figma variables or styles?
Use both. Variables handle tokens (colors, numbers, booleans, strings) and support modes like dark theme. Styles still shine for gradients, complex fills, and effects. Bind your styles to variables when possible.
What’s the difference between components and variants?
A component is a reusable element. Variants are different states or versions of the same component grouped together (for example, a button in primary, secondary, and ghost styles). Variants live inside a component set.
Can I use an existing design system instead of building one?
Absolutely. Figma Community has excellent starter kits like the Simple Design System or Untitled UI. Forking one and adapting it to your brand is often faster than starting from zero.
How do I keep my Figma design system in sync with code?
Use the same token names in Figma and your codebase. Tools like Tokens Studio, Style Dictionary, or Figma’s REST API can export your variables to JSON, which developers can consume directly.
Wrapping Up
Building a design system in Figma is less about flashy components and more about disciplined naming, smart token architecture, and consistent documentation. Start small with foundations, ship a single button with proper variants, and grow from there. The teams that succeed are the ones that treat the system as a living product, not a one-time deliverable.
Ready to start? Open Figma, create that “Design System” project, and define your first three color tokens today.