Layer naming – some approaches

Levels of fidelity Conventions Who is responsible?

When we name our layers, who names them, and to Every team is different, which means that the The person that names layers is also dependent on
what extent we name them is dependent on the guidance in this file is exactly that – a guide. the stage of your design process, the size of your
maturity of our design and the stage of the design You may land on your own ways of working based on team, and how much your developers are involved in
process (ideation, collaboration, ready for readability or how your engineering team prefers to the design process. I’ve described a few methods
handoff) we’re in. structure their components. below to help you get started.

The task
Let’s take the component below for example.
Scroll down

⌘ Card component

Latest template
A simple card component,

containing:
Section titl
Imag
Card titl
Card stat
Like
Duplicate
Description
File starter template 7 92 Coded example available on Codepen
A set of pages to kickstart your projects! The structure aligns to the
design process and splits out each section to make it easy for
someone to follow. There’s a dedicated “ready for development”
section, which we can guide our engineers to.

How would you structure the layers and name them? There are 100 different ways to do
this, but we can definitely start somewhere .

I’ll list a few approaches below, have a scroll and happy naming !

Level #0 – No layer naming

Naming doesn’t exist in this paradigm, because we’re still in free flow mode, ideating
and focussing on solving the problem first !

Figma Layer structure C omponent

F
⌘ rame 25
Latest template

File starter template 7 92

A set of pages to kickstart your projects! The structure aligns to the

design process and splits out each section to make it easy for
someone to follow. There’s a dedicated “ready for development”
section, which we can guide our engineers to.

Design stage
I deating Refining Ready for handoff
j
We’re ust having fun at this stage, so don’t need to pay too much attention to our
layer naming or structure.

Who is this done by?

File Creator File Editors D esign systems team
Because this is still very scrappy, we don’t need to be concerned about naming or
even using particular elements (maybe a rectangle is fine for a button ) !

Ready for the next level?

Level #1 – Refinement
Are you and your team preparing for sign off from your key stakeholders? This is where
we want to start thinking about how easy it is for someone to digest our ideas and
iterate on them, with clear layer naming helping this massively.

Figma Layer structure C omponent

⌘ community card

Latest template

File starter template 7 92

A set of pages to kickstart your projects! The structure aligns to the

design process and splits out each section to make it easy for
someone to follow. There’s a dedicated “ready for development”
section, which we can guide our engineers to.

Design stage
I deating Refining Ready for handoff
Be descriptive with our layer names here. Call a card a card, a number a number, and
a description a description.

Who is this done by?

File Creator File Editors D esign systems team
We’re still owning our designs individually at this stage, but we’re working with
colleagues on ideas. This is a great time to name our layers to make sense as a
group. The easiest way to achieve this is to be as descriptive as we can.

Ready for the next level?

Level #2 – Aligning to code

As your team matures over time, you may need a closer connection between the technical
side of our components (built by developers) and our igma files. This option is perfect F
for you if you’re in that stage .

Note: We’ll be looking at two similar approaches side by side here.

Block Element Modifier Naming with HTML markup

This borrows from engineering, but it’s a great If you’re building a web product, it might be
concept to get to grips with. We can start to F
worthwhile naming your igma layers how they’d be
align our layers with code here to make it easier presented in the frontend markup that your
for developers to quickly grasp how to structure developers will be writing.
their components.

Figma Layer structure C omponent Figma Layer structure

Latest template

File starter template 7 92

A set of pages to kickstart your projects! The structure aligns to the

design process and splits out each section to make it easy for
someone to follow. There’s a dedicated “ready for development”
section, which we can guide our engineers to.

What does the code look like?* What does the code look like?
Note: the markup below is a bit different to our Figma This is a stripped back version of the TML and H
layers, but close enough .

CSS, useful for illustrative purposes or if you’re

H
We’re only using TML and CSS here, so this would only be
planning to hand code something .

suitable for web layouts, but is a useful indication to

how we’d want the classes to look .

The likelihood is that your development team are

using a framework, or specific conventions for
If you’re designing for iOS, Android, or a custom naming their elements.

framework, your markup may look very different to what you

see below.

Take this with a pinch of salt

*could the code look like. There are lots of ways of
achieving this, so here’s one.

HTM L HTM L

CSS CSS

T his is scrollable T his is scrollable

Design stage
I deating Refining Ready for handoff
This is a technical approach, and is best handled once our components are in the
F
correct igma library, in a production-ready state. Any time before this would
require too many small-scale changes to our layer structure and could cause more
issues than it solves in the long run.

This method is best suited to when we’re “finished” with our ideation, and ready for
coding .

It’s also a great chance to collaborate on this with your developers too – there’s
no better design process than an open and transparent one. We want our team to be on
board with any approach we take, so applying the method at the right stage of the
design process is very important.

Who is this done by?

File Creator File Editors D esign systems team
Because of its technical nature, I wouldn’t advise using this approach for design
teams that aren’t closely aligned with their engineering counterparts, because the
naming only really makes sense if it’s used by both teams .

Because this method requires knowledge of markup language, it’s best handled either
by a technical designer, or by the design systems team themselves. It’s also best
!
done (important ) when your component is in the igma component library to prevent F
duplicate work when iterations happen during the ideation phase.

Ready for the next level?

Bonus – Merging a few concepts together

What if we wanted to borrow something from each of these concepts? Using igma’s F
component description field, we can meet these techniques in the middle and satisfy both
our design and engineering teams.

Borrowing layer names from Level #1 – Refinement

Level #1 – Refinement is the easiest approach to scan and read for the ma ority of our j
team, so let’s take this approach as a starting point.

Figma Layer structure C omponent

⌘ community card

Latest template

File starter template 7 92

A set of pages to kickstart your projects! The structure aligns to the

design process and splits out each section to make it easy for
someone to follow. There’s a dedicated “ready for development”
section, which we can guide our engineers to.

Extending the layer names

We can document our components using the description field to add notes about usage and
appropriate naming conventions. This will appear both for designers (in the properties
panel) and developers (in the inspect panel).

P roperties panel – What editors see I nspect panel – What viewers see

Adding documentation to our components

Because there are tonnes of different ways to implement our designs, we can help our
engineering team by adding useful annotations onto the canvas .

Note: we advise documentation be done in a separate file to our main igma component F
libraries. This is so that we can manage documentation and versionining in two separate
places, meaning our docs are always the correct version whilst we tinker on new ideas .

The below is an instance component with manually added notes that align to HTML.

h3 – section header Latest template

img – thumbnail

p – file title
File starter template 7 92
span – digit
A set of pages to kickstart your projects! The structure aligns to the
design process and splits out each section to make it easy for
someone to follow. There’s a dedicated “ready for development” SVG – icon
section, which we can guide our engineers to.

p – description

Design stage
I deating Refining Ready for handoff
Like our more technical approaches, this is best done once a component’s design has
been agreed upon and is being moved into the igma library file F .

This way, it can be set up properly once, and then published out to our wider team
for usage.

Who is this done by?

File Creator File Editors D esign systems team
With our design systems team being closest to the engineering team, we can align the
naming conventions, status, and any other important information with the correct
engineers and then add it to our igma component description. F

Made with ️by @disco_lu