Figma — Rename Layers by Content

Turn a page full of Frame 1, Group 7, Rectangle 12 into a clean, self-describing layer tree. The skill reads what is actually in each layer and names it accordingly, so the Layers panel reads like a table of contents.

When this fires

A designer says something like:

• "Rename all the layers on this page based on what's in them."
• "Everything is called Frame 1, Frame 2 — clean it up."
• "Auto-name these frames and their children."
• "Batch rename my layers by content."

What it does (in plain terms)

For the current page, it looks at every top-level frame and walks down into its children. For each layer it can describe, it picks a name from, in order of preference:

1. The most prominent text inside it (largest font size wins — that's

usually the heading/label).

1. The component it is, or contains (e.g. an instance of Button).
2. Whether it's an image fill.

Names are written in readable Title Case (Profile Card, Primary Button, Hero Image). Anything it can't describe better than its generic type is left untouched — no churn for a plain divider rectangle.

Two important defaults (decided for safety, both configurable)

1. Intentional names are protected. By default only layers that still carry

a generic/default name (Frame 12, Group 3, Rectangle 1, …) get renamed. A layer the designer already named (CTA Button) is left alone. Set overwriteNamed: true to rename everything.

1. Renames run in batches. Layers are renamed in chunks (default 100 at a

time), and each chunk is committed as a single undo step via figma.commitUndo(). On a huge page the designer can undo one batch at a time instead of one giant action. Tune with batchSize.

If a designer asks for a specific simultaneous-rename count (e.g. "do 200 at a time"), pass that as batchSize.

How to run it (Claude + Figma MCP)

1. Load `figma-use` first. This skill produces Plugin API code; figma-use

is the mandatory prerequisite for any use_figma call.

1. Open the file/page to clean up.
2. Run the body of scripts/rename-layers.js via

use_figma. It returns a summary { renamed, candidates, page } and shows a Figma toast.

1. To customize, pass options, e.g.

renameLayersOnCurrentPage({ batchSize: 200, overwriteNamed: false }).

How to run it (no Claude — a designer running it themselves)

Use the ready-to-paste plugin in scripts/standalone-plugin/. No build step, no tokens, no placeholders — see that folder's notes for the three-click install.

Figma's built-in AI rename (manual fallback)

Figma ships an AI "Rename layers" command in the editor. It is excellent for nuanced, ambiguous layers — but it lives in the UI only and cannot be called from the Plugin API, so this skill's script can't invoke it. When the heuristic output isn't good enough for a tricky section, point the designer to the manual flow in references/figma-ai-rename-fallback.md.

Scope guardrails

• Operates on the current page only.
• Skips the internal layers of component instances (those belong to the main

component and usually can't/shouldn't be renamed).

• Never creates, deletes, moves, or restyles layers — it only sets name.

Deeper docs

• references/naming-heuristics.md — exactly

how a name is chosen, the generic-name regex, and how to extend it.

• references/figma-ai-rename-fallback.md

— when and how to use Figma's native AI rename instead.

• examples/before-after.md — a worked example.