Design systems help streamline the product design process and make it more transparent and predictable. This article will explain the concept of design systems, why we should use them, and the critical steps to building them from scratch. We will also analyze a real example of a Design System and review the best tools to create one. Let’s go there!
What you are going to see in this post
- What is a Design System?
- Which value does a Design System bring to my product?
- How to create my Design System
Share the principles of the product
Assign roles
Know the users
Build our Design System
Analyze the components
Store components
- A real example of a Design System: Atlassian
- At what stage to implement a design system?
- Tools to create your Design System
Creating design systems with Figma
Build a Design System with Backlight
- Learn more about design systems
YouTube channels for creating design systems
Design Systems Repo
Books to learn about Design System
8.Conclusion
Table of Contents
What is a Design System?
A Design System is a library where you keep a collection of reusable components, including their code, to create a product quickly. It is guided by transparent and pre-established practices and the essence of the product, its philosophy, and its why. It’s the DNA of our product and helps the whole team go in the same direction. It is not static but dynamic and grows as the product does.
Let’s put ourselves in a situation. You enter a new team, and your first job is to design a screen where all the products that the user marks as favorites will be housed. You get to it and work hard for days to get the perfect, easy and intuitive interface for the user with the data that the UX has given you. It’s time to show your work to the whole team, and feedback is familiar: “We like the approach you’ve given, but it’s not related to the rest of the application.”
Keep in mind that a product must have a coherence far beyond aesthetics. It’s not just that a button has the same border-radius or that its different states look the same for the same action. No. It goes much further. We have to define a language, how we will address the user, and what tone we are going to use. Will we communicate with them in the first or third person? Do we capitalize on button labels or not?
What is clear is that whatever we decide, we must continue with the same coherence in the rest of the product and, of course, continuously measure to know that those decisions are the right ones.
This affects the design team and the rest of the departments. For example, to develop a new component, each programmer can do it in a thousand different ways, some more effective and reusable (keyword) and others less. Or each project member can name a specific component differently, creating confusion and misunderstandings.
What Value Does a Design System Bring to My Product?
Using a design system either by our own or third parties (I will talk later about the different alternatives that exist) gives consistency to our product. It is a handy tool to scale it in a fast way. We do not waste time on aesthetic issues by having our components ready to use. It was being able to focus more on strategic and business matters.
Many of you may be thinking, “Okay, I get it. But what’s the difference with a style guide? I already have one; why create a design system?” I had come across this answer many times when I proposed creating our design system. It’s not the same. A style guide focuses on the most visible part (colors, font sizes…). While a design system may be built on that guidance, it must further consider the interactive, emotional design and code that makes up that component.
“I have tried many times to convince my bosses to make a design system without much success.” You’re not approaching it well. Forgive me for being so resounding. It’s in the interest of all bosses to save costs. Then speak to them in their language. Don’t go to a meeting simply with an idea and screenshots explaining what a Design System is. Talk to him about what you will save by having one. Show it in figures. But real. Explain how implementing a design system will help us save a lot of money. You will see how things change.
How to create my Design System
Okay, let’s get to the point. If we ask 10 product companies how they have developed their design system, there are likely many similarities in the basics. But, each one experiments with different actions to adapt it to the easiest way for them to work. Below I share how I do to create a Design System:
1. Share the Principles of the product
First, we need to make sure that all team members share the same principles about the product. An initial meeting to talk about it is crucial for me. Eye. When I talk about everyone, I mean everyone. Let’s stop thinking that everyone has the hot potato, and we have to pass it on to the partner. No. At least one representative from each product department has to be involved from the beginning, both for a Design System and for any other implementation.
It does not make sense that if a new component is to be implemented, there is no design or programming representative from its initial phase. Their feedback will be crucial, and they will save us that, when they finally reach them, we discover that their implementation is not feasible or more complicated than the business people thought.
And why is it essential for all of us to understand the principles of our product? Because we have to be consistent. For example, if we sell sustainable products, we cannot deliver them in plastic bags. The same can be applied to a digital product or a Design System. Our product cannot be complicated if we offer quick and effective solutions. Does it make sense, right?
2. Assign Roles
In addition, in this meeting, the roles are granted. Who is going to work on what? Yes, I know I’ve said before that we’re all one team. But we can’t all work on the same thing. The result is distributed. We use collaborative platforms or tools where at any given time, anyone with permissions can see what their colleagues have advanced and what status the project is in—being able to give feedback from a very early stage.
3. Know the Users
As I mentioned initially, a Design System is not a simple style guide. We must also establish how we are going to communicate with our users. So it’s crucial to know them. This is one of the phases that I like the most. I do not want to make this article too long and deviate from the focus that concerns us today; in another article, I will talk about design thinking and how to get that precious user feedback and implement it in our product effectively.
4. Build our Design System
With the whole team perfectly aligned and getting to know our users, we started building the UI of our design system.
A Design System is a product in itself. You must baptize it, put a name to it and design a brand that is recognizable with its logo. Many times this is not carried out. Especially when they are developed only for internal use, and there is no intention that they will be made accessible for the benefit of other companies. Still, I recommend doing it.
Before we talk about style guides, we can use them as a base to start with, if we have one.
5. Analyze the Components
We already know our users. So let’s look at all the components that we have and analyze them, and ask ourselves questions like: Are we going to need more? Can we do without some of them? Should we redesign others? Do they all fulfil their function beyond the aesthetic? This is a phase to ask many questions and answer them based on the information we have obtained from our previous analyses.
Remember, the Design System is not static, nor are the expectations and demands of our users. So they should always be on the same page.
6. Store Components
We often put these components in a simple Drive, separating each element into a folder. I don’t recommend that. Instead, let’s make it much more manageable. Let’s create a platform/web that encompasses and saves all of the orderly and visually.
Let’s have a side menu with a list of all the components sorted by sections or types. When we click on any of them, it will show us all its information, code, how to use it, in which situations we can use it and in which we can not…
A Real Example of a Design System: Atlassian
Now that we know what steps to follow to create a Design System let’s analyze the design system that Atlassian developed for all its products (Trello, Jira, Confluence, Bitbucket, Source tree). A standalone platform has its Design System hosted.
We see the components section in this screenshot, with a side menu with a list. In this case, I’ve selected the forms and see all the ones Atlassian uses in their products, with their code in React to deploy them quickly, plus information on how to use them.
We are now in the “Brand” section, in which he informs us of the mission, personality and values of the product:
In the “Content” apparatus, we find all the language and how they will communicate with their users through the components, among many other things.
The content section of the Atlassian Design System.
Do you see what I mean when I say that a Design System is more than just a style guide and that it is the DNA of our product?
At what Stage to Implement a Design System?
“The design system is useful for very elaborate products, with many people and departments involved. But we are a small company. Just three programmers and one designer. We are not in danger of our product being distorted.”
This is a phrase I’ve heard too many times. That is precisely why you have to have your design system. Logically it will not be like Atlassian or Google‘s Material Design. They have many products and millions of users. I already said that a design system grows in parallel to the development. But you have to unify the criteria, yes or yes.
Think that if you are working on a product, you hope that your effort will be rewarded and that, at some point, it will grow. You can implement it then, without a problem. But logically, there are phases in which it is easier.
From the beginning, it is ideal. Implement your design system as soon as possible and constantly refine it throughout the product’s life. That’s my advice.
Tools to Create your Design System
What tools do I use to create my Design System? Earlier I talked about it having to be in a place that is quickly accessible to the entire product team. Do I need programmers to build me a standalone platform.
Creating design systems with Figma
Figma is a collaborative UX/UI design tool so that the whole team can access it. Talking about the entire process I followed to create my (DS) in Figma would occupy several posts. To summarize, I share the first of a series of 5 videos published by Figma’s channel to create design systems.
It is in English, but it is well understood even if you are not very loose with the language. Anyway, if you find it interesting, you have to say it, and I will prepare a tutorial on using Figma to create design systems.
Build a Design System with Backlight
Backlight is another powerful tool for creating design systems. What’s more, programmers will feel more comfortable with this option. It allows front-end developers to manage components, stories, and documentation from a single site. You can take a look at it on its website.
Design Systems Repo
As the name suggests, Design Systems Repo is a repository that hosts hundreds of design systems from many companies (Atlassian, Uber, IBM, Heroku, Microsoft, MailChimp, and many more). Yes, friends. Fortunately, there is a lot of life after Material design.
Building Design Systems
Learn how to build a design system framed within your specific business needs. This book guides you to define a design language that can be understood across teams while also establishing communication strategies to sell your system to key stakeholders and other contributors.
Conclusion
As we have seen, a Design System is a fundamental tool to guarantee the consistency and coherence of our digital product. This article has shown what a (DS) is, why it is crucial to create one, and what steps we must follow for its construction. We have also analyzed the real example of the Atlassian. We have reviewed the best tools to create design systems and beneficial resources to expand our knowledge.