Piecing together a design system is becoming more complex and requires more cross-functional collaboration. Deadlines are tighter, yet teams still need to consistently deliver a great design.

Having a design system in place is becoming essential for streamlining processes without sacrificing design quality or consistency.

But, creating a design system isn’t an easy task and can be overwhelming. This blog post is here to help!

There’s no one-size-fits-all process. This article outlines the solutions I’ve found work best. You might need to tweak the steps, but I’m confident that, once you understand the logic and the goal behind each step, you’ll know how to adapt them to your needs.

Without further ado, let’s start crafting your design system!

UPDATE: I published step-by-step guide for setting up a design system. It’s extensive. Read it here -> 

Treat your design system as a product

Creating a design system can feel overwhelming, but it really helps if you think about it as a product. It feels more tangible.

As you’ll see, there are similarities — you’ll need to research your “target market,” start with an MVP (minimum viable product), iterate the system, and ensure it serves its purpose.

You’ll also need to figure out who this “product” is meant for, how they’re going to use it, where it enters your workflow, and more.

But first, take a good look at what already exists and see what you can learn from it.

Start with a design audit

To create a design system, you need to understand where your design currently stands.

Essentially, you need to conduct a design audit.

A design audit is a review of all visual design elements used by a brand or a company. The audit’s goal is to make sure the brand image, experience, and product communication are consistent and uniform across all channels and outlets. Here’s my detailed guide on how to conduct one. 

Write down a list of questions before the audit. These questions will clarify what answers you’re looking for. Here are some good ones:

• What does the overall identity of our company/brand look like?
• Are the design, color palette, and typography consistent throughout all materials? E.g., are all of our “Subscribe” buttons consistent?
• What do the visuals communicate and are they in sync with our target audience and business objectives?
• Why are people not completing key user flows?
• Why do we spend so much time creating new, simple designs?

When conducting a design audit that’s going to serve as your design system foundation, focus on exploring and documenting

• Commonly used components
• Design-patterns
• User flows and user-flow flaws
• Inconsistencies
• Usability flaws

Make screenshots and use Loom — or a similar tool — to record your findings.

The audit’s goal is to find small performance drains and inconsistencies that’ll guide your design system. These deficits will show you what areas you need to prioritize to improve work efficiency, user experience, and your company’s bottom line.

Speaking of which…

Calculate if a design system is worth it

Creating and implementing a design system requires a lot of work, so it makes sense to crunch some numbers and see if it’s worth the effort.

To start, compare the costs and time required to create and implement various designs (e.g., a button, subscription form, landing page, etc.) with and without a design system in place. 

Let’s use a mobile application for our example.

For a website, answer questions like…

• How long will it take to design a new website consistent with our brand — with and without a design system?
• How long will our developers take to implement new design components on our website — with and without a design system?
• How much time do we need for quality control and possible iterations — with and without a design system?

Use any questions that make sense for your project or daily work to evaluate possible costs and savings.

Also, estimate how many elements of your design system are ready, how many you’ll have to create from scratch, and how extensive the process will be.

In our example, we estimated that

1. Each of our team members will save 30 minutes per day (at least) by using the design system — equating to 2.5 hours per week
2. We have 5 team members paid $50 per hour
3. We save $625 on a weekly basis and $32,500 on a yearly basis

This evaluation step forces you to think of concrete examples where your design system will be used. The overview also helps highlight some benefits of a design system in a way that will help you pitch the system to others, helping the team understand time and cost savings.

Speaking of others, there’s another step at the very beginning of the creation process that’s often overlooked but super important.

Research other departments and create an inclusive system

Designers are probably not the only ones who will be using the design system. We already mentioned developers, but product leads, marketers, and others will also benefit from your system. Be sure to include these departments in your research and find out how they work and collaborate. 

Ask relevant people about their challenges when it comes to current design-related work. Based on my research with various clients, here are some examples of what you might hear:

👧  From the VP of the brand:

• Our brand is not easily recognizable
• We need to take trends into account
• Designers don’t follow branding rules —  “I always have to double-check the final designs”, “I spend a lot of time just asking people to follow the rules.”

👧 From CTOs

• We lose heaps of time during the design handover
• We don’t have time for fancy animations, because each animation is different (format and file)
• We support multiple products — we can’t look into everything and therefore need clear guidelines

👱🏼 From the Product lead

• The design needs to be useful
• We lose a lot of time with user-testing new components
• A prototype is worth more than a thousand words
• We need to be fast and agile — time to market is our competitive advantage
• We need standardization
• Each designer has their own workflow

These are all valid insights that should be considered when creating a design system. If your setup manages to address these challenges, it will improve workflows and collaboration on top of improving design work!

The system is a win for everyone, increasing the likelihood that it will be adopted in multiple departments.

Define the most useful components and start building

