Better layer naming convention (and props) for better UI design hand-off.

In the realm of digital design, Figma stands out as a powerhouse tool, facilitating not just the creation of visually stunning interfaces but also ensuring a smooth transition from design to development. One aspect of this process that deserves attention is the nomenclature of layers within Figma projects. Establishing a clear and systematic naming convention for layers is paramount, and here’s why: it mirrors the semantic structure used in web development, bridging the gap between designers and developers. But there is something to take care of. It’s consistency. Having a design system is a thing, having well organized layers and frames with logical and consistent properties is an other thing.

Let’s delve into a hierarchical approach reminiscent of HTML’s structure: Main > Section > Container > Components. The ‘Main’ represents the body of the website, housing various ‘Sections’. Each section extends the full width of the viewport, centering its content for optimal readability and balance. The ‘Container’, typically nested within a section, often includes horizontal padding that aligns with a pre-established grid system, ensuring consistency across the design.

The only layers that designers should name are the layers inside containers and the components (which they should name by their…