A guide to naming components on Design System effectively (2024)

A Design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Elements of Design System

There are commonly some elements on website or application designs :

Cores

• Colour
• Typography
• Icon
• Layout
• Animation
• Illustration

Components

• Button
• Form
• Checkbox
• Switch
• Dropdown
• Avatar
• Breadcrumbs
• etc.

Templates

• Landing page
• Login page
• Article page
• FAQ page
• etc.

Patterns

• Empty states
• Error states
• etc.

In a Design System, colour is one of the most important aspect of design. For naming colour, We can name colour and shadows by lightness.

Typography is also one of aspect of Design System. We can include the text as a component, the typeface or font used to display the text, the font-weight which determines the thickness of the characters, and the style which attributes some styles such as italic or bold.

Name each text-style components in this order :
[text]/[typeface]/[font-weight]/[style]

A component library normally consist of some design elements that can be reused from different pages or applications, one of the best ways to organise a component library is to use the states for each component.

States are the different variations of different situations. For example, button component can have states such as “button-default” when the button is not clicked by the users or “button-disabled” when the users can’t click the button at all.

Naming components is an important part of creating a design, it can helps designers and developers to collaborate more effectively. By using recognisable names for each component, We can avoid confusion among designers and developers and use the Design System easily.

There is also Atomic Design, Atomic design is known as one of the common ways for organising a design system to make reusable components that can be used for designers and developers.

The levels of Atomic Design are as follows:

1. Subatomic particles
2. Atoms
3. Molecules
4. Organisms
5. Templates
6. Pages

Thanks for reading, hope you enjoyed this article!