Once you’re done with your audit and researching other departments, you’ll have a good picture of the biggest challenges your design system should solve.

As with any MVP, you’re looking to start with the most impactful steps first. Begin with the most commonly used and most helpful design components.

Move from the smallest building blocks to the bigger ones.

There are two ways of doing that:

1. Divide components into Atoms – Molecules – Organisms – Templates – Pages 

• Atoms (buttons, icons, and input fields)
• Molecules (forms and pop up bubbles)
• Organisms (menu bars and sidebars)
• Templates (high-fidelity wireframes)
• Pages (design ready templates)

This logic comes from Brad Frost. His book Atomic design introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective style guides, and showcases techniques to transform your team’s design and development workflow.

The diagram above shows the flow of the components and how they progress into a bigger picture. Atoms are the smallest design elements. Once you combine a few, you get a molecule. Once you combine a few molecules, you get an organism, and so on.

2. Design Tokens

Design tokens are the style values of UI elements such as color, typography, spacing, shadows, etc. We can say that each design token is actually our design decision. They were first introduced by Salesforce team. They wanted to create a system that would help them manage design from a single place.  Design tokens offer consistency, standardization and more time for designers to spend on important tasks.

Design tokens can be:

Typography
Headline
Subheadline
Quote
Label
Copy

Spacing
stack-1
stack-2
gutter-mobile
gutter-desktop

Color
primary-action
secondary-cta
alert
error

Size
size-S
size-M
size-L

Effects
shadow-S

Motion
hover
static

Now you are thinking what the heck are shadow-S, size-S names for? Read on, more good stuff down there.

When deciding what to include first, you generally have two options:

1. If you’re creating a design system for an existing brand, go with the most commonly used components first (as mentioned above).
2. If you’re creating a design system for a new product or service launch, think about the User Interface first and then define the most useful elements. If you are familiar with Figma, you know that automating batch styling is not supported. That is why we can use Figma tokens plugin or Batch Styler. It’s way easier to support multi-brand design systems.

In fact, if you have a specific product or service in mind when creating your system, this exercise helps prioritize elements depending on which ones should be used.

At this point, it’s important to decide which tool you’ll use for your design system. I generally recommend Figma. If you want to build a scalable design sytem, I would look anywhere else. 

PS. If you’re deciding between Figma and Sketch, check out my general overview of both tools and see what scenarios they’re best suited for.

Another exercise that really helps when creating a design system is to define what you want your finished system to include. Obviously, not all design systems are the same — some are relatively basic, others are much more advanced. For example: do you want to search through your components, do you want to include detailed documentation, downloadable assets (Figma files, .svg icons, etc.), accessibility guidelines, … ?

You can find inspiration here >

• Audi
• Atlassian
• Carbon by IBM 
• Apple

Here are two examples that will help you define the guidelines you need to write and the elements you need to create.

Some ideas what to include:

Brand

• Logo
• Colors
• Patterns
• Fonts
• Text
• Communcation, Tone
• Principles of design

Print

• Form
• Advertisments
• Literature
• Wordmarks
• Print templates
• Stationery
• Data visualization

Digital

• AD templates
• Design tokens
• Informational architecture
• Omnichannel experience
• Radio Commercials
• Online Banners
• Newsletter

Motion

• Response Effects
• Functional Animation
• Transitions

Platforms

Webpages

Code

• HTML
• PHP
• React
• …

Documentation

• Accessibility guidelines
• Design guidelines
• Development guidelines
• Defined processes and tools
• Library (Figma, XD, and Sketch)
• Components’ code
• Governance model (decision-making and contribution)

When creating a design system, stick to good practices from the very beginning. I’ll touch on three very important ones that tend to get overlooked which leads to confusion, lost time, and mistakes later on.

3 practices you shouldn’t neglect

Naming conventions

When you’re creating design tokens, you have to name them. No big deal, right?

However, naming conventions are super important. An effective naming convention improves and sustains a team’s shared understanding of visual style through design, code, and other interdisciplinary handoffs. It’s important that everyone involved follows the same logic to keep content organized, which is often not the case.

Define naming guidelines before creating any design tokens and make sure the guidelines are clear and understandable.

Design token names should be:

✅  Logical.
✅  Simple. If a name is too complex and hard to understand, the component might need to be broken down into simpler parts.
✅  Scalable. If you’re using different versions or sizes of the component, make sure the name is scalable.
✅  Standardized. Make sure everyone is using the same scale or values for sizes, alternative versions, etc.

Even a simple token can easily combine four description levels. It’s essential to define your naming conventions before naming any tokens.

You will to define:

• Category (color, shadow, …)
• Type (background, border, ….)
• Item (button, table, …)
• Sub-item (primary, secondary, …)
• State (hover, active,..)

Here are some common ones:

