Naming conventions: Organizing your design system
When creating a design system, you want to make everything original and different — for example, coming up with the most excellent names for colour styles or files. As a result, it usually takes more work to scale your design system to set the current and future systems.
To avoid this, it’s worth introducing a naming convention. His will help establish effective collaboration between designers and developers, making implementing and understanding all projects easier.
Principles
Naming conventions define the principles and goals of a project.
Several principles of naming conventions for a design system can be distinguished:
- Clarity and obviousness.
Names should be evident and unambiguous, so any team member can easily understand their meaning: void acronyms and ambiguous abbreviations.
2. Consistency and organization.
Names should follow a set sequence. his means both uniformity in using the same name for the same object and consistency in how each compound name is created. The sequence of names and attributes should be defined in advance and agreed upon. His will make objects and files easier to find and use.
3. Clarity and self-evidence.
Each name should indicate the function or purpose of the element. Se descriptive names
4. Prefixes and suffixes.
You can introduce prefixes or suffixes to distinguish between elements of different types. For example, you can use “btn” for buttons, “lbl” for labels, etc.
5. Using camelCase or kebab-case.
Choose the spelling style to be used in all names. For example, camelCase (first word with a small letter, following words capitalized) or kebab-case (words separated by hyphens).
6. Uniqueness.
Avoid repeating names to avoid usage conflicts.
7. Version control.
Use version control to specify the most recent version of a file. You can keep track of versions by adding information to the end of the name. t is most convenient to use the version number and date.
8. Documentation.
Keep documentation describing the naming convention so new colleagues or a new development team can quickly familiarise themselves with the project and get involved.
Categorizing user interface elements and templates
Categorizing user interface (UI) elements and templates is an essential step in organizing and systematizing the design system, as well as for naming conventions.
Here is an example of how naming conventions for UI elements and templates can be organized using generic categorization:
- Basic elements:
- Buttons: btn-primary, btn-secondary, btn-submit, etc.
- Text fields: input-text, textarea, etc.
- Icons: icon-heart, icon-search, etc.
- Headings: heading-h1, heading-h2, etc.
2. Containers and markup:
- Content blocks: content-block, text-block, etc.
- Grid: grid-container, grid-row, grid-col, etc.
- Cards: card, card feature, etc.
3. Navigation elements:
- Menus: menu-main, menu-footer, etc.
- Navigation links: nav-link, nav-dropdown, etc.
- Pagination: pagination, pagination-item, etc.
4. Controls and forms:
- Checkboxes and toggles: checkbox, toggle-switch, etc.
- Forms: form-login, form-registration, etc.
- Dropdown lists: dropdown, select-options, etc.
5. Media elements:
- Images and videos: img-thumbnail, video player, etc.
- Galleries: gallery, gallery-item, etc.
- Sliders: slider, slider-item, etc.
6. Page Structure and Components:
- Header and footer: header, footer, etc.
- Content blocks: feature section, info-block, etc.
- Social elements: social icons, share-button, etc.
7. Styles and Themes:
- Colours: colour-primary, colour-accent, etc.
- Fonts: font-heading, font-body, etc.
- Themes: theme-light, theme-dark, etc.
8. Functional elements:
- Search and Filtering: search bar, filter dropdown, etc.
- Notifications: notification, alert box, etc.
- Loading indicators: loader, spinner, etc.
This categorization will help you create structured and consistent names for elements and templates in your design system. t is convenient, but there are others.
You can also define your structure by categorizing elements and UI templates into categories or sections. To do this, you can use one of the following practical approaches:
01. Make an alphabetical list.
02. Create sections according to design atoms:
- Colours and fonts: Elements related to colours, fonts and styles.
- Layout and grid: Components that define the structure and distribution of elements on the page.
- Interactive elements: Buttons, links, dropdown lists and other aspects with interaction capabilities.
03. Divide by functionality
- Navigation: Elements related to navigating the site or application.
- Forms and input elements: Buttons, text boxes, checkboxes, and other elements used in forms.
- Media elements: Images, videos, galleries, and other multimedia components.
- Indicators and notifications: Progress bars, error messages, notifications, etc.
- Page structure: Headers, footers, sidebars and other structural elements.
For an exciting variant of categorizing and naming by functionality, see Naming conventions for your design system.
04. Create categories by content type.
- Textual content: Headings, paragraphs, quotes, etc.
- Multimedia content: Images, videos, icons, etc.
- Lists: Numbered lists, bulleted lists and other list items.
- Tables: Tabular elements and table styling.
- Forms: Input elements, buttons, dropdown lists, etc.
05. Divide by level of complexity
- Essential elements: Simple components such as buttons and text fields.
- Compound elements: Elements comprise essential aspects, such as cards and panels.
- Pages: Finished page layouts that include various components and elements.
06. Implement categorization by context of use:
- Home Page: Elements specific to the home page.
- Personal Profile: Elements used in users’ profiles.
- Products and catalogues: Elements related to the display of products and catalogues.
- Blog: Components used to display articles and other content.
Choosing a specific approach depends on the needs of your project. In addition, you can always combine multiple approaches.
Resources and tools that will be helpful at all stages of creating naming conventions
User Interface Guidelines — A complete guide to standardizing the design/code of user interface components based on 39 of the most popular reference systems.
File naming conventions checklist.
Component Gallery — A repository of UI components for anyone building user interfaces based on examples of the best design systems.
Building Blocks of UI — A list of UI elements based on the Single responsibility principle.
File Naming Convention Worksheet by Briney, Kristin A. includes selecting metadata, encoding and organizing metadata, adding version information, and adequately formatting file names.
A collection of Design Systems for Figma
You are organizing your design system with Onfido:
