v01.2— updated 20221001
Info
⚠️ Use kebab-case
📄 Pages
👻 Description
🛠 Symbols & Components
context/element/variant
Examples:
post/card/large
site/block/small
post/button/pressed
article/content/highlighted
status-bar/bezel/light
btn/primary/hover
nav/header/mobile/dark
Notes:
- By explaining the component’s structure and functionality, these names provide context for the component without describing its appearance.
💬 Text Styles
category/type/size/style/alignment
Examples:
paragraph/primary/left
para/primary/italic/left
mobile/para/large/bold/right
Notes:
- It’s best to not use the actual name of the text, as that is an element that might change with a rebrand and would then have to be updated across the board
🪜 Layer Styles
context/element/variant
Examples:
ui/input/default
fill/primary/hover
shadow/high
Notes:
- These names are based on clear and obvious layer styling elements and leave no guesswork for collaborators.
🌈 Color Variables
use/variation
Examples:
primary/default
tertiary/light
brand/primary
brand/accent
functional/information
neutral/grey-000
Notes:
- Avoid naming colors; instead, describe their use.
📋 Artboards & Slices
Artboards:
YYYYMMDD-ClientName-ProjectName-DocumentName-v01
Slices post-fix examples:
-s
-xl
@1x
@3x
📑 Other Files
YYYYMMDD-ClientName-ProjectName-DocumentName-v01-00-ZT.ext
💡 General Best Practices
-
Keep names short and precise using kebab-case or CamelCase
-
Use leading zeros when trying to order files or when setting up a file structure
-
If needed, use a dash (-) as opposed to an underscore (_)
-
Use ISO date format (YYYY-MM-DD)
-
Use optional—but short—postfixes, such as wf (wireframe) and vis (visualization). These should be defined.
-
Use acronyms to display the file’s owner (ie ZT)
-
For complex projects, using Semantic Versioning. For simpler, use v1, v2, etc.
Three Things to Keep in Mind for Naming Conventions of Your Design System | OOZOU
File Naming Conventions within a UX Process
A naming convention for UI components
Best practices for design system naming conventions | Inside Design Blog
Naming conventions for your design system
Library Guides: Data Management for Undergraduate Researchers: File Naming Conventions