Introduction

The design system is a collection of libraries or components used consistently in a UI design. The purpose of making a design system is to make it easier for designers to create UI for a product. Another name for the design system can be referred to as brand guidelines.

Then, is there a best way to make it? I can answer no. All based on how we make it, whether it is easy to implement, and whether it follows the product’s principles.

In making the design system itself, we can refer to Material 3 references, Human Interface Guidelines (iOS), Asphalt Design System, etc. Each product has different guidelines, and when we create a design system, not all components are suitable for the product we will build.

In my writing this time, I only show my best way to create a design system through Figma.

So How?

Don’t be long, let’s gooo!!!

Knowing the Product

Before creating a design system, I first analyze and look for information related to the product. Analysis can be done by analyzing the product field, the product business’s goals, and the goals to be achieved. I do this when I receive a project from the agency I work for or a freelance project.

Defining Principle

After we know how and what the product looks like, the next step is to define the principles of the design system that will be created. The principle here is like the vision and mission of the components in the system design. This aims to unite the business with the components that will be made in the design system. In addition, the design of the system also refers to the principles that have been defined. One example of a design system that has a principle is Gojek.

Audit the UI

This stage I refer to as auditing the UI or analyzing the existing UI. This stage aims to determine what components will be made as a library. Actually, this stage will be easy if the product already has the initial version of the UI or the first version because it will make it easier to analyze the components used as a library or system design. If it doesn’t exist, it will take longer, and there is a possibility that the system design will be made after the first version of the UI has been created.

In the UI audit process for component mapping, I am usually assisted by a UX Designer, or if I am a solo designer, I will audit myself, haha. I describe the process of mapping components through a UI audit in the form of diagrams or information according to a hierarchy starting from the page, where each page contains a hierarchy of several components. Maybe I’ll include a component mapping image from the project I’ve been working on, but it’s not full, hehe :P.

Let’s Create the Design System

This is the fun part, creating a library component or design system based on the analysis in the previous stage. For the design system, I will use Figma because Figma supports the creation of complex system designs and maintenance of each component through versioning.

Eitsss … while creating of components that there are stages you know. I will share my order in starting component creation in Figma here. Let’s gooo!!!

Style Guide

My first step is to map the style guide of the product. This style guide will contain colors, typography, elevation, spacing, and border radius. I think some of these styles are often used in making a UI. In defining the style guide, I use the design tokens. I started implementing design tokens a few months ago when creating the style guide. This also makes it easier for developers to develop code-form design systems. I will give an example that I have applied in making the design system.

Components

Next is the creation of components for the design system of a product. The components will be used repeatedly in the product mockup display. Components are obtained from the old UI audit results. If I don’t have an older version of the UI, I usually create components that I’ll at least be sure to use later. Because while making components, it is necessary to ensure that later these components must be used. Don’t let the components be useless.

I made buttons, text fields, dropdowns, and selection controls (checkboxes, switches, and radio buttons) for the initial step of making the design system components. Those components that I definitely use in making mockups. The implementation of components also uses the latest feature from Figma, namely components properties. This makes it easier to make component variants that previously had many variants; with this feature, the variants will become fewer and more uncomplicated.

Conclusion

In creating the design system, it is necessary to define the principle and audit what components are needed. Because, in my opinion, while creating the design system components should not be unplanned, later it will be useless, haha. And yes, this is my way of creating a design system; you can follow my way of working and give suggestions and criticisms in my flow when making a design system.

Thank you for reading my article. See you in my next article.