Select what to name
Open your file in Figma Design and select the layers, frames, or components you want to rename.
Name every component with a single prompt
Figma's agent applies clear, consistent naming conventions to your layers and components directly in Figma Design. Describe your naming pattern once, and it handles the rest—no manual renaming across dozens of frames.
Naming that scales with your system
Clean naming conventions keep your design system usable. The agent applies them automatically so your team can find and reuse components without guessing.
Cut the busywork, stay in flow
Hand off the tedious work of renaming layers and components to the agent. Describe your naming convention—prefix, suffix, hierarchy—and it applies the pattern across your selection so you can focus on building, not labeling.
Apply conventions consistently at scale
Whether you're naming ten components or a hundred, the agent follows your pattern exactly. No more mismatched names, typos, or forgotten layers breaking your design system's findability.
Keep your team aligned on structure
When naming happens in the shared file, everyone works with the same organized structure. No confusion about which component is which, and no separate cleanup pass before handoff.
Figma feels like a natural extension of my hand. I do my design ideation on the canvas, and now the agent takes it the last mile. With my design libraries connected, I can move from design to code faster than ever before.
Andy Madrick
Product Designer, Notion
Get started with Figma's agent
Describe your naming convention
Tell the agent your pattern—'use BEM naming,' 'prefix with the page name,' 'follow atomic structure.' The more specific, the cleaner the output.
Review the names
Check the renamed layers on your canvas. Refine in the same thread if something needs adjusting, or try a different pattern in a parallel one.
Keep refining
Everything stays editable, so you can fine-tune individual names by hand or prompt again until your file is organized exactly how you want.
Become an agent expert
The Figma design agent is here
Read moreWatch Figma's AI Agent in action and see how to put it to work in your own workflows.
Work with the Figma agent
Get startedHands-on playground to explore Figma agent's capabilities — from bulk edits to feedback implementation — with step-by-step guidance built right in.
How to use Figma agent in your design workflows
Watch nowLearn how to use Figma agent in your design workflows with a step-by-step tutorial from the Figma team.
FAQ
An AI component namer automatically applies naming conventions to your design layers and components based on a prompt. With Figma's agent, you describe your naming pattern—like BEM, atomic, or a custom prefix system—and it renames selected elements directly on your canvas. This saves time on manual renaming and keeps your files consistent.
You select the layers or components you want to rename, then describe your naming convention to the agent. It interprets your pattern and applies it across your selection in one pass. You can refine in a follow-up prompt if anything needs adjusting. All changes happen directly in your file.
Consistent naming makes your design system easier to navigate and maintain. When components follow a clear pattern, teammates can find what they need without guessing. It also reduces errors during handoff, since developers can rely on predictable, organized names rather than deciphering inconsistent labels.
Select the layers you want to rename, open the agent from the left side rail or hit CMD + Enter, and describe your naming convention. The agent applies your pattern across the selection at once. You can refine with follow-up prompts in the same thread until the names are exactly right.
Figma's agent is available on all paid Figma plans. You'll find it in the left navigation bar in Figma Design. During the current open beta, it doesn't consume AI credits—so it's a good time to explore, experiment, and share your feedback with us.
Build faster with Figma's agent