Design systems

102: How to build

your design system
Contents It’s time to build your design system! We’ll walk you
through the basics of creating a system tailored to
Lay the groundwork → your unique goals and challenges, whether building
from scratch or starting with existing pieces.
Define your foundations →
A well-crafted design system is a powerful tool for teams
Build your design system in Figma → looking to create cohesive, scalable, and efficient designs.
By establishing a shared language and a library of reusable
components, a design system ensures consistency across your
products, speeds up your workflow, and frees up your team to
focus on solving user problems.

But to truly harness the power of a design system, you need to

know how to effectively build and implement one. That’s easier
said than done. In this guide, we’ll break down the process of
building a design system into clear, actionable steps. From
defining your principles and laying the groundwork to creating
and organizing your design assets, we’ll cover best practices
and real-world examples to help you create a system that
empowers your team and elevates your product.

Design systems 102: How to build your design system 2

Step 1: Lay the
groundwork
There are many reasons why a design system might
be helpful for your team or organization. Before
diving into creating components and patterns,
it’s important to understand why you’re building
a design system and what problems you hope to
solve. Maybe you’ve noticed that your product looks
inconsistent across different platforms, or that
making updates is a manual and time-consuming
process. Perhaps you want to make collaboration
easier, get everyone on the same page, or help new
team members get up to speed quickly.

Design systems 102: How to build your design system 3

Whatever your reasons, take a moment to clearly define
your goals by answering these key questions:
• Why do you want a design system?
• What specific problems will it solve?
• How will you know if it’s successfully solving
those problems?

Design systems can be helpful for teams of all sizes and

experience levels. The truth is: not everyone needs a
complex, enterprise-level design system. If you’re a beginner,
early in your career, or working with a small team on a
limited number of brands or products, a simpler system
with a handful of reusable templates and components might
be all you need to streamline your workflow and maintain
consistency. As your projects and team grow, your design
system can evolve to match your changing needs.

The key is to create a system that makes sense for your

specific situation—whether that’s a comprehensive system
for managing multiple products, or a simple set of reusable
elements for a small team. Remember, design systems aren’t
one-size-fits-all. They exist on a spectrum, and can be useful Do we need a
for everyone from freelancers to large enterprises. Design System?

Jesse Showalter chats with Dan

At this early stage, the most important thing is to get
Mall about why design systems
everyone on the same page about what a design system matter and how to know if your
means for your organization, and why you’re investing in one. organization really needs one.

Design systems 102: How to build your design system 4

Take stock of Organize and Find your
what you have valuate champions
Once you’ve aligned on your goals, it’s time to take a closer With your inventory in hand, it’s time to make sense of Building a design system is a team effort, so start recruiting
look at your existing product landscape. Start by gathering what you’ve found. Start by organizing your screenshots advocates early on. Seek out people who are passionate
and cataloging all the different elements you’re currently and examples into categories. Then, take a step back and about design consistency, or who have experience with
using: colors, typography, icons, components, patterns, evaluate the big picture. What does your current design design systems. Don’t limit yourself to just the design
you name it. Screenshots are your best friend here! language look like? Are there opportunities to standardize team—reach out to developers, product managers,
Capture examples of your product across different platforms and streamline? customer support, and people working in other areas of the
and devices, and don’t forget to include any interactive business. Getting diverse perspectives will help ensure your
states or alternate versions. Chances are, you’ll start to Keep an eye out for inconsistencies, redundancies, or areas design system meets the needs of your entire product and
notice patterns and consistencies that can serve as the where your product feels disjointed. These are often signs organization, not just one specific group. And remember,
starting point for your design system. that a more cohesive design system could improve your many successful design systems start with a team of one!
user experience. Don’t be afraid to champion the cause yourself.

Design systems 102: How to build your design system 5

Choose your approach Align with company goals
There are two main ways to approach building your design Finally, make sure your design system initiative is aligned
system: starting from scratch with a custom solution, or with your overall company objectives. Consider factors
adopting an existing framework and adapting it to your like timing, resources, and leadership buy-in. Your earlier
needs. There are pros and cons to each. audit will come in handy here; use your findings to help
build the case for how a design system will support key
Building from scratch allows you to tailor the system to your business goals.
unique requirements, but it also requires more time and
resources upfront. Using an existing framework or open Design systems require ongoing investment, so it’s
source system can help you get up and running faster, but it important to secure stakeholder support early on.
may require more customization to fit your specific use case. Tying your system to tangible business benefits, like faster
time-to-market or improved user experience, can go a
There’s no right or wrong answer—it depends on your team’s long way in getting the resources and buy-in you need.
capabilities, bandwidth, and long-term goals. Don’t be afraid
to start small and evolve over time.

