The Figma Design Agent is Here | Figma Blog (opens in new tab)

Figma introduces a design agent built directly into its canvas and left rail. Unlike external tools, it understands a team’s components, tokens, libraries, standards, and best practices, while preserving designers’ ability to manipulate files directly. The agent is intended to support exploration, iteration, collaboration, and repetitive production work without forcing a choice between AI speed and design precision.

A Figma-native design agent

• Works inside the same Figma file as the team, acting as a collaborative partner.
• Can start from any design layer and generate or edit Figma layers.
• Supports parallel prompting to explore multiple ideas simultaneously.
• Lets designers continue making manual edits while the agent works.
• Uses context from frequently and recently used components, with additional control through selected libraries and @ mentions for tokens, variables, and components.
• Is designed for direct manipulation and editing of Figma files, rather than simply producing external suggestions.

How the agent works with MCP and Figma Make

• The Figma agent is intended for canvas-based work and has deeper design-system context.
• Figma’s MCP server and use_figma support movement between code and the canvas:
  • Pull code into Figma for iteration or design-system application.
  • Push designs back to code while maintaining fidelity.
• Teams can begin in Figma Design, use the agent to clarify flows, states, copy, and structure, then send work to Figma Make to generate code layers.
• Alternatively, teams can start in Figma Make, copy frames into Figma Design, refine them with the agent, and return them to Make.

Exploring more design directions

• The agent helps designers generate several approaches instead of settling for the first plausible result.
• It can:
  • Produce distinct stylistic directions for the same design.
  • Compare checkout flows optimized for different business goals.
  • Generate alternative information architectures.
  • Create multiple screen or layout variations.
• Example prompts include generating organic, modern, and retro style options, or producing image carousels with different title treatments.
• Once a direction is selected, hands-on editing remains an efficient way to refine the design and reduce unnecessary prompting.

Automating repetitive design work

• The agent handles bulk operations that require both scale and design context.
• Potential tasks include:
  • Renaming variables consistently.
  • Replacing components across many screens.
  • Applying padding changes throughout a flow.
  • Populating frames with realistic content.
  • Updating typography across a file.
  • Replacing placeholder text and imagery.
  • Setting chip components to active states.
  • Converting screens to dark mode with appropriate fill and contrast changes.
• For design-system teams, it can help update library descriptions, tags, use cases, naming conventions, and component documentation.
• This automation is designed to preserve momentum between AI-generated changes and precise manual adjustments.

The practical recommendation is to use the Figma agent for broad exploration and context-heavy repetitive work, while retaining direct canvas manipulation for judgment, refinement, and final design decisions.