# 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.
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.
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.
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_figmaallows 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
No comments yet.