Your layers have always had names, now they actually matter

For a long time, naming layers in Figma was mostly about hygiene. It helped navigate files, made handoff a bit easier, and kept things somewhat tidy. Useful, but not critical. If naming was off, the product still shipped.

Layers build context

With MCP servers and design-aware AI models, layers are read directly from Figma. These tools don’t interpret visuals the way we do.

HTML runs on markup. In a similar way, the better markup and structure we can provide through our layers, the better guidance we give to AI agents, and the better the outcome we end up with.

If layers are named loosely, wrapped into ten frames, or lack clear context, the automation tools we’re moving toward start to fail, or produce output that doesn’t match what was designed.

Design systems are connected to layers

In BBUI, components are intentionally layered. A Card is not a single frame. It’s composed of multiple nested components, each with its own set of variables, props, and variants. All of this data is available when an AI agent reads the design context directly from your layers.

Looking at the Card structure in Figma, you’ll see:

• Card wrapper
• Header component
• Content container
• Card container with a heading element and Card component

Each of these layers has a specific responsibility. None of them are named based on how they look visually. They’re named based on what they represent in the markup, while at the same time providing layout, styling, and alignment rules through the layer structure itself.

Why this matters for AI tools

When an AI model reads a design file like this, it doesn’t see a “nice card layout”. It sees a hierarchy of named layers and pulls metadata from each layer to build the requested design.

If those names align with real component markup, the AI can reason about the design correctly.

If the same Card were built as a flat group with generic layer names, most of that context would be lost, and the output would reflect the AI’s assumptions instead of what was actually designed.

Naming is now part of the workflow

Layer naming is no longer a personal preference or a clean-up step. It’s part of the workflow when building with AI.

In BBUI, naming follows the same logic as component anatomy. Not because it looks cleaner in the Layers panel, but because it allows AI tools to read and understand the design with much higher accuracy.