Naming the things we create is one of the hardest tasks we face as technologists and it is incredibly important to get right. Accurately naming things allows our teammates to orient themselves around work they did not create. Accurate, descriptive names can contain context that hints at design decisions, communicating intent and purpose. Generally, we use Title Case when naming files, pages and components in Figma.
Figma file names should match their related project name, easy to find via search, and be easy to read. Examples: Listing Insights, Pricing Recommendations
Keeping track of the most current version of a design can be tricky. This guide talks about handy naming conventions for page names. Using Emoji is a nice way to set pages apart. One way we can solve page names is to standardize on a convention like the one below:
| Cover | Page dedicated to our project cover art |
|---|---|
| Design QA | Page for all screenshots and notes for QA |
| Version 3 | The most recent iteration of the design goes right below Cover |
| Version 2 | |
| Version 1 | |
| Wireframes | Any early ideas or wireframes can be kept here |
| 💀 Scrapped | Anything that was interesting but abandoned that does not need to be on a versioned page can be moved here. |
Components should be given a name that balances an accurate, specific description with brevity in a way that allows easy differentiation between components that have similar names. Simple enough, eh?
Base names are the foundational level of the component hierarchy. At the Base level, there are two classifications of names that we can use to describe the component: Object and Attributes.
The Object name is the description of what the component fundamentally is.
Examples: Grid, Card, Rack
When creating and naming components, every component must have an Object classification. This name is represented by the containing frame name in the library and does not need to be included in the actual name of the component.
The Attributes associated with an object describe the individual pieces that make the Object what it is. The Attribute name is often 1:1 with the semantic description of the item.
Examples: Image, Heading, Paragraph, Link
Attributes should not be included in the component name because they add unnecessary noise to the name at the highest level. However, Attributes are useful in detailed design system documentation and should be used to name the individual layers within a component.