Design systems 102: How to build your design system 6

Define your
guiding principles
With the groundwork in place, you’re ready to start shaping
your design system. One of the most important early
steps is to define a set of guiding principles. These serve
as a north star for your system, keeping everyone aligned
as the system grows and evolves. Your principles should
establish the purpose and values driving your system, and
ensure that every decision ladders up to your organization’s
broader goals. Aim for a small set of memorable, actionable
statements that can be easily referenced and applied.

Here are a few tips for crafting effective design principles:

1. Start with the “why.” What core belief or value is driving
this principle?
2. Be specific. Provide concrete examples and guidelines for
how to apply the principle in practice.
3. Keep it actionable. Principles should translate into tangible
practices, not just documented intentions.

Let’s say accessibility is a core priority for your team.

Discover your principles with your
A principle around designing for inclusivity might include
team using this FigJam template.
guidelines like accounting for different vision and hearing
abilities, testing contrast and legibility, or following the
latest accessibility standards. The more specific and
actionable, the better.

Design systems 102: How to build your design system 7

Leverage the wealth of knowledge within your organization
as the foundation for your design principles. Take a look
at the existing resources and guidelines within your
company—things like brand standards, voice and tone
guides, marketing strategies, or even customer support
playbooks. Use these as a starting point, and work with
cross-functional partners to ensure yours are in sync with
the bigger picture. The goal isn’t just to create a set of
generic principles, but to articulate the unique priorities
and beliefs driving your specific organization and product.

Defining principles:

This series builds on our Introduction to design systems course,

which follows the Habitz team as they establish their core
principles and translate them into concrete design guidelines.

Design systems 102: How to build your design system 8

Step 2: Define
your foundations
The foundations of your design system are the essential visual
and functional elements that form its base. They include crucial
aspects like accessibility, color, typography, iconography,
illustration, and dimensions. These elements work together
to create a strong, consistent design language that’s easy for
people to use and understand.

Measuring ROI:

Learn how Stash builds financial

products that customers can trust by
using Figma components and Ditto to ship
out copy updates—speeding up their work
by 20% and saving over 12,000 hours.

Design systems 102: How to build your design system 9

Make your design
accessible to everyone
Accessibility means making sure everyone can use and
understand your product, regardless of their abilities.
This is everyone’s responsibility, and it should be a core
part of your design system principles. When creating your
design system, consider elements like font sizes, color
contrast, and how components are labeled and organized.
It’s crucial to communicate both how and why your design
system assets are intended to be used when creating
product experiences that meet accessibility standards.
By prioritizing accessibility from the beginning and providing
clear guidelines, you lay the foundation for a more inclusive
product that everyone can enjoy. However, remember that
having an accessible design system doesn’t automatically
guarantee an accessible product. It’s an ongoing effort that
requires commitment from the entire team.

Supercharge accessibility:

Try Stark’s Contrast & Accessibility plugin

to help you streamline your accessibility
workflow. To ensure your colors are accessible,
explore plugins in the Figma Community and
follow Web Content Accessibility Guidelines.

Design systems 102: How to build your design system 10

Choose colors that
work well together
Color is a powerful tool in design. It can evoke emotions,
create visual interest, and guide people’s attention. When
selecting colors for your design system, aim for a balanced
palette that’s not too limited, but also not overwhelming.
Consider how your colors will look in different modes
(like dark mode) and across various products to maintain
a consistent brand experience.

To simplify your color palette, look at your team’s existing

designs and consolidate similar shades. Reducing the
number of colors used for primary buttons, for example,
can make your design feel cleaner and more intuitive.
A good rule of thumb is to start with 60% neutral colors,
30% primary colors, and 10% secondary or accent colors.

Ultimate colour palette:

Check out this color palette system from

Untitled UI, a purposeful set of neatly-
organized color styles—the perfect starting
point for any brand or project.

Design systems 102: How to build your design system 11

