Naming Convention
Establishes a common naming format to find required items quickly
Naming Convention is essential hygiene that allows you to name your files in a way that you and your team can work efficiently. This helps in finding required components (files, layers, folders, screens, objects) quickly when you have them in large volume.
Free & Discounted Udemy Courses — Explore Now
Structure for naming conventions
Having a structure for naming the components, not only helps to navigate fast among a large number of entities but also allows you to understand the relationship between them. While defining naming convention there are two things that are involved in it.
- Grouping the components
- Naming individual components
The below image shows the atomic model which is used to group and create components in a structured way:
Structure: Sequence number_Name of the component_Version(If any)
- 01_organism
- 02_organism/molecule
- 03_organism/molecule/atoms
Example of design component naming
The naming convention for the above component
- 01_message card
- 02_message card/button-primary
- 03_message card/button-primary/color, typography
Block, Element, Modifier(BEM) model
BEM stands for block, element, and modifier. Which is widely used in both design and development to name the components and elements.
Let’s take a look at the BEM structure.
- B is for block — Blocks, referred to as a pattern or a component, self-contained elements, such as a navigation, menu, and hero elements, or any standalone entity as a button. Block elements are meaningful on their own.
Example:
In the above example, the header is considered as a block and named as “Header”
Naming: Component/header
- E is for element — Elements referred to as the individual entities which make up the component.
Example:
Naming: Component/header/h1
- M is for Modifier — Modifier referred to the elements which are allowed to make changes in the component.
Example:
Naming: Component/button/primary
1. Naming the components in the design
The naming conventions make your designs easier to implement, your design systems easier to understand. Inconsistent, context-specific names will increase the time required to understand and modify the artifacts as finding a component will be harder. In any prototyping tool, the same convention of parent and child can be used.
Follow the below steps for naming the components in the design
Naming convention for colors
a. Colors — The color is clear without relying upon terms that could be misunderstood by describing colors using their role in the color hierarchy plus their differentiator, and not the color name.
- Structure: color/color-name/use/variation
- Examples: color/Deep blue/primary/default
b. Typography
- Structure: category/type/size/style/alignment
- Examples: mobile/para/16px/bold/right;
c. Iconography
- Structure: Icon/size/icon-name/icon-state
- Examples: Icon/20px/Delete/Active
2. Naming conventions for components
A blue primary button in your system should be named as button/primary/default, without any mention of its color. This naming structure helps you to evolve your component when the primary color is changing.
a. Structure: component/type/element/variation
b. Examples: nav/header/mobile/dark; cards/media-block/complex/web
3. Naming conventions for design patterns
a. Structure: Patterns/Type of pattern/state
b. Example: Patterns/table/empty
4. Start creating the all the components and design patterns in the screen and name them according to the naming convention defined
BEM is the best way to name the component in your design as it helps in scalable and adaptive naming, But however atomic method is still used for grouping the components.
1. Naming conventions for screens
While designing the application, naming the screens is also equally important as naming the components. Naming the screens should start with the numbering and name of the screen followed by the state. Then arrange all the screens according to the flow.
Example: 1.0_Homepage_Loading state
2. File naming convention
It is very crucial in managing the files in a project. It’s important to be able to find the file you need quickly and distinguish it globally (for example, within a search among all of your projects).
Here is the folder structure of a design project that you do. Numbering the files will help in organizing in a sequential way.
Example:The example of parent foldering
The example of child files of parent
Before naming conventions for your project, follow these steps
- List down all the artifacts that you need in the project
- Categorize the artifacts according to the phases or the process you follow
- Sequence all the artifacts by the following the order that you take while working on that project
- Onboard the team members on the structure that you followed in naming the folders
- Start creating the files in their respective folders.
Tips / Best Practices
- Plan naming convention at the start of the project artifact itself
- Have the naming relevant to the particular folder, file, or component
- Avoid long names for files, folders and components
- Ensure the sequence all the files in the folder according the process you follow by giving numbers at the start (01_Wireframes, 02_Visuals)
- Have versions names for all the files and folders and gather all the similar types of files into one folder
- Ensure that the naming conventions of layers are decided before designing the screen on the tool
- Do name the layers, elements and components while creating them
- Use names which are understandable by design and development teams.
- Separate words with hyphens or forward slashes
Checklist
- List down all the artifacts in the project
- Create folders for all the list down artifacts
- Create sub-folders inside a parent folder whenever there are multiple levels of artifacts
- Each filename or folder name be in the parent and child convention which you have decided upon
- Seggreate all the files into respective folders by giving appropriate names and numbering them
- Make sure all the files and folders are named properly
- Check whether you name the component is matched with the naming convention defined
Quick Question
Sequence the following statements according to the process that you follow in naming conventions
a. Identify all the states for each component
b. List down the common components which you want to use in the designs
c. Start creating the elements and name them according to the naming convention defined
d. Now decide the naming convention with your team
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
