Figma Plugin

AI Realtime
Renamer

Automatically renames your Figma layers as you design — using smart local rules or Claude AI. No interruptions, no manual renaming, clean layer panels from the moment you start.

⚡ Realtime Renaming✦ Claude AILayer Health PanelNo Signup RequiredYour API KeyPrivate & Local
AI Realtime Renamer
Figma Community Plugin · by Pleurat
Open in Figma ↗
Overview

Stop naming layers manually

Every designer knows the pain — you open a file and the layer panel is full of Frame 1, Frame 2, Group 5, Frame 12. Meaningful names get skipped when you're in flow. Then handoff arrives and the mess becomes everyone's problem.

AI Realtime Renamer fixes this by watching your document as you design and renaming frames the moment they're created or modified. A horizontal strip with a logo and links becomes Nav Bar. A card with an image and text becomes Content Card. Automatically. Instantly. Without interrupting your work.

Key Features

Everything you need, nothing you don't

⚡
Realtime Renaming
Watches your document live. The moment you create or restructure a frame, it gets a proper name. No button to press, no command to run.
✦
Claude AI Mode
Connect your Anthropic API key to enable Claude Haiku for real-time AI naming. Understands context local rules can't capture. The layer is renamed once with the final AI result — no intermediate flicker.
🎯
Quick Rename
Select any frame and instantly re-evaluate it. In local mode, re-runs the rule engine. In AI mode, sends the full tree to Claude Sonnet for the most accurate rename available.
📋
Rename Entire Page
One click to rename every unnamed frame on the current page. Parallel calls make it fast regardless of file size. Preserves any names you've already set manually.
🧠
Analyze & Rename Nested Layers
Sends your entire selection to Claude for deep structural analysis using parent, sibling and depth context. Best used before handoff for the cleanest possible result.
📊
Layer Health Panel
Scans the current page and shows a health score — what percentage of layers are properly named. Includes a progress bar, unnamed layer count, and a Point Layers button to instantly select all unnamed frames in Figma.
📜
Recent Renames Log
Every rename is logged with its tag (AI or auto), the resulting name, and a click-to-jump link. Expand into a full overlay panel without resizing the plugin window — scroll through the entire history while you design.
🔒
Respects Your Work
Never overwrites a name you set manually. Only frames with default Figma auto-generated names (Frame N, Group N) are eligible for renaming.
✳
Give Context Coming Soon
Analyzes your entire selection and generates a structured design document — component inventory, layout notes, and semantic context — built directly as a styled Figma frame in your canvas. Designed for handoff and documentation.
Modes

Local rules or AI — your choice

Local Mode
Rule-Based
Instant, free, offline. Uses structural signals — layout mode, child count, dimensions, image presence — to categorise frames deterministically.
  • Zero API calls, zero cost
  • Works offline, no key needed
  • Sub-millisecond with smart cache
  • Consistent, predictable results
AI Mode
Claude AI
Claude Haiku watches in real time. Understands nuance and context that rules can't capture. Renames the layer exactly once with the final AI result — no visible double-rename.
  • Realtime: Claude Haiku (~$0.0002/rename)
  • Quick Rename: Claude Sonnet with full tree
  • Single clean rename — no flicker
  • Your API key, stored locally only
AI Mode is a sub-setting of Realtime Renamer. You must have Realtime Renamer toggled on to activate AI Mode. Quick Rename and Analyze & Rename Nested Layers work independently regardless of the toggle state.
Layer Health

Know your file's naming health at a glance

The Layer Health panel sits between your settings and your action buttons. It gives you a live snapshot of how well-named the current page is — useful before starting a session or before handing off to developers.

→
Health Score & Progress Bar
Shows the percentage of frames with meaningful names. Colour-coded: green (≥80%), amber (≥50%), red (below 50%). Appears after every scan and updates in place.
→
Check Layer Health
Scans the entire current page and returns the total layer count, how many need renaming, and the computed score. One click — instant result.
→
⌖ Point Layers
After a health scan, click Point Layers to select all unnamed frames in Figma simultaneously. Pairs perfectly with Quick Rename or Rename Entire Page to clean them up in one action.
API Integration

How the Claude AI connection works

AI Mode connects directly from your Figma client to Anthropic's API — no server in between. Your key never leaves your machine except to call api.anthropic.com.

🔑
You enter your Anthropic API key
Paste your key into the AI Mode section. Saved via Figma's clientStorage — local only, never transmitted to the plugin author. Hit Test to confirm the connection before enabling.
🔒 Stored locally only
⚡
You modify a frame — plugin detects the change
Listens to Figma's documentchange event. Only structural changes trigger a rename — layout mode, children, dimensions. Cosmetic changes like fills and colours are filtered out entirely.
⬡ Structural filter active
✦
Compact frame description sent to Claude Haiku
A minimal JSON object is built from structural signals only — layout direction, dimensions, child types and count, image presence. Text content is never sent — only character count. Keeps prompts under 60 tokens.
// What gets sent to the API
{ t: "FRAME", l: "HORIZONTAL",
  w: 375, h: 56, children: [
    { t: "FRAME", w: 32, h: 32 },
    { t: "TEXT", len: 24, fs: 16 },
    { t: "FRAME", w: 80, h: 36 }
  ]}
