Figma best practices

Improve your workflow and productivity while making your developers happy in the process by using these Figma practices

1. Clean and Clear Naming

One crucial habit for designers is to consistently name and organize all design assets. Properly labeling each layer ensures that your project remains well-structured and easy to navigate, which is especially important when passing it on to another designer or developer. Remember, these layer names will also appear in the exported code.

DO NOT leave your layer panel like this with names like Ellipse 1, Rectangle 2 etc.

Instead, name it something like this

Note: Dualite Semantic AI is coming soon and should make naming much easier.

Additionally, make sure to delete any layers, styles, frames and elements that are unused or hidden.

2. Use of Frames

We recommend that any sub-group or a collection of layers should be made into a frame for optimal conversion to code

Multiple objects, whether composed of vector elements or images, can be combined into groups to form a single symbol. However, it’s recommended to use frames instead. Frames offer all the capabilities of groups, plus additional logic that groups lack.

Important note: Beware of additional ‘redundant’ nested groups and frames

Frame 12, Frame 11 are redundant with no use