Figma Layer Rename — Semantic Names for Frame/Group Layers

Figma files built fast — or generated by tools like Figma's Design Agent or Code to Canvas — come out full of layers called Frame, Frame 2, Group 14. They are hard to read, hard to hand off, and hard for any AI tool to reason about later. This skill reads the whole layer tree, proposes a meaningful name for each generic layer, and applies only what you approve.

What it does

• Walks the entire tree of a Figma FRAME or SECTION and detects auto-generated names: Frame N, Group N, Rectangle N, Ellipse N, Vector N, bare Frame or Line, and more
• Infers a semantic name for each from its type, position in the layout, and the content of its siblings and children — a rectangle under a card becomes Divider, a group of two texts becomes LabelGroup
• Matches the naming style already in your file (kebab-case, spaced Title Case, PascalCase) instead of imposing one
• Optionally catches duplicate-but-real names, such as four different sections all named Section, at a depth you choose, and collapses margin/padding wrapper frames from Code to Canvas captures before counting
• Treats an icon made of several paths as one icon and renames the container, not every path inside it
• Shows a numbered table of Node ID, current name, proposed name, and reason — you approve all, or pick numbers
• Handles big frames in stages, one section at a time, when there are dozens of candidates

How it works

1. Give it a Figma frame or section URL
2. It fetches the layer tree and lists rename candidates
3. You reply yes, or the numbers you want
4. It applies the renames in a single call and reports which were applied and which were skipped

Safe by design

Only layer names change — no structure, fills, variables, or layout. Renaming inside a component instance would create a local override that silently diverges from the main component, so instance subtrees are skipped entirely. Nothing is written until you confirm.

What it is not

It does not bind variables, change auto-layout, or edit component properties, and it does not accept component or component-set URLs. Proposed names are inferred from context, so glance at the table before approving.

Requirements

Runs inside an agent connected to the official Figma MCP server — the same connection used for implementing Figma designs as code. Needs edit access to the Figma file. No local file access and no arbitrary network calls.

Works well with

Run it right after a Code to Canvas or Design Agent capture, and before binding variables or componentizing.

More from KMRVID

The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills