exploreSelect context first
Many tools operate on the current selection. Select frames, text, or images before asking for edits.
Example
Select the hero frame only, then: “Rewrite headline for a colder, enterprise tone under 40 characters.”
Figma AI
AI design assistant in the Figma canvas for generating, remixing, and refining designs with your design system.
CodingDesign
How it works / How to use
AI design assistant in the Figma canvas for generating, remixing, and refining designs with your design system. On paid plans with a Full seat, open Actions in the Figma Design toolbar for focused tools (rewrite text, make images, rename layers), or chat with the Figma agent in the canvas for multi-step design work. AI credits are shared across Figma AI features—verify access, seat type, and admin settings before relying on a tool in production files.
- Open a Figma Design file (drafts work for trying AI across seat types; shared files require the right plan and seat).
- Pick your surface: Actions menu for a specific tool, or the agent (Cmd/Ctrl + Enter) for conversational edits.
- Select relevant frames or layers, state the outcome, constraints, and design system to respect.
- Review AI output against your system, then iterate with targeted follow-ups instead of full regenerations.
First Draft explorations
Run First Draft with Figma AI to turn an idea into editable designs in minutes, then refine manually or with the agent.
What to provide
- The screen or flow to explore (checkout, settings, onboarding)
- Platform and primary user action
- Brand or design system constraints if they exist
Details that improve the result
- First Draft helps you explore many directions quickly without building every frame from scratch
- Outputs are starting points—expect to edit spacing, tokens, and components afterward
- Available via Actions on eligible paid plans
Example prompt
First Draft: mobile subscription settings screen. Primary action: manage plan. Light theme, single-column layout, clear hierarchy for plan name, renewal date, and cancel path.
If the first output is not good
- Ask the agent to apply your component library to the First Draft result
- Replace placeholder content with realistic copy via Replace content
- Rename layers after major structure is approved
Common mistakes
- Treating First Draft output as production-ready without system alignment
- Skipping mobile constraints (safe areas, tap targets)
- Generating many unrelated screens before picking a direction
Figma agent conversational design
Select context on canvas, open the agent, describe what you want in natural language. The agent can generate designs, apply design systems, automate bulk edits, and summarize feedback.
What to provide
- Selected frame or layer context
- Plain-language goal: generate, edit, critique, or bulk-update
- Hard rules: tokens, components, copy limits, accessibility
Details that improve the result
- Full seats use the agent in shared files; other seat types can try it in draft files during beta
- Agent is free during beta but uses the shared AI credit system
- Different from Figma Make, which turns designs into interactive prototypes and published experiences
Example prompt
On this selected frame: convert the hero to use our marketing Button component, increase heading to display size token, and rewrite subcopy to under 120 characters with a neutral tone.
If the first output is not good
- Ask for feedback from a specific persona (e.g., new user vs VP of product)
- Request a summary of file comments before making changes
- Split bulk edits into one system rule per message
Common mistakes
- No selection context when the task depends on a specific frame
- Vague goals like “make it better” without criteria
- Assuming agent access when an admin disabled Figma AI for the workspace
Make and edit images
Use Actions → make or edit images, write a prompt tied to the layout slot, generate, and replace fills without leaving Figma.
What to provide
- Target frame or image fill to replace
- Written prompt describing subject, style, and exclusions
- Aspect ratio or crop constraints from the layout
Details that improve the result
- Generate and edit unique images with a written prompt directly in Figma Design
- Pair with Expand, Remove background, or Isolate when the asset needs cleanup
- Keep prompts aligned to the pixel box the image must fit
Example prompt
Generate a wide hero illustration: abstract data visualization, indigo and sand palette, minimal geometric shapes, no text, no faces, matches 1440×640 frame.
If the first output is not good
- Expand image if the crop cuts off important edges
- Boost resolution if the asset is soft at export size
- Vectorize if you need editable shapes instead of raster texture
Common mistakes
- Prompting a portrait when the frame is a wide banner
- Embedding long marketing copy inside image generation prompts
- Skipping background removal when the layout needs transparency
Rewrite, translate, and shorten text
Select text, run rewrite/translate/shorten from Actions, specify tone or target language, then scan against your content guidelines.
What to provide
- Selected text layers
- Desired tone, language, or character limit
- Words that must stay verbatim (legal, pricing, product names)
Details that improve the result
- Rewrite adjusts tone; translate targets another language; shorten fits copy to the design
- Works on real selection context—select only the layers you want changed
- Follow with Replace content if you need bulk unique placeholder text
Example prompt
Shorten this button label to fit 24px height. Tone: direct. Keep the word “Export” and do not add punctuation.
If the first output is not good
- Rewrite only the headline, leave body copy untouched
- Translate to French Canadian, formal product UI tone
- Ask the agent to check translated strings against layout overflow
Common mistakes
- Selecting the entire page when only one card needs rewriting
- Letting AI rewrite regulated or legal text without review
- Shortening without stating the pixel or character constraint
Replace placeholder content
Run Replace content to swap placeholder or duplicate strings with unique, realistic content across selected frames.
What to provide
- Frames with duplicate or lorem ipsum text
- Realistic domain context (fintech dashboard, fitness app, B2B admin)
- Fields that must remain placeholders (emails, IDs)
Details that improve the result
- Best for making mocks feel credible in reviews
- Combine with Rename layers for file hygiene before handoff
- Verify numbers and names before client-facing presentations
Example prompt
Replace content in these three dashboard cards with realistic SaaS metrics labels and values. Do not invent company names—use neutral examples.
If the first output is not good
- Re-run on only the cards that still look repetitive
- Manually fix any metric that looks implausible
- Translate replaced content if the prototype is localized
Common mistakes
- Replacing content in production design-system components
- Presenting invented metrics as factual
- Bulk replacing without locking approved marketing copy layers
Find assets and designs
Start asset search from Actions with a screenshot, cropped element, or description; open promising matches in context.
What to provide
- Screenshot, partial design, or text description of what you need
- Scope: team files, organization library, or Community
- Usage context so you pick the right variant
Details that improve the result
- Search across team, organization, and Community sources
- Use when you know the vibe or component but not the file name
- Follow library guidelines when reusing Community assets
Example prompt
Find an existing checkout flow with a sticky order summary on mobile. Prefer files from our Payments team library.
If the first output is not good
- Crop to the distinctive UI element before searching again
- Add the platform (iOS vs responsive web) to the description
- Open the top three hits and compare patterns before copying
Common mistakes
- Searching with vague terms like “nice dashboard”
- Copying Community components without checking license and maintenance
- Assuming search sees files your seat cannot access
Image cleanup and vectorization
Select the image layer, choose the single cleanup action, apply, then inspect at export zoom.
What to provide
- Raster image needing background removal, expansion, or isolation
- Which tool fits: Remove background, Expand, Select area, Vectorize, Boost resolution
- Export requirements (PNG transparency, SVG editability)
Details that improve the result
- Remove background isolates the main subject
- Expand extends beyond original borders—describe what belongs in the new area
- Vectorize converts raster to editable vector layers
- Boost resolution improves sharpness on low-res assets
Example prompt
Remove background on this product photo, then Vectorize the silhouette for a two-color marketing icon.
If the first output is not good
- Use Select area to isolate one object before erasing another
- Expand only the side that is clipped in the layout
- Re-boost resolution after vectorization if textures are needed
Common mistakes
- Vectorizing detailed photography expecting photo fidelity
- Expanding all edges when only one crop is wrong
- Removing backgrounds on images that need subtle shadows for realism
Prototype interactions and layer hygiene
Use Add interactions for quick prototypes, Rename layers for organization, and agent bulk edits for repetitive cleanup.
What to provide
- Frames to link into a flow
- Interaction goals (click, hover, navigate)
- Messy layer names or structure blocking handoff
Details that improve the result
- Add interactions turns static designs into interactive prototypes quickly
- Rename layers assigns meaningful names in one action
- Agent can automate bulk layer updates when files scale
Example prompt
Add interactions: tapping “Continue” on onboarding step 1 navigates to step 2. Then rename all layers on this page with consistent frame/component prefixes.
If the first output is not good
- Ask the agent to summarize prototype gaps before user testing
- Re-run rename after large merges or boolean operations
- Keep interaction prompts scoped to one user flow at a time
Common mistakes
- Linking prototypes before layout is stable
- Renaming layers before structure is finalized
- Creating interactions without stating trigger and destination frames
How to prompt
Figma AI works best when you brief it like a teammate: select the right context, name the outcome, list constraints, and say which design system or components apply. For the agent, describe user-facing results—not implementation steps. For generative plugins and shaders, tell the agent you want a plugin or shader, describe the user flow, and iterate.
Selection: mobile checkout frame. Goal: apply our design system primary button, increase price prominence, shorten shipping copy to fit one line. Constraints: keep existing spacing grid; no new colors outside tokens.
Describe outcomes, not build steps
Figma’s generative plugin guidance: tell the agent what users should experience; avoid prescribing how to code the plugin.
Example
Plugin: select any frame and export a PDF contact sheet of all nested icons with consistent padding.
Name design system constraints
The agent can apply design systems when you reference components, tokens, or libraries explicitly.
Example
Replace ad-hoc buttons with components from “Design System / Buttons / Primary”. Use existing text styles for headings.
Use trigger words for shaders
Figma’s shader prompting tips: use the correct trigger word, reference real-world analogies, and say what must stay the same.
Example
Shader: subtle paper grain overlay on this fill; keep base color unchanged; let me control intensity.
Plan to iterate
Figma recommends iterating with the agent—refine controls, explore available in-panel options, and adjust one requirement at a time.
Example
First pass: generate the layout. Second pass: tighten spacing on card list only. Third pass: rename layers.
Best output tips
Three ways to use Figma AI
Figma groups AI into the conversational agent, Figma Make for prompt-to-app prototyping, and individual Actions tools (rewrite text, expand image, rename layers, etc.). Pick the surface that matches the task scope.
Plans and seats
Individual AI tools require Professional, Organization, or Enterprise plans and a Full seat in Figma Design. All seat types can try AI in draft files; sharing may require upgrading.
Agent vs Make
The agent helps generate, edit, and maintain designs inside files. Figma Make turns ideas or existing designs into interactive prototypes and publishable experiences—use both in sequence when appropriate.
AI credits
Figma AI uses a shared credit system across features and products mentioned in help docs. Monitor usage on teams running heavy image or agent workflows.
Admin controls
Organization admins can disable Figma AI for a workspace. If Actions are missing, check admin settings before troubleshooting prompts.
First Draft expectations
First Draft produces editable explorations quickly to widen iteration space—it is not a substitute for system-aligned final design without manual cleanup.
Image tool chain
Make and edit images pairs with Remove background, Boost resolution, Expand, Select area, and Vectorize. Choose the smallest tool that solves the problem.
Text tools
Rewrite, translate, and shorten work on selected text. Replace content fills realistic unique copy across frames—useful for credible prototypes, not for unreviewed production strings.
Asset search inputs
Find assets and designs accepts partial designs, screenshots, or descriptions. More specific queries beat generic mood words.
Generative plugin prompting
Say you want a plugin or shader, describe user-facing behavior, reference real-world analogies, identify what must stay unchanged, and iterate on controls with the agent.
Accuracy responsibility
Figma notes AI outputs may be misleading or wrong. Treat suggestions as references; verify facts, accessibility, and brand rules before shipping.
Acceptable use
Use AI features in accordance with Figma’s Acceptable Use Policy. Some outputs may be labeled as AI-generated depending on product settings.
- Confirm plan, seat type, and admin AI settings before using tools in shared team files.
- Select the smallest useful context—frame, text, or image—before running Actions.
- State design system components and tokens when the agent should not invent new styles.
- Use First Draft for speed, then manually align to your system before review.
- Replace content and rewrite text separately; lock approved copy layers first.
- For images, chain Make → Remove background → Expand only as needed.
- Treat AI output as a draft—verify accessibility, copy, and metrics yourself.
- Remember AI credits are shared across Figma AI features and products.
- Use drafts to experiment when your seat cannot access AI in shared projects.
Try this AI
Product Details
Pricing, features, limits and latest updates
Product Details
Pricing, features, limits and latest updates
Figma AI
AI design assistant in the Figma canvas for generating, remixing, and refining designs with your design system.
Free / Paid · Free
Pricing Plans
Starter
Free
Professional Full seat
$16/ Monthly
Professional Dev seat
$12/ Monthly
Professional Collab seat
$3/ Monthly
Organization Full seat
$660/ Yearly
Organization Dev seat
$300/ Yearly
Organization Collab seat
$60/ Yearly
Enterprise Full seat
$1,080/ Yearly
Enterprise Dev seat
$420/ Yearly
Enterprise Collab seat
$60/ Yearly
AI credits (pay-as-you-go)
$0.03/ Usage
Key Features
Image Generation
Make Image in Figma consumes a fixed credit cost that depends on the selected model.
Automation
Figma Make turns prompts and designs into interactive apps; credit use varies by task.
Agents
The Figma agent is free during beta and does not consume AI credits until general availability.
Image Editing
AI image edits such as background removal, expand, and erase consume seat AI credits.
Design to Code
Figma Make generates interface code and interactive apps from prompts and existing designs.
Limits
- AI credits: Most Figma AI features consume shared seat credits; agent is free during beta (Figma AI credits help).
- Shared file AI access: Most AI tools in shared team files require a Full seat on Pro, Organization, or Enterprise (Figma AI getting started).
Ideas / Prompt experiences
Share a prompt that worked for you. Username and email are shown with your submission. External links are not allowed.
Example prompt
First Draft exploration
Prompt
Mobile checkout screen for a subscription app. Light theme, one primary CTA, price above the button, accessible contrast, no photography. Use existing design system components where possible.
Short explanation
Figma AI works best with surface, hierarchy, constraints, and whether to reuse system components.
Example prompt
Figma agent task on a frame
Prompt
On the selected frame: rewrite button labels for clarity, increase spacing between form fields, and add helper text under the email field. Do not change brand colors.
Short explanation
Select context on canvas and state hard constraints; agent features consume credits except during documented beta periods.
Share your experience
Required fields are marked. Variation, result, and explanation are optional.
You may also like
Cursor
ExploreAI coding agent for building software in your editor, terminal, and IDE.
CodingFree / Paid
AutoGPT
ExplorePlatform for building and running AI agents with visual Agent Builder, AutoPilot chat, scheduling, and 200+ integration blocks; self-host open source or use hosted Pro/Max plans.
CodingFree / Paid
