What it take to create a design system? | by Julia Gale | Mar, 2023

For the last few months, I have noticed more and more designers are talking about design systems and giving tips and tricks on how to do so. But not many of them tell young designers that a simple UI kit in Figma is not a design system, of course, it’s a part of it as I already said in my previous article.

So many organisations understand the urge of having one, but not all designers have the skills or understanding to create a complex and collaborative ecosystem that would work effectively and consistently in the organisation.

Creating a design system is an interesting but still complicated and overwhelming task, especially with all those Figma updates that are not working properly or engineering teams that what to do it old fashion way and not incorporate new tools.

In this article I would like to share simple steps, so you could understand the process and logic behind each one and interpret it in your work.

1. Think about your design system as a new product

If you will think about it as a product, it will help you to stay focused and make it less overwhelming.

As you’ll see, your design system will have the same stages of the product development life cycle. You would need to understand for whom you creating it, create an MVP, make sure they’re all the bugs fixed and ensure that it serves its purpose.

2. Start with design audit

Before you will jump to the actual making components, you should understand what already exists, effectively you will need to perform a design audit.

Design Audit is a process of reviewing a product and evaluating it from a user experience perspective to ensure it meets accessibility, UI consistency, and design unity requirements.

By working on a design audit you would identify previously unforeseen gaps and issues within the product’s design that need to be addressed in future design sprints.

I will share in future articles about how to conduct one, but for now, you can simply answer these questions:
– What is the identity of our company look like?
– Are all our elements look consistent throughout the product like colours, typography, and screens?
– Is our visual language communicate clearly with our users?
– Why are users not completing key user flows?
– How much time do we spend on creating new, simple designs?

While you explore from one file to another, don’t forget to document all your findings as later on, you will use them as a base for your design audit.

Your main goal is to find slight performance bugs and inconsistencies that will guide your new design system. By highlighting all of those issues, you will find the areas you need to prioritize items like work efficiency and user experience.

3. Estimate the cost

Creating and implementing a design system requires a lot of work, so it’s important to evaluate whether the effort is worth it.

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

Ask questions that make sense for your project to evaluate possible costs and savings, such as:

• How long will it take to design a new project consistent with the client’s brand, with and without a design system?
• How long will it take for developers to implement all new design components, with and without a design system?

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.

4. Make it inclusive for all departments

Designers are not the only ones who will use the design system. Developers, product leads, marketers, and others can also benefit from it. Therefore, include these departments in your research to discover how they work and collaborate.

Ask relevant people about their challenges with current design-related work.

These insights are valuable and should be considered when creating a design system. If your setup addresses these challenges, it will improve workflows, collaboration, and design work.

The system is a win for everyone, increasing the likelihood of adoption in multiple departments.

5. The most useful components

After completing your audit and researching other departments, you will have a clear understanding of the major challenges that your design system should address.

When creating an MVP (minimum viable product), it is best to start with the most impactful steps first. Begin with the most commonly used and helpful design components, and move from the smallest building blocks to the larger ones.

There are two ways to approach this:

• Divide components into Atoms — Molecules — Organisms — Templates — Pages

This concept was introduced by Brad Frost in his book, Atomic Design. It proposes a methodology for thinking of UIs as thoughtful hierarchies, discussing the qualities of effective style guides, and showcasing techniques to transform your team’s design and development workflow.

Design tokens are style values for UI elements, such as color, typography, spacing, and shadows. Each design token represents a design decision. Salesforce introduced design tokens as a way to manage design from a single place, offering consistency, standardization, and more time for designers to focus on important tasks.

At this point, it is important to decide which tool to use for your design system. I generally recommend using Figma for a scalable design system.

Another useful exercise when creating a design system is to define what you want your finished system to include. Not all design systems are the same; some are relatively basic, while others are much more advanced.

6. It’s a living organism

Creating a design system is not a one-and-done project. Once you have it up and running, it is important to keep it up to date. This means regularly adding new components, adapting to emerging trends, and more. Your design system is a living system, which can be demanding but also gratifying.

I want to emphasize one more opportunity that 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 addresses their challenges.

Through collaboration, you can ensure that the design system is not 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.

Thank you for the clap 👏🏻 if you enjoyed this article.

If you have any feedback, I’d like to hear from you. Say hello at hi@juliagale.com or connect on LinkedIn, Instagram and Dribbble.