How to Structure a Component Library in Design System

Photo by Kelly Sikkema on Unsplash

There is a lot of component inside a design system. Without a category, it can be messy and disorganized. Just like our life design system needs a little bit of tidying up too.

How do we start tidying up?

The easiest way to tidy up is by creating a categorization system. Try seeing the bigger picture and start analyzing each component. And start understanding by asking questions.

For example, we have a button.

What is a button?

A button is a combination of text and background that let users do everyday actions on the web or app with one click, tap, or key press. With a button, users can navigate to the next step, create an action, or get things done.

Example of Asphalt Web Design System Button

Next, we have a toggle switch.

What is a toggle switch?

A toggle switch is a quick action to switch between enabled or disabled states. Use toggles when the intent is to turn something on or off instantly. Best used for setting user preferences.

Example of Asphalt Web Design System Toggle Switch

Lastly, we will have an action list.

What is an action list?

The action list displays a set of actions for the user. The action in the list is usually additional, not a primary action on the screen. This component is usually attached with a more options button.

Example of Asphalt Web Design System Action List

Do you see what’s the connection between these 3 components?

All of them are used for selecting an action. Therefore, they can be put under one category: Action Control.

This is just one example of the category. There are more types of components. A checkbox, radio, and input field can be put under “Data Input” because the nature of the components is for receiving the user’s input.

Example of Asphalt Web Design System Component Category

Thanks for reading. Give your clap if this short article helps you. See you in the next article!

Read the full article here

Total
0
Shares
Leave a Reply

Your email address will not be published.

Prev
Merchery | Promotional products made sustainable on Land-book

Merchery | Promotional products made sustainable on Land-book

https://merchery

Next
User Research in Pre-Launch Startups: Methods and Tools to Use When There Are No Users [yet]

User Research in Pre-Launch Startups: Methods and Tools to Use When There Are No Users [yet]

Table of Contents Hide Desk researchCompetitor analysisSurveysInterviewsExpert

You May Also Like