Numbers for versions or alternatives (1, 2, 3, etc.)
Google Material Design Color Palette values for colors (50, 500, 900, etc.)
Scale (1-x, 2-x, 4-x, etc.) or a more complex scale (half-x, quarter-x)
“T-shirt” sizes for component sizes (S, M, L, XXL, etc.)

You might even need to group different levels of descriptors. Grouping them according to use and value might be enough, or you might need a more complex system.

Basic naming examples

Define values

• Black
• Blue-500
• Fontsize-xl
• spacer-8

Define use

• Background-color
• Button-primary-bg-color
• Headline H2
• Box padding
• token: spacer-8

What works for you depends entirely on your company, projects, and design system. What’s most important is that everyone involved understands and uses your naming guidelines.

Token Hierarchy

When you define use and list of tokens, you need to decide how many levels you need. More levels, more complicated it gets.

Example from Salesforce’s Lightning Design System:

$esds (SYSTEM)  – color (CATEGORY) – neutral (VARIANT)– scale (SCALE)

Complex naming:

(SYSTEM) – (CATEGORY) – (CONCEPT) – (PROPERTY) – (VARIANT) – (SCALE) – etc.

However, this comes in handy when you have multi-brand, multi-theme design systems.

Design documentation

Design documentation is often neglected, which is a shame as these documents make life so much easier. Guidelines keep everyone on the same page and provide new team members with clear instructions on how the system works, why it’s organized the way it is, how to implement certain elements, what’s next, and more.

In the case of design systems, I want to emphasize a specific part of design documentation — guidelines on how to use a certain component.

Here’s an overview of everything that should be connected with each component in a design system:

The layout isn’t complicated, but it does require diligence. However, keeping up with this structure pays off and makes your design system much easier to use.

If you want to learn more about the benefits of design documentation and my process, read my guide here.

Design accessibility

Last but not least, creating a design system is an excellent opportunity to consider the accessibility of your design. You really shouldn’t miss it.

Your design needs to be accessible to as many people as possible. Pay special attention to two general groups: people with disparate technical abilities and people with disparate physical abilities.

Here are some starting questions regarding technical abilities:

• Will my users be able to access my site on different devices?
• What is the user experience like with spotty Wi-Fi?
• What if a user is on an old operating system or an older phone?

Now, here are some questions supporting physical abilities:

• Do my users have any physical limitations? What are they?
• Do they need assistive features?
• Can we use alternative methods to deliver the same content?

For example, if you consider color blindness while creating your components, you can make your overall design much more accessible and enjoyable for a wider audience. They’ll certainly appreciate it.

There are many online tools that can help make your design more accessible. Think about your target audience and research the challenges your design has to answer. The right tools are out there — if you’re willing to look.

To get you started, here are three great plugins for Figma:

• Contrast
• ADEE – Comprehensive Accessibility Tool
• Able
• A11y – Focus Orderer

It’s a marathon, not a sprint

Creating a design system isn’t a one-and-done project. Read again 😅

Once you have it up and running, you need to ensure it stays up to date. You’ll need to regularly add new components, adapt them to emerging trends, and more.

Your design is a living system, making it demanding as well as gratifying.

In my initial design system article, I outlined the benefits of business and design.

• Ensured consistency
• Increased efficiency
• Simplified scaling
• Improved agility
• Saved time and money

But, I haven’t emphasized the opportunity a design system gives you: It can help you make your workplace more inclusive.

A successful design structure will involve different kinds of people and allow them to co-create a system that will solve their challenges.

Through collaboration, you’ll ensure the design system isn’t just another tool or process but is seen as a better way of working.

Once people embrace it, the system empowers them to complete more meaningful and satisfying work. These benefits are the basis for all kinds of positive business and work-life changes.

If you enjoyed this article and would like more design, strategy, and business tips, subscribe to my newsletter below and I’ll deliver them straight into your inbox. 😉

Useful resources and tools:

Orbit – an open-source design system
Specify – a design data platform
Supernova – system-as-a-service-platform
Zeroheight – a design system platform
Frontify – a brand management platform
Tailwind – design system components
Design Tokens – a Figma plugin
Figma Tokens – a Figma plugin

Hungry for more UX articles?

How to conduct user research: A step-by-step guide

Design Psychology: Principles you should know and use

I am a Design Strategist who holds a Master of Business Administration. I have 15+ years of career experience in design work and consulting across tech startups and several marquee tech unicorns such as Stellar.org, Outfit7, Databox, Xamarin, Chipolo, NIVEA, etc. I currently advise, coach, and consult with companies on design strategy and design systems. I received numerous awards for my designs, but I’m much happier when I prove that excellent design decisions increase your ROI. 🔥

My personal page  *  Let’s connect on Linkedin  *  Twitter

Comments

comments