How to Build Your Design System | Design Systems 102 | Figma Blog (2024)

A well-crafted design system is a powerful tool for teams 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.

In our last installment, we explored the fundamentals. 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.

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.

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 for everyone from freelancers to large enterprises.

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

Take stock of what you have

Once you’ve aligned on your goals, it's time to take a closer look at your existing product landscape. Start by gathering and cataloging all the different elements you're currently using: colors, typography, icons, components, patterns, you name it. Screenshots are your best friend here! Capture examples of your product across different platforms and devices, and don’t forget to include any interactive states or alternate versions. Chances are, you’ll start to notice patterns and consistencies that can serve as the starting point for your design system.

Organize and evaluate

With your inventory in hand, it’s time to make sense of what you’ve found. Start by organizing your screenshots and examples into categories. Then, take a step back and evaluate the big picture. What does your current design language look like? Are there opportunities to standardize and streamline?

Keep an eye out for inconsistencies, redundancies, or areas where your product feels disjointed. These are often signs that a more cohesive design system could improve your user experience.

Find your champions

Building a design system is a team effort, so start recruiting advocates early on. Seek out people who are passionate about design consistency, or who have experience with design systems. Don’t limit yourself to just the design team—reach out to developers, product managers, customer support, and people working in other areas of the business. Getting diverse perspectives will help ensure your design system meets the needs of your entire product and organization, not just one specific group. And remember, many successful design systems start with a team of one! Don’t be afraid to champion the cause yourself.

Choose your approach

There are two main ways to approach building your design system: starting from scratch with a custom solution, or adopting an existing framework and adapting it to your needs. There are pros and cons to each.

Building from scratch allows you to tailor the system to your unique requirements, but it also requires more time and resources upfront. Using an existing framework or open source system can help you get up and running faster, but it may require more customization to fit your specific use case.

There’s no right or wrong answer—it depends on your team's capabilities, bandwidth, and long-term goals. Don’t be afraid to start small and evolve over time.

Align with company goals

Finally, make sure your design system initiative is aligned with your overall company objectives. Consider factors like timing, resources, and leadership buy-in. Your earlier audit will come in handy here; use your findings to help build the case for how a design system will support key business goals.

Design systems require ongoing investment, so it’s important to secure stakeholder support early on. Tying your system to tangible business benefits, like faster time-to-market or improved user experience, can go a long way in getting the resources and buy-in you need.

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. A principle around designing for inclusivity might include 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.

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.

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.

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.

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.

Pick typography that’s easy to read and fits your brand

Typography is another key element of your design foundation. Choose fonts that are easy to read, match your brand personality, and work well together. Pay attention to details like letter spacing, weight, 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 base size of 16 pixels. You may also want to organize your type scale by its intended application in mind, such as ‘display’ or ‘title,’ or opt for a more primitive naming such as ‘heading-100.’

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 meaningful icons

Icons are small visual symbols that communicate ideas and actions quickly. A well-designed icon system strengthens your brand identity and improves usability. Make sure your icons are clear, consistent, and maintain their meaning even 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.

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.

Use layout grids and spacing to create visual harmony

Layout grids, spacing, and sizing (referred to collectively as “spatial systems”) are like the invisible glue that holds your design together. They create a sense of structure, consistency, and visual harmony that makes your product feel polished and professional.

• Layouts: Define how your design adapts to different screen sizes and devices, ensuring a consistent experience across all platforms.
• Grids: Use column grids, baseline grids, and modular grids to align elements consistently and create a clear visual hierarchy.
• Spacing: Define consistent spacing units to control the distances between elements and create a balanced, readable layout.

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

• 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 create a flexible structure for more complex layouts.

Effective spacing is crucial for creating visual hierarchy and relationships between elements of a design. By using consistent spacing units, you create a sense of harmony and balance throughout your product.

By providing pre-built layout components and templates, your design system can help teams create responsive and adaptive designs more efficiently. These components are built with a set of predefined breakpoints that determine how the layout changes at different screen sizes. For example, your design system might include a “hero” component that showcases a key message or product. By providing different layout variations for various screen sizes, you ensure that the hero always looks great and maintains its visual hierarchy, whether viewed on a phone or a desktop computer. This approach helps teams focus on creating great product-specific designs, rather than reinventing the wheel for each responsive layout challenge.

However, just having a system in place doesn’t guarantee that everyone will use it perfectly. It’s like having a recipe book—it’s super helpful, but it’s up to the chef to follow the instructions and create a delicious meal. That’s why it’s so important for designers to understand and embrace the spatial system. When designers understand why consistent spacing and layout matter, they’re more likely to create designs that look and feel great for users.

Figma’s design system features, like layout grids and styles, make it a lot easier for teams to stick to a spatial system across all their projects. By providing a single source of truth for grids, spacing, and layout components, Figma helps everyone stay on the same page and apply the spatial system consistently. The result? User experiences that feel cohesive and intuitive, no matter where someone is interacting with 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.

Remember, a spatial system is meant to inspire and guide your designs, not limit your creativity. As you apply the spatial system to your work, always keep your users’ needs and experiences at the forefront, using the guidelines as a helpful framework rather than a set of strict rules.

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:

Take a closer look at your existing designs

Remember that initial audit you did, where you looked at all your existing designs and broke them down into individual elements? It’s time to revisit that. Start by defining your variables and styles, which are like the basic building blocks of your design. This includes things like colors, fonts, spacing, layout, and any special effects like shadows. By creating a set of predefined styles, you ensure that everyone on your team is using the same design elements consistently across all your projects.

Next, define your components. Components are like pre-made building blocks that you can reuse throughout your designs. They can be simple things like buttons and icons, or more complex elements like modals and navigation bars. Break these components down into their most basic parts, and then build them up into more complex structures.

Choose clear and consistent names

When naming your components and variables, it’s important to choose names that reflect their function, rather than how they look or how they’re coded. This makes them easier to understand and use correctly. Use semantic naming, which means choosing names that reflect the meaning and purpose of the element. For example, you might use something like “color-warning” with an alert message, or “surface-primary” for the main background color of your app. Include details like the category and any variations in the name, such as “color-text-secondary” on your secondary headline color.

When it comes to naming cases, there are a few different approaches you can take. Hyphens (like “primary-button”) and camel case (like “primaryButton”) tend to be the most 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.

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 and components, no matter what they’re working on.

When setting up your library, think about what structure will work best for your team. You might want to keep everything in a single file, so that everyone is always 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.

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

And if you have any other questions or topics you’d like to learn about, give us a shout on Twitter at @figma. We’re always happy to help! Learn more about how Figma helps teams drive consistency, scale designs, and maintain parity with development using our design systems features and request a demo.