Design Structure & Responsiveness
Better Layering Name

Layer Naming for better code

Generate better code with a few simple to execute tips. Your engineers will love you for it!

  1. Use meaningful layer names

Name your layers such that people can guess your design just by looking at your layers tree:

  1. Use a prefix to indicate where the element is found

Adding a prefix helps engineers guess where the element is used easily

  • navigation-logo
  • navigation-menu
  • navigation-help
  1. Use a suffix to indicate what type of element it is

Add a suffix to groups and frames to indicate the type of element it is. This helps engineers to guess the structure of your design

  • -container
  • -button
  • -input
  • -checkbox
  • -section
  • -card
  1. Describe the purpose, rather than the contents

Rather than writing “phone-image”, writing “home-banner-image” helps to indicate where and what these images are used for.

By taking a few minutes to name your layers, the generated code will be much easier to read and maintain.