Creating a Design System is a necessary thing for all projects that want to be maintained easily. It seems to be hard work at first, but it pays off in the future. Design System helps to build more consistent solutions. What’s more, it is the source of truth for the whole team that makes the work more efficient. All you have to do is to build and maintain yours!

In this series of articles, I would like to show you practical tips useful for your Design System. Do not forget to subscribe to get notified about the upcoming articles.

What is a Design System

First things first, I know that you may already know the essential definition of a Design System, but the first part of the tutorial series is a great place to remind the basics.

Design System is a comprehensive guide for project design – a collection of rules, principles, constraints, and best practices. The core element of the Design System is often a Library of UI Components – often build with Atomic Design Philosophy. These UI elements also have their representation implemented in code.

Design Systems are often called the single source of truth for the team involved in product creation. It allows the team to design, develop and maintain the quality of the product.

If you would like to focus more on essential benefits and aspects, here is the full article:

What is a Design System – Everything You Need to Know

OK, let’s move to the main topic of the article: What you should do before building the design system?

Find Inspiration

You already know the theory. But, what are the standards of the design industry when it comes to Design Systems?

Well, to be 100% honest, Design Systems guidelines are constantly in motion. It changes and adapts to new requirements and tools. The key is, that the Design System should help the team to build high-quality solutions efficiently. Everything that may help is useful.

To know more how real Design Systems look like, you should study existing ones. Here is the list of the best and popular Design Systems to learn from:

Carbon – IBM Open Source Design System
Uber – Minimalistic Design System by Uber
Mailchimp – Also minimalistic and super clean Design System to learn from.
Atlassian Design – one of the most popular systems that inspire thousands of designers.
Apple – Everything related to Apple Digital Products and Systems.
Material Design – One of the most famous systems created by Google.
Lightning Design System – the one created by SalesForce.
Polaris – comprehensive Design System by Shopify

This is a lot of content to study. I advise you to pick 3 most promising ones (for example, from a similar industry or product) and analyze them first. This will give you a huge portion of knowledge, practical solutions, and Design System architecture.

Read How Designers Build Design Systems

If you seek additional reading before creating your own system, you may get inspired by this articles:

Get Familiar With Other Design Systems Source Files

As you may notice, some of the design systems share their source files. This is a great source of inspiration for your new deliverable.

You may get following design resources to learn from:

Some of the resources may overwhelm you. Remember – lots of these kits are created by large companies. Your system should adapt to your needs. Use the above files as inspiration and learn some useful patterns.

Consider using Design System Kit

You surely used some UI Kits. This type of resource is a nice source for inspiration, but lots of UI Kits are not flexible enough to build something more on them.

However, Designers didn’t want just to inspire themselves with ready-to-use resources. They wanted to work with them to build configurable Design Systems.

That’s how Design System Kits (or Design Starter Kits) were born. They are not another predefined UI Kits for finance, education, or social platforms. Design System Kits are resources that help you create on UI Library for Design Systems. They should include multiple Color & Typography Styles combined with a comprehensive collection of UI Components. Some Design System Kits also include predefined Illustration Kits, Charts, and Device Templates to boost overall workflow more.

Here is the full article explaining the differences:

UI Kits or Design System Kits? What is the difference? Which one to use?

Through my professional, I discovered that starting everything from scratch for each project is a waste of time. That’s why I have to build a Design System that helps me kick off all Web, Android, and iOS projects within a few minutes. When it was completed, I decided to share it with other designers. Now, this kit is called Prime. I use it for all my projects, and this helps me to improve it with every new update.

If you would like to read more about this tool for Figma & Sketch, feel free to check out Quick Start Guides.

Starting a New Project or Developing Existing One?

Starting a new project with a design system differs a bit than building it on an existing one. Let’s see how to prepare for building UI Library in this two cases:

Starting New Project

For fresh projects, you have some space for exploration. Once you get the brand guide, which is often the foundation for the design system, you may start exploring color connections, building typography scale, and usage of iconography.

If your project does not have the style guide for the brand, the first step is to create those basics. They may be limited to digital product usage, but building this core is a must.

Once the brand basics are established, you should experiment with the look of basic components like buttons, inputs. You may even build a few mockups to test them out. When the final style is ready, jump to the creation of the atomic components of your design system.

Building System for Existing Solution

When you create a Design System for a project that already has an existing solution, the first thing to do after obtaining a brand guide is making an inventory.

Making inventory ends when you have a full list of colors, text styles, and UI elements included in the present product. Now you have to group the items that are visually similar and decide which should have replaced each other.

This will help you minimize the number of future components, and what is more important, create a more consistent solution. When the components selection is ended, start building components on the existing UI elements.

To conclude

Creating a Design System cannot be done in one day. This is a process that never ends. This article has a goal to inspire you and structure your knowledge so you can continue planning your Design System. Stay tuned for more Design System tips & subscribe to the newsletter to get notified about them. Good luck with your Design System!

By the way…

If you start a new project or would like to organize your UI Library in Figma — do not waste your time creating everything from scratch. Feel free to use the Prime — Design System Kit. It helps you design UI with the best Figma techniques — Component Properties, Variants, Auto Layout and more.
See Prime in action.

To make it easier there is a gift 🎁 - Use UXMISFIT10 offer code to get 10% Off.

You can also Create User Flows faster in Figma & Sketch — With SQUID you can create User Flows directly in your favorite design tool. You may style them to your project brand within a couple of clicks. Prepare all kind of diagrams in minutes. See how it works.

Building Design System – Part 1: Before you start