It is essential to have a set of rules or guidelines in place. Apart from designers, it is also beneficial for the developers to create recurring components by referring to the design language system.

In this blog, I will share the process I used while creating the design language system from scratch. Also, I will share how I made buttons(CTAs) for the library.

What is a Design language system and why it is important?

To create a design language system, I needed to understand the depth of these two questions.

Design Language System is a collection of brand or product guidelines and common components which can be reused whenever required.

I went through a lot of articles where people have shared their experiences.

The Setup

So I started by collecting inspiration and referring to other open-source design systems. In this process, I created a rough sketch of my brain dump.

I started by creating a list of all the possible elements that should be present in the library. In the future list can be modified as per the requirements.

Created a Figma file, added all these elements as a page-level entry, and grouped them accordingly.

After this step my library is ready to add elements.

I created a separate library for assets so that it will be easy to manage and use them in the future. The assets library includes Icons, Illustrations, and colors. So as a next step, I imported the assets library in the design library file. Now the setup is done ✅

Next step is to create elements in the library.

How I created Buttons for the library

Buttons act as a visual guide that informs users to take a particular action.

In a product, there can be different buttons depending on the actions users will take. So it is crucial to identify all the types of buttons that can be used while designing for the product.

Types of buttons

• Primary Button — Indicates one or more recommended actions on the screen. There is at least one primary button in a button group.
• Alternate Primary Button — Indicates alternate action. Usually appears on selection or hover where a primary CTA already exists.
• Secondary Button — Used for most secondary actions along with a primary button.
• Text Button — Low emphasis and lightweight button used for secondary/tertiary actions along with a primary button.

Buttons can also have prefix and suffix elements in it.

• Button with Prefix icon — A prefix icon can be used to explain the action better. The Fyle Asset Library can replace the icon.
• Button with suffix icon — A suffix icon can be used to explain the interaction. A dropdown arrow is usually used for this.
• Split Button — Buttons that conceal a primary button and a list of additional buttons. They help expose a common action while nesting secondary, less frequently used actions until needed. There can be a prefix icon on this button.

States for buttons

After this, it was essential to identify the states to show the interactions. There can be five states for buttons.

1. Active — The active state can be used for the click or down press of a button and may often resemble the look of a pressed button.
2. Disable — This state signifies that a button is not available for interaction.
3. Enable or Default — This state is the normal state when it isn’t being interacted with but is available to be interacted with.
4. Focus — Focus state is important for accessibility or while using the keyboard to interact with the screen.
5. Hover — The hover state is only for devices where we use a mouse or trackpad to interact with the screen. This state shows that the mouse is on the button and is available to interact.
6. Loading — The loading state is used when an action has been taken, and the system is working to process that.

And that’s how I created buttons.

Conclusion

Creating a design language is a huge task. It cannot be achieved in a day or a week. It is an ongoing process that requires a lot of research. I tried to share my journey by giving you an overall idea of how I went about it.