There are a lot of designers contributing to Malty’s libraries (and a lot of people checking and inspecting the prototypes) - so, it’s fundamental we all follow the same naming rules.
Components syntax
A component will generally have the following syntax:
component name-component specificity
|
component name |
Think of the most generic name you can give your component. Forget if it’s specific to the website’s cart or the login page. Just name it as vanilla as you can, e.g. “button”, “input”, “pill”, “header”. |
|
component specificity |
Does your component have any particular characteristic? If so, add it to its name, e.g. “toggle”, “text”, “rounded”. |
You should end up with names like the following:
- button-toggle
- input-text
- pill-round
If there is anything even more specific about that component, you can add a third level to its name.
However, we strongly recommend you not to. Please consider first if this second specificity needs to be in the name of the component or if it can just be a Variant Property.
component name-component specificity--modifier
|
modifier |
What’s so special about that component? Why is it different from the others that don’t have this second specificity? e.g. A progress bar that shows the percentage vs. a progress bar that shows a label saying “Loading table data...” |
You should end up with names like the following:
- progress-bar--percentage
- progress-bar--feedback
Atoms syntax
Now, specifically for component Atoms, as we mentioned earlier, the Atoms must be nested inside the parent component.
How do we achieve this? It’s simple!
full component name-atoms-atom name
|
atom name |
Let’s say you’re creating a date picker component and it uses multiple atoms. You’ll need to choose the name for your atom. In this example, imagine you’re creating the calendar day atom, e.g. “calendar-day” |
You should end up with names like the following:
- calendar/atoms/calendar-day
- modal/atoms/header
Variant properties
Whenever a component has different variants, we use Figma’s Variants. We encourage contributors to use the same property values where applicable, as we’ll exemplify below.
The properties must always be spelt in lowercase.
Selection properties examples
|
Size |
xs s m l xl |
|
Type |
notification fail alert success |
|
State |
default disabled enabled hover |
|
Device |
mobile tablet desktop |
Boolean properties examples
|
Select |
true false |
|
Filled |
true false |
|
Enabled |
true false |
|
Icon |
true false |
|
Leading icon |
true false |
|
Trailing icon |
true false |
|
Title |
true false |
|
Description |
true false |
|
Button |
true false |
|
Thumbnail |
true false |
Use these boolean properties whenever you want to show or hide optional features or when you can enable/disable, fill/empty, select/deselect the component itself.