Pick typography
that’s easy to read
and fits your brand
Typography is another key element of your design Ready to Scaaale?
foundation. Choose fonts that are easy to read, match For type scale, use plugins like
your brand personality, and work well together. Typescale by Sam Smith, or Scaaale
Pay attention to details like letter spacing, weight, (with three A’s) by Nicolas Massi.
and line height to create a pleasant reading experience.
Establish a consistent set of font sizes and line heights
when defining your type scale, commonly set around a
Lorem ipsum
base size of 16 pixels. You may also want to organize your
type scale by its intended application in mind, such as
Lorem ipsum
Lorem ipsum
‘display’ or ‘title,’ or opt for a more primitive naming such
as ‘heading-100.’

Design systems 102: How to build your design system 12

Use elevation to create
visual hierarchy
Elevation refers to the use of shadows, layers, and
transparency to create depth and order in your design.
For example, cards can appear slightly raised off the page,
or a dialog box might become a focal point by seeming to
float above everything else through the use of shadows.
Subtle shadows on fixed navigation bars or inset shadows
on navigation drawers can also indicate their position
relative to the page. Elevation can help you structure your
design, guiding users to understand which elements are
primary and which are secondary, in an intuitive way.

Create consistent and

Microsoft, Figma Community:
meaningful icons See how the Microsoft team
uses their Fluent icon system
Icons are small visual symbols that communicate ideas and across their products. The Fluent
actions quickly. A well-designed icon system strengthens icons include rounded corners,
your brand identity and improves usability. Make sure your simplified shapes, and come in
icons are clear, consistent, and maintain their meaning even regular and filled.
when styled differently. Use an icon grid to ensure consistent
sizing and alignment, and provide descriptive names and
search terms to make them easy to find and use.

Design systems 102: How to build your design system 13

Apply tokens using
variables and styles
In Figma, you can use variables and styles to create a
consistent and scalable design system. Variables and
styles help define the core elements that can be reused
across your designs. They are most commonly categorized
into two primary types:
• Primitives: These are your design system’s basic building
blocks, like colors, spacing, and sizing. They form the
foundations of your design but aren’t used directly in
components or layouts.
• Semantic: These provide a meaningful context for how
a variable or style should be used. For example, you may
have a color variable called “color-background-warning”
to convey a sense of urgency or potential danger. Semantic
variables primarily alias primitive values behind the
scenes, but they can also accept raw hex codes, numbers,
or strings.
When naming your variables and styles, it’s important
to use clear and consistent conventions. Design system
contributor, Nathan Curtis, suggests combining a base (like
color or size) with modifiers (like variant or state) to create
names that are easy to understand and use. The goal is to
create a shared convention that everyone on your team can
use to communicate and work more efficiently.

Design systems 102: How to build your design system 14

Use layout grids and Rows
Baseline grid that highlights line heights

spacing to create Count Color

visual harmony 100 FF0000 10%

Type Height Offset

Layout grids, spacing, and sizing (referred to collectively
Top 16 0
as “spatial systems”) are like the invisible glue that holds
your design together. They create a sense of structure, Gutter

consistency, and visual harmony that makes your product 16

feel polished and professional.
• Layouts: Define how your design adapts to different
screen sizes and devices, ensuring a consistent experience
across all platforms.
Baseline grid that highlights baselines
• Grids: Use column grids, baseline grids, and modular grids Rows

to align elements consistently and create a clear visual

hierarchy. Count Color

• Spacing: Define consistent spacing units to control the 100 FF0000 30%
distances between elements and create a balanced,
Type Height Offset
readable layout.
Top 16 0

Many types of grids that can be used to create the backbone

Gutter
of your layout:
0
• Column grids divide the screen into vertical sections,
making it easy to align elements and maintain a consistent
look across different devices.
• Baseline grids control the vertical spacing between
elements, typically aligning with the baseline of your text.
• Modular grids combine both column and row divisions to The grid settings above illustrate how you can take
create a flexible structure for more complex layouts. different approaches to styling a baseline grid.
Design systems 102: How to build your design system 15
Effective spacing is crucial for creating visual hierarchy and However, just having a system in place doesn’t guarantee
relationships between elements of a design. By using consistent that everyone will use it perfectly. It’s like having a recipe
spacing units, you create a sense of harmony and balance book—it’s super helpful, but it’s up to the chef to follow the
throughout your product. instructions and create a delicious meal. That’s why it’s so
important for designers to understand and embrace the
By providing pre-built layout components and templates, your spatial system. When designers understand why consistent
design system can help teams create responsive and adaptive spacing and layout matter, they’re more likely to create
designs more efficiently. These components are built with a designs that look and feel great for users.
set of predefined breakpoints that determine how the layout
changes at different screen sizes. For example, your design Figma’s design system features, like layout grids and styles,
system might include a “hero” component that showcases a make it a lot easier for teams to stick to a spatial system
key message or product. By providing different layout variations across all their projects. By providing a single source of truth
for various screen sizes, you ensure that the hero always looks for grids, spacing, and layout components, Figma helps
great and maintains its visual hierarchy, whether viewed on everyone stay on the same page and apply the spatial system
a phone or a desktop computer. This approach helps teams consistently. The result? User experiences that feel cohesive
focus on creating great product-specific designs, rather than and intuitive, no matter where someone is interacting with
reinventing the wheel for each responsive layout challenge. your product or brand.

