Naming components
Guide to creating a taxonomic glossary of Design System components, properties, and values.
Nomenclatures are one of my favorite topics that I learned from building components.
Taxonomy is a very important element for design teams, as it allows them to be closer to development teams by sharing the same common language.
But, where do we start? Is there a glossary? I wish there was a glossary or a manual that will help us achieve lexical consistency in our team. Component nomenclatures are a topic that is often left to the last and makes it very difficult to implement, build and maintain component libraries.
Through this article, I will try to clarify the possible doubts that usually appear when we begin to build components.
1. Identifies elements:
Familiarize yourself with the elements that a component has, to know all the possibilities of nomenclatures that are available in each of them. This will help you to look for references in other systems, to create your own taxonomic system.
Components:
There are two types, Component and Base Component.
Component: They are blocks that contain visual information and are part of the UI KIT. Ex: Card
Base Component: These are components that are designed to be used inside other components. Sometimes they are hidden in the UI KIT because they are small pieces that are meaningless by themselves. Ex: The numeric button that is used only to show the days of the month in the date picker “date_date-picker”.
Some design systems name the base components as assets, snippets, parts, items, utility, subcomponents, etc.
Objects:
These are the elements that make up a component. There are two types: Container and Element.
Container: These are boxes that contain elements such as blocks, sections, etc. Ex: 1º Block, Header, Footer, Content, 2º Item, etc.
Element: These are objects that contain different types of visual information. And these can be:
- Text: Ex: Label, header, subheader, caption, etc.
- Components: Ex: Icons, illustrations, buttons, tables, etc.
- Vectors: Ex: Circle, rectangle, triangle, etc.
- Media: Ex: Video, gif, img, etc.
Properties:
These are the variable aspects of a component. Ex: The properties of a button can be the size, state, color, etc.
Values:
These are the different options available for each property. Ex: The state property of a button can have the values default, hover, pressed, disabled etc. And there are two types: Variants and Boolean.
Variants: They have more than 2 options as in the previous example.
Boolean: They have only 2 options that are manifested through the variables True/False, Yes/No, and On/Off.
2. Define structure:
Once you have identified the type of element you want to name (components, objects, properties, and values), it is time to define the modifier and its position in the naming structure.
Type of modifier:
The modifier manifests itself in various visual forms and allows you to distinguish one element from another. There are several types:
- Icon: Ex: 💠Button, 🔹Table, 🚫List — Deprecated, ✏️Custom, etc.
- Punctuation marks: Ex: ._Base, //Cell-Item etc.
- Words, acronyms, abbreviations: Ex: Asset_Item-List, BC_Cell-Header, ShowIcon, etc.
Modifier position:
Choose the order that best suits your system:
- Modifier + element. Ex: Item-List
- Element + Modifier. Ex: List-Item
3. Unify grammar:
When you have the structure of your nomenclature defined, unify its grammar through several steps:
Name type:
Choose the type of name of the elements:
- Past participle verb: Ex: Collapsed
- Present verb: Ex: Collapse
- Adjective: Ex: Collapsable
- Noun: Ex: Collapsible
- Verb to be + Noun: Ex: Is Collapsible
- Verb + Adjective: Ex: Show Collapsable
- Noun + Adjective: Ex: Icon before
Quantity:
Define whether your noun will be singular or plural and try to standardize it. For example, if you have more than one button you will use the word buttons to designate both elements. But you will use a generic name for all of them, such as button, buttons or actions.
- Singular: Ex: Size, Button, etc.
- Plural: Ex: Sizes, Buttons, etc.
Font type:
Initials make element names easier to read. Establishing the same pattern of initials will bring visual consistency to all components. There are several types: **
- Uppercase + Uppercase: Ex: Icon Before
- lower case + lower case: Ex: icon before
- Uppercase + lowercase: Ex: Icon before
- lowercase + Uppercase: Ex: icon Before
Union:
The union and the initial typeface help the visual separation and consistency of the component names.**
- No space: It is advisable to avoid the use of the lowercase initial in the second element in this case, as it will make reading much more difficult. Ex: iconBefore
- Space: Ex: icon before
- Hyphen: Ex: icon-Before
- Underscore: Ex: icon_Before
**Remember that in code there are some predefined styles called: Case Styles that combine “typefaces” and “unions”.
camelCase: No spaces and every word in uppercase except the first one.
PascalCase: All words are capitalized, including the first one, and all spaces are removed.
kebab-case: Replace spaces with a hyphen “-” between each word and make sure all words are lowercase.
snake_case: Very similar to kebab-case, the only difference is the use of underscores “_” to separate each word.
4. Organize elements:
There are several ways to organize the elements. Choose the most appropriate for each of them.
Alphabetical: Ascending (a-z) or descending (z-a). Ex: bottom, left, right, top.
Sequential: Ascending (0–10) or descending (10–0). Ex: 1,2,3,4,5,6 // default, hover, active.
Hierarchical: From most to least or from least to most. Ex: Primary, secondary // info, warning, error.
5. Establish a taxonomic system:
After performing the following steps it is time to apply the changes to your components. But where do I start? There are two possible paths:
Content audit:
This option is the most common and consists of doing an audit of all the nomenclatures that you have already established in the different elements (components, objects, properties and values).
With the objective of defining with the design and development teams a single taxonomic system.
Creation of taxonomic system (glossary):
If you are going to start a Design System from 0 or you already have one and have performed the content audit.
The next steps would be to define for each element (component, object, property, and value) the structure, grammar, and order in the creation of the nomenclatures.
References
Thanks to the documentation of design systems and the disclosure about them, I have created these nomenclature patterns that serve as a basis for designing a taxonomic glossary.
Atlassian Design System, Polaris, Carbon, Lightning Design System
A thousand thanks for arriving here :) #lifeisabutton
