Back to Home

AI agents edit Figma: MCP server in beta

Figma updated the MCP server, allowing AI agents to create and edit designs on the canvas using the design system. Introduced skills and self-correction mechanism. Integrations with popular IDEs speed up workflow for developers.

Figma for AI: agents draw layouts independently
Advertisement 728x90

# AI Agents in Figma: From Reading Mockups to Autonomous Design Creation

The beta version of Figma's updated MCP server expands the capabilities of AI agents. Now they not only analyze design files but also create new elements on the canvas using components, variables, and design system tokens. The functionality is available for free during the beta period, with planned monetization via a pay-per-use model.

Previously, the MCP server was limited to reading data from mockups for subsequent code generation. The new API use_figma allows agents to edit the canvas directly: the agent loads the team's component library and builds mockups based on it. Complementing this is the generate_figma_design tool, which converts HTML into editable Figma layers.

Skills as Executable Design Guidelines

The key mechanism is skills: markdown instructions that define the agent's behavior. They specify the sequence of steps, rules for working with elements, and adherence to team conventions. Skills turn static guidelines into code executable by AI.

Google AdInline article slot

Any Figma specialist can create a skill. Figma provides the basic /figma-use and examples from the community. A basic skill example might look like this:

# /figma-use skill
1. Zagruzit biblioteku komponentov.
2. Withzdat frame with auto layout.
3. Razmestit komponenty by setke.
4. Primenit peremennye for tsvetov and tipografiki.
5. Proverit on sootvetstvie tokenam.

This ensures design consistency without manual intervention.

Self-Correction Mechanism for Precise Iterations

Agents implement a self-correction loop: they generate a screen, create a screenshot, compare it to the reference, and make adjustments. Since the work uses native Figma structures (components, auto layout, variables), changes propagate throughout the system rather than being limited to raster edits.

Google AdInline article slot

Advantages of the approach:

  • Systematic: edits update the entire design system.
  • Iterative: the agent corrects until criteria are met.
  • Integration: uses existing libraries without importing external assets.
  • Scalability: suitable for generating multiple screens.

Integrations and MCP Server Accessibility

The MCP server is integrated into popular development environments:

  • Claude Code.
  • OpenAI Codex.
  • Cursor.
  • Copilot CLI.
  • VS Code and others.

This is Figma's third major AI integration in recent weeks: Claude Code in February, Codex in March. The Figma canvas is evolving from a design tool into a collaborative platform for humans and agents.

Google AdInline article slot

Mid/senior-level developers can start testing right away: connect the MCP server, write a skill, and run the agent on a real project. Requirements are minimal — a Figma account with access to libraries.

Key Points

  • API Expansion: use_figma allows AI to create and edit native Figma elements.
  • Skills in Markdown: turn guidelines into executable code for consistent design.
  • Self-Correction: iterative edits at the structure level, not pixels.
  • Integrations: ready connections to Claude Code, Codex, Cursor, and IDEs.
  • Canvas Evolution: collaborative work between designers and AI agents.

— Editorial Team

Advertisement 728x90

Read Next