// Text content is never included
Claude Haiku · ~$0.0002/call
✓
Claude returns a name — applied once, cleanly
The AI responds with exactly one name from the structural vocabulary (e.g. Nav Bar, Content Card). Applied directly to the layer — no speculative intermediate name, no double rename. Total round-trip: ~500ms.
~500ms end-to-end · single rename

Which model is used when

ActionModelContextCost
Realtime rename
As you design		HaikuSingle frame, depth 3~$0.0002
Quick RenameSonnetFull tree + parent context~$0.002
Analyze & Rename Nested LayersSonnetFull tree, all descendants~$0.003–0.008
Rename Entire PageHaikuPer frame (parallel)~$0.0002 × frames

Getting your API key

1
Create an Anthropic account
Go to console.anthropic.com and sign up. New accounts get a small free credit.
2
Generate an API key
API Keys → Create Key. Name it "Figma Plugin". Copy the key — starts with sk-ant-.
3
Add a small credit balance
Billing → Add credits. $5 covers months of typical design work. ~$0.05/day in active sessions.
4
Paste into the plugin and hit Test
AI Mode section → paste key → Save → Test. Green confirmation = you're connected.
Usage tip: Set a monthly spend limit in the Anthropic Console under Billing → Limits to cap costs automatically.
How It Works

Simple setup, intelligent output

1
Install and open the plugin
Install from Figma Community. Open via Plugins → AI Realtime Renamer. Starts immediately with Local Mode — no configuration needed.
2
Design normally
Create frames, add components, build layouts. The plugin watches in the background and renames frames as you go. Your layer panel stays clean automatically.
3
Check your Layer Health
Click Check Layer Health at any point to get a score for the current page. Use Point Layers to select every unnamed frame at once, then run Quick Rename or Rename Entire Page to fix them.
4
(Optional) Enable AI Mode
Add your Anthropic API key in the AI Mode section and toggle it on. Claude Haiku takes over real-time naming with a single clean rename pass. Test your key first to verify the connection.
5
Use Quick Rename or Analyze before handoff
Select any complex frame and click Quick Rename for a fast re-evaluation, or Analyze & Rename Nested Layers for the deepest pass — Claude Sonnet with full structural context for the entire tree.
Naming Vocabulary

Generic structural names only

All names describe what something is structurally, not what it means in your product. Portable across projects, no wrong semantic assumptions.

Nav Bar
Horizontal strip with logo and links
Tab Bar
3–6 icon+label navigation tabs
Card
Image and text, ≥4 descendants
Item
Image or avatar + text, shallower
List Item
Horizontal icon + text row, no image
Label
Short text pill or tag, no image
Feature Block
Icon + heading + body copy
Form Block
Multiple stacked input fields
Input Field
Single text input element
Action Bar
Button group or CTA strip
Content Section
Full-width section, many descendants
Media Block
Image dominant, minimal text
Text Block
Text only, no media or buttons
Avatar
Circular image + name
Row / Column
Pure directional layout
Container
Mixed or generic wrapper
Performance

Built for speed

<1ms
Local rename
with cache hit
350ms
Debounce delay
before rename fires
~500ms
AI rename
end-to-end

Structural fingerprint caching uses 20px position buckets and aspect-ratio classification, so identical frame shapes skip the scorer entirely — cache hit rate is much higher than a naive implementation. Single-child nodes (a lone text, vector, or image) bypass the full scoring loop with an early exit. Cosmetic changes (fills, colours, opacity) are filtered before any scoring runs. For Rename Entire Page, AI calls fire in parallel, not sequentially. In AI mode, the layer is renamed exactly once with the final Claude result — the previous double-rename flicker is gone.

Tips & Best Practices

Get the most out of it