At the end of the day, a spatial system is an incredibly valuable

tool, but its effectiveness depends on designers using it
correctly. By teaching designers about the benefits of the
spatial system and encouraging them to use it consistently,
teams can unlock its full potential.

Intro to variables: Remember, a spatial system is meant to inspire and guide

your designs, not limit your creativity. As you apply the spatial
Watch this Figma tutorial to better understand system to your work, always keep your users’ needs and
how variables work, and how to use them
to represent design tokens and account for experiences at the forefront, using the guidelines as a helpful
different modes and themes. framework rather than a set of strict rules.

Design systems 102: How to build your design system 16

Step 3: Build
your design
system in Figma
Building a design system in Figma is all about
creating a consistent, efficient, and scalable way
of working across your entire project. It’s like
creating a set of building blocks that everyone on
your team can use to create designs that look and
feel cohesive. Here’s a step-by-step guide to help
you get started.

Design systems 102: How to build your design system 17

Take a closer look at your Choose clear and
existing designs consistent names
Remember that initial audit you did, where you looked at all When naming your components and variables, it’s important
your existing designs and broke them down into individual to choose names that reflect their function, rather than how
elements? It’s time to revisit that. Start by defining your they look or how they’re coded. This makes them easier
variables and styles, which are like the basic building to understand and use correctly. Use semantic naming,
blocks of your design. This includes things like colors, which means choosing names that reflect the meaning
fonts, spacing, layout, and any special effects like shadows. and purpose of the element. For example, you might use
By creating a set of predefined styles, you ensure that something like “color-warning” with an alert message,
everyone on your team is using the same design elements or “surface-primary” for the main background color of your
consistently across all your projects. app. Include details like the category and any variations in
the name, such as “color-text-secondary” on your secondary
Next, define your components. Components are like headline color.
pre-made building blocks that you can reuse throughout
your designs. They can be simple things like buttons and When it comes to naming cases, there are a few different
icons, or more complex elements like modals and navigation approaches you can take. Hyphens (like “primary-button”)
bars. Break these components down into their most basic and camel case (like “primaryButton”) tend to be the most
parts, and then build them up into more complex structures. commonly used. If you’re not sure which naming convention
to use, talk with your development team to learn about any
existing conventions in your organization that you could also
align with.

Explore component properties:

Component properties are the changeable

aspects of a component. You can define which
parts of a component others can change by
tying them to specific design properties.

Design systems 102: How to build your design system 18

Organize your
Figma library
One of the great things about Figma is that you can share
libraries across different files and projects. This means that
everyone on your team can access the same set of styles Explore component properties:
and components, no matter what they’re working on.
When setting up your library, think about what structure Hear how Onfido, a technology
will work best for your team. You might want to keep company that helps businesses with
verification, organizes their design
everything in a single file, so that everyone is always system teams, projects, and files.
working from the same “source of truth.” Or, you might
prefer to split things up into multiple files for different
parts of your project. Consider how your team likes to
work together, and how both your design team and your
development team will be using the library.

Remember, building a design system in Figma is an

ongoing process. It’s something that will grow and evolve
along with your team and your projects. Start by laying a
strong foundation, and encourage everyone on your team
to contribute and help improve your design practices over
time. As your system matures, it becomes an integral,
evolving part of your workflow, infused with your collective
expertise and creativity.

Design systems 102: How to build your design system 19

How to build your
design system
If you want to learn more about the nitty-gritty of building a
design system in Figma, check out our step-by-step walkthrough.

Figma walkthrough →

Design systems 102: How to build your design system 20