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 AI No Signup Required Your API Key Private & Local
AI Realtime Renamer
Figma Community Plugin · by Pleurat Shala
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 — distinguishes a blog card from a pricing card based on layout signals.
🎯
Fix Selected
Select any frame and rename its entire tree at once. In AI mode, uses Claude Sonnet with full tree context for maximum accuracy.
📋
Whole Page Rename
One click to rename every unnamed frame on the current page. Parallel calls make it fast regardless of file size.
🧠
Analyze & Rename
Sends your entire selection to Claude for deep structural analysis using parent, sibling and depth context. Best used before handoff.
🔒
Respects Your Work
Never overwrites a name you set manually. Only frames with default Figma names (Frame N, Group N) are eligible for renaming.
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. Speculative naming shows a result instantly while AI refines it.
  • Realtime: Claude Haiku (~$0.0002/rename)
  • Fix Selected: Claude Sonnet with full tree
  • Speculative name applied instantly
  • 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. Fix Selected and Analyze & Rename work independently regardless of the toggle state.
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 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 are filtered out entirely.
⬡ Structural filter active
⚡
Local name applied instantly (speculative)
Before any API call, the local rule engine runs in under 1ms and applies a name. You always see a meaningful name immediately — never "Frame 12" — while the AI processes.
Instant · zero network latency
✦
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 ~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 single layer name
The AI responds with exactly one name from the structural vocabulary (e.g. Nav Bar, Content Card). The plugin replaces the speculative name silently. Total round-trip: ~500ms.
~500ms end-to-end

Which model is used when

ActionModelContextCost
Realtime rename
As you design		 Haiku Single frame, depth 3 ~$0.0002
Fix Selected Sonnet Full tree + parent context ~$0.002
Analyze & Rename Sonnet Full tree, all descendants ~$0.003–0.008
Whole Page Haiku Per 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
(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. Test your key first to verify the connection.
4
Use Fix Selected before handoff
Select any complex frame and click Fix Selected. Claude Sonnet renames the entire tree with full context — the most accurate rename available.
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 combined
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
List Item
Compact horizontal icon+text row
Avatar
Circular image + name
Row / Column
Pure directional layout
Container
Generic wrapper with children
Label
Small pill or tag element
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 means identical frame shapes skip the scorer entirely. Cosmetic changes (fills, colours, opacity) are filtered out — only structural changes trigger a rename. AI calls fire in parallel, not sequentially. In AI mode, a speculative local name is applied immediately while Claude processes in the background.

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
Run Fix Selected before every handoff
Even with Realtime Renamer on all session, run Fix Selected on your top-level frame before dev handoff. Claude Sonnet with full tree context catches anything a real-time pass might miss during rapid iteration.
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. The icon turns orange when AI Mode is active so you always know the current state.
Tip 05
Use Whole Page on messy inherited files
Joined a project where everything is "Frame 47"? Click Whole 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
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 07
Structure your frames intentionally — the AI reads structure, not meaning
Both modes read structural signals: layout direction, child types, dimensions, image presence. A horizontal frame with an image and two text nodes reads as "List Item". The same elements stacked vertically reads as "Card". Clean Auto Layout structure = more accurate names.
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. Fix Selected uses Claude Sonnet — approximately $0.002 per tree. A typical session with 50–100 renames costs well under $0.02.
What happens if the AI call fails or times out?
The speculative local name (applied instantly) remains. The frame is never left as "Frame 12". If AI mode is unavailable the plugin silently falls back to the local result.
Can I use this on an existing messy file?
Yes. Use Whole Page to rename every unnamed frame on the current page at once. Or use Fix Selected to clean up a specific area. 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

✦
Pleurat Shala
Designer and developer building tools at the intersection of design and AI. AI Realtime Renamer started as a personal tool — a frustration with messy layer panels — and grew into a fully AI-powered plugin. Crafted with care, maintained personally.
View LinkedIn ↗