Tip 01
Start local, switch to AI for complex screens
For nav bars and basic cards, Local Mode is instant and accurate enough. Switch AI Mode on when building multi-column layouts, nested cards or dashboard panels.
Tip 02
Use Layer Health before every handoff
Run Check Layer Health to see the exact count of unnamed frames. Point Layers selects them all at once — then hit Rename Entire Page or Quick Rename to fix them in one pass. Aim for 100% before sharing with developers.
Tip 03
Name top-level screens manually
Screen-level frames like "Onboarding / Step 1" carry product context no AI can infer from structure. Name those yourself — let the plugin handle everything inside.
Tip 04
Collapse the plugin while designing
The Collapse button shrinks the plugin to a small icon. Realtime Renamer keeps running in the background. The status dot in the header turns orange when AI Mode is active so you always know the current state at a glance.
Tip 05
Use Rename Entire Page on messy inherited files
Joined a project where everything is "Frame 47"? Click Rename Entire Page. Renames all unnamed frames in parallel — 200 frames takes about the same time as 20. Preserves any names already set by the team.
Tip 06
Expand the Recent Renames log anytime
Click the expand icon in the Recent Renames header to open the full log as an overlay inside the plugin — no window resize. Every entry shows the AI or auto tag, the name, and a click-to-jump link. 💡 Click any entry in the log to focus that layer directly in Figma.
Tip 07
Watch usage on your first day
Check the Anthropic Console to see your actual usage pattern. Most designers land well under $0.05/day. 💡 Set a monthly spend limit in Console → Billing → Limits to cap costs automatically.
Tip 08
Structure your frames intentionally — the AI reads structure, not meaning
Both modes read structural signals: layout direction, child types, dimensions, image vs icon presence, and word count in text nodes. A horizontal frame with an image and two text nodes reads as "List Item". The same elements stacked vertically reads as "Card". An avatar in the mix makes it "Item". Clean Auto Layout structure = more accurate names.
Changelog

What's new

v1.2
Layer Health, Rename Log overlay & performance overhaul
  • New Layer Health panel: health score, progress bar, Check Layer Health button, and ⌖ Point Layers to select all unnamed frames in Figma
  • Recent Renames log now opens as a fixed overlay panel — click the expand icon to view full history without resizing the window
  • Click any log entry to jump directly to that layer in Figma
  • Renamed: Fix Selected → Quick Rename; Whole Page → Rename Entire Page; Analyze & Rename → Analyze and Rename Nested Layers
  • Eliminated double-rename flicker in AI mode — layer now renamed exactly once with the final AI result
  • Structural fingerprint cache: 20px position buckets + aspect-ratio classification (~2–3× faster local rename)
  • Early exit for single-child nodes — bypasses full scoring loop entirely
  • Scan tree depth reduced from 5 to 3 levels for realtime pass
  • Scan prompt compacted (~35% fewer tokens), max_tokens reduced 1200 → 800
  • Progress bar throttled to every 5 nodes — eliminates UI jitter on large pages
v1.1
AI Mode & naming vocabulary refinements
  • Claude Haiku realtime renaming with API key input, Save, and Test connection flow
  • Analyze & Rename using Claude Sonnet with full descendant tree
  • Refined naming rules: Label vs Item vs List Item driven by word count + image/icon distinction
  • Container rule for mixed icon + image + text layouts
  • Icon vs image distinction (vectors/SVGs vs photo fills) driving separate naming paths
  • Labels no longer applied when images or avatars are present regardless of text length
v1.0
Initial release
  • Realtime layer renaming with local rule engine
  • Collapsible plugin icon with live status indicator
  • Whole page rename with parallel execution
  • Dark mode support with automatic light/dark detection
FAQ

Common questions

Do I need an API key to use this?
No. The plugin works fully without any API key using local rule-based naming. An Anthropic API key is only needed if you want Claude-powered renaming in AI Mode.
Is my API key safe?
Yes. Stored via figma.clientStorage — local to your machine only. Never sent anywhere except directly to Anthropic's API when AI Mode is active.
Will it rename layers I've already named manually?
Never. Only frames with default Figma auto-generated names like Frame 1, Group 5 are eligible. The moment you give a layer a custom name, it's permanently excluded.
How much does AI Mode cost to run?
Real-time renaming uses Claude Haiku — approximately $0.0002 per rename. Quick Rename uses Claude Sonnet — approximately $0.002 per tree. A typical session with 50–100 renames costs well under $0.02.
I used to see a name flash and then change — is that fixed?
Yes. Earlier versions applied a speculative local name immediately and replaced it when the AI responded, causing a brief flicker. AI mode now renames the layer exactly once — with the final Claude result only. The layer stays as its original Figma name until Haiku responds.
What does Layer Health actually check?
It scans every frame, group, and component on the current page and counts how many still have Figma's default auto-generated names. The health score is the percentage with meaningful names. Point Layers then selects all the unnamed ones in Figma so you can fix them in one action.
What happens if the AI call fails or times out?
The layer keeps whatever name it had before the rename was triggered — it's never left in a broken state. If AI mode is unavailable the plugin notifies you via the status bar.
Can I use this on an existing messy file?
Yes. Use Rename Entire Page to rename every unnamed frame on the current page at once. Or run Check Layer Health → Point Layers to select only the unnamed ones, then fix them with Quick Rename. Both work independently of the realtime toggle.
Does it work with components and groups?
Yes. AI Realtime Renamer handles Frames, Groups, and Components. Instances are not renamed — their names are controlled by the main component definition.
About

Made by a designer, for designers

✦
Author
By Pleurat, built by a designer for designers. AI Realtime Renamer started as a personal tool, born from the frustration of messy layer panels, and evolved into a fully AI-powered plugin. Carefully crafted and personally maintained.
View LinkedIn ↗