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.