#Naming conventions (Designers)

Persist the same component name throughout the design, code, and conversation Nathan Curtis

#Naming space

Eufemia makes use of a very simple 8px unit grid. Margins, paddings, and distances consist of multiples of 8 (mostly - sometimes half and quarter units are required). If we were to combine multiples of this 8px 'space block', we could end up with something like this:

These titles can then be transferred to components, for example, tables. A 'medium' table would refer to the amount of padding in the cells.

The same can apply to components such as cards, form rows, etc. Responsive breakpoints can switch between these spacing units to expand or contract the overall size of an object.

#Naming Colors

Eufemia for the web uses a simple naming system:

Depending on where the color will be used, its name formation will be different. For example, in Figma (and other design tools), the name is constructed thus:

The color name is written with spaces between words. The first word starts with capital. Some color names have a percentage sign denoting the tint value.

Example:

Whereas in CSS as a custom property this is written:

Colors have a naming convention across all platforms and formats. Please refer to the table in colors section.

NB! Android and iOS will have a different format for the same names. This guide is for application in web products.

#Naming conventions in design applications

We don't have a naming convention for design files in Figma. However, it is encouraged to name your design file frames and interface designs with clear logical names in English.

However, to maintain consistency, in Figma we name Pages and Frames (canvases) with the first letter capitalized.

Example of a Figma Page name:

Example of a Figma Frame name:

Actual components are written with all small letters.

Example of a Figma component name:

If in doubt, look at the main Eufemia file - Eufemia - Web.