Design systems: A beginner’s guide to building one that will last

They are the key to streamlining a team’s approach to design and to empowering designers to bring a brand’s full essence to life Half of design professionals say their companies are already using a design system.

Design systems can bring new levels of consistency and scalability to both product and web design — but only if teams are fully aligned on what they are, why they matter, and how they should be built.

What is a design system?

Design systems are ever-evolving sets of reusable components, principles, and guidelines that give designers and engineers a shared language for consistent product and web design.

It’s a common misconception that design systems are synonymous with pattern libraries or style guides. These elements are certainly important components of the overarching system, but they’re just that — key pieces of a more robust whole. The real value of a design system lies in its ability to give designers and engineers the guidance they need to create smoother user experiences and digital products. Good design systems help designers understand what to make and how to make it, but they also provide the rationale and motivation behind the design.

What to include in a design system

There’s no standard list of components to include in a design system, but there are common elements that the most effective design systems tend to feature:

• Design principles or the rules and values that drive your design team. For example, when Quartz redesigned its website in 2014, their team based their work on design principles, such as “Stay out of the users’ way,” “Let the stories shine,” and “Make sure it works on mobile.” Design principles will differ from company to company, and they will likely reflect the brand’s core values.
• A design pattern library or a central repository of approved and commonly used patterns. According to the Interaction Design Foundation, a pattern is “a repetition of more than one design element working in concert with each other.” Those elements can be shapes, lines, colors, etc.
• A UI kit/component library or a collection of UI-focused components like buttons, widgets, and more. These assets allow teams to create consistent, UI-friendly designs more quickly.
• Design process guidelines, which help designers interpret design principles as they execute a task.
• Accessibility elements and guidelines or key rules and recommendations that help teams create designs that are more accessible to all users and that comply with the Web Content Accessibility Guidelines.

The benefits of a design system

There are three main benefits that make building a design system worthwhile for your business:

1. It brings consistency to product and web design. A consistent approach not only makes work easier for your team, but it also helps build brand recognition and creates a better experience for your customers. 24.5% of respondents in a 2019 Lucidpress survey reported that “inconsistent branding creates confusion in the market,” and 18.6% said that inconsistency could be detrimental to a brand’s reputation. Reduce confusion and boost your brand’s reputation with a consistent design.
2. It enables cross-functional collaboration. A good design system helps you say goodbye to operational silos. With a comprehensive approach to design and execution, your design and product teams can collaborate cohesively from start to finish on each new project.
3. It increases the speed and scalability of design. A design system mitigates duplicative work — like repeatedly creating the same elements and concepts — so your team can move more quickly and stretch their creative muscles.

The 4 basic steps of building a design system

There are four basic steps to follow when you’re ready to build a design system for your organization.

1. Audit the existing product

Go through your product and review all of its various front-end design elements. From there, you can build a catalog of UI components and visual elements that will form the foundation of your design system. Moreover, you can identify any inconsistencies that may have emerged and make the appropriate design decisions for the future.

2. Define your design language

Establish clear principles on how you think about your product, and create guidelines on how you’ll bring those principles to life. Design principles lay out the branding vision for your product, including how you want customers to feel while using it. Do you want customers to feel calm? Excited? Curious? Do you want your brand to feel friendly? Quirky? Cerebral? Your design system should lay out how you can make customers feel the way you want with your design.

The visual design language you choose for your overall design system includes guidelines for color palettes, typography, iconography, and imagery. These elements work together to create the feel of your brand — and instill the desired emotion in your customers.

3. Build a pattern library of common design elements

Your pattern library is a collection of reusable UI components that will streamline design in the future.

There are two main types of patterns — functional and perceptual — that work together to form the building blocks of your designs. According to VIA Studio, “[f]unctional patterns define the structure of your design, like the backend layout, while perceptual patterns define the visuals like typography, spacing, interactions, etc.” Together, these patterns form a library that is structurally sound and evocative of the appropriate emotion and brand aesthetic.

4. Document guidelines on how and when to use design elements

Without clear guidelines on how and when to use design elements, you don’t have a true design system — rather, you have a collection of elements and libraries. As you create your design system, be sure to document shared practices on how teams can effectively use and maintain it. Key guidelines to incorporate into your documentation include instructions on:

• How team members can contribute to the design system
• How to report an issue with the design system
• How the team plans to address ongoing maintenance issues
• How you will govern consistency between the design side and the production code side

Clear guidelines and recommendations allow teams to work more quickly and efficiently right away.

Common challenges when building a design system

It’s not easy to build a design system, and there are a few common challenges that cause many initiatives to fail:

Choosing a starting point

The scope of a design system initiative can be overwhelming, and it’s tough to know where to start. If you don’t have a clear plan of attack, leaders may not buy into the process. That’s why it helps to outline your approach and know where you plan to begin well before you get started.

Organizing the team

In the early stages, you need to assemble the right combination of designers and engineers to champion the initiative and drive it forward. Don’t invite too many cooks into your proverbial kitchen — begin with a core group whose work you trust and who will advocate for the design system.

Managing documentation

Clear documentation on how to use various elements of the design system saves your team time and ensures consistency. Managing documentation, however, can be a challenge. As you’re getting started, make sure you don’t separate the codebase from your documentation, as this can lead to duplicate work and inconsistencies that could derail your entire design system.

Bridging the gap from design to development

Your design system may look and feel beautiful, but it must also be easy for engineers to bring to life. The handoff from the UI designers to the engineers is a common friction point that reveals flaws in a design system. As you’re building your system, be sure to keep the end users — both your engineers and your customers — front of mind. You can make your design system part of your workflow by building it in a no-code environment. For example, when you change the color of a button in Webflow’s Style Manager, that change will ripple across the CSS behind the scenes and change other buttons with the same class too — it’s your design system in action.

Design system examples for inspiration

Get inspiration for your design system from examples that get the concept right.

Atlassian

Atlassian’s design system is often cited as exemplary, and for good reason: it includes everything a design team could possibly need, from component and pattern libraries to in-depth insights on Atlassian’s brand, stylistic foundations, and content.

Salesforce

Salesforce’s Lightning Design System puts the company’s design principles front and center. The system is easily searchable, and it provides all necessary assets and components, as well as articles, downloads, and FAQs, so designers can work efficiently.

GOV.UK

A Webflow team favorite, the GOV.UK design system is clear, concise, and comprehensive. The system stresses its community focus and encourages contributions of new components and patterns. This, in turn, helps democratize the design process.

Google

Another Webflow team favorite, Google Material Design, keeps things clear and simple. The system is divided into three main parts: Principles, Components, and Theming, which helps designers of Google products learn the thought process behind its designs, understand when to use various components, and learn how to customize designs appropriately.

Shopify

Shopify Polaris offers practical guides that help designers get started on the range of tasks needed to design for Shopify. The system also includes content and design guidelines, as well as a component library and guidance for creating Shopify-specific experiences.

The best design systems are always evolving

Good design systems are dynamic entities that adapt seamlessly to a company’s growth and changes. The real magic of a design system is in minimizing the duplication of effort by the designers and engineers who bring a product to life. That’s why the future of design systems lies in no-code — an environment that blends the roles of designer and engineer, eliminating the friction of the traditional handoff.