UStackUStack
Figma AI icon

Figma AI

Figma AI adds AI features inside Figma to help teams explore ideas, create interactive designs, refine assets, and speed up design-to-code.

Figma AI

What is Figma AI?

Figma AI is a set of AI features inside Figma and connected tooling that helps designers and teams move from ideas to working prototypes and production-ready output faster. The product focuses on common workflow tasks—ideation, creating and refining design assets, and speeding up repetitive work.

Figma AI is presented as a creative collaborator that supports different ways of working, including prompting, code, and design-driven flows. It also includes options intended to bridge design context into agentic coding tools, reducing friction between design and implementation.

Key Features

  • Figma Make (prompt-driven exploration): Use prompts to generate design possibilities in Figma, aimed at exploring a range of concepts.
  • Code Layers (interaction and motion via prompts): Add interactive elements, animation, and text effects using prompts, described as working without requiring coding experience.
  • Figma Sites (site publishing from Figma context): When ready, publish a site or ship a product through a workflow that uses Figma context.
  • Figma MCP server (design context for coding agents): Provides Figma design context directly to agentic coding tools such as VS Code, Cursor, Windsurf, and Claude to speed up design-to-code workflow.
  • Image generation and refinement (Gemini 3.0 Pro + GPT Image 1): Generate new images or refine existing ones using Gemini 3.0 Pro and OpenAI’s GPT Image 1.
  • Layer organization helpers (automatic renaming): Contextually rename and organize layers with a click.
  • Text assistance in design mocks (generate, replace, rewrite, translate): Generate and replace text, adjust length and tone, and translate directly within design files.
  • Background removal (one-step removal): Remove image backgrounds in one step to avoid manual lasso-and-erase workflows.
  • FigJam AI (diagram and feedback assistance): Turn complex ideas into simpler diagrams, sort feedback, and automate tedious tasks in FigJam.

How to Use Figma AI

Start by opening your design or FigJam board in Figma, then select the relevant AI feature for the task you’re doing. For early ideation, use Figma Make to prompt for design possibilities.

For building interactive experiences, use Code Layers to add interactions, animation, or text effects by typing prompts rather than writing code. For design content updates, use AI tools to generate or replace text, rewrite or translate copy, rename and organize layers, or remove image backgrounds.

If you’re working across design and code, use the Figma MCP server to bring design context into agentic coding tools like VS Code, Cursor, Windsurf, or Claude, so your coding workflow can reference the Figma design.

Use Cases

  • Rapid concept exploration for a UI: Prompt Figma Make to explore multiple design directions without committing to a single idea immediately.
  • Adding interactions to a mock without writing code: Use Code Layers to create interactive elements, motion, and text effects in the design by providing prompts.
  • Preparing design content that matches a target voice: Generate or replace text in mocks, then rewrite to adjust length and tone or translate copy until it fits.
  • Cleaning up image assets for mockups: Remove image backgrounds with a one-step flow rather than manually selecting and erasing background areas.
  • Turning complex workshop notes into diagrams: In FigJam, use FigJam AI to convert dense ideas into diagrams and organize feedback.

FAQ

  • Where can I find Figma’s AI features? The page indicates that Figma AI features are part of Figma and FigJam experiences (e.g., Figma Make, Code Layers, and FigJam AI). Exact locations within the UI aren’t specified on the provided content.

  • Who has access to Figma’s AI features? The provided content includes an FAQ section titled “Where can I find… Who has access…”, but it does not state eligibility or roll-out details. It’s best to check the FAQs on the site for the specific access rules.

  • How do AI credits work? The page lists “How do AI credits work?” as a FAQ item, but does not include the explanation in the provided text. Refer to the site’s FAQ for the credit mechanics.

  • Do you offer AI copyright protection? “Do you offer AI copyright protection?” is listed as a FAQ item, but the provided excerpt does not include an answer. Consult the full FAQ for the policy details.

  • What are Figma’s AI features based on? The excerpt specifies that image generation/refinement uses Gemini 3.0 Pro and OpenAI’s GPT Image 1, and that design-to-code context is provided through the Figma MCP server. It does not detail all underlying models for every feature.

Alternatives

  • AI-assisted design and prototyping tools: Alternatives in this category also generate or refine design assets from prompts, but may focus less on design-to-code context handoff.
  • Diagramming and whiteboarding tools with AI features: Tools that automate diagram creation and feedback organization can substitute for FigJam AI, typically with less emphasis on Figma-native design workflows.
  • General AI image editors: Dedicated image generation/refinement tools can replace Figma’s background removal and image generation/refinement steps, depending on whether you need outputs inside your Figma file.
  • Agentic coding tools without design-context integration: Coding assistants that don’t include a design-context bridge may require more manual translation of design intent compared with workflows that use the Figma MCP server.