Agents, Meet the Figma Canvas | Figma Blog

Figma is opening its canvas to AI agents, allowing tools such as Claude Code and Codex to create and modify designs directly in Figma files. Through the use_figma tool and customizable skills, agents can use a team’s components, variables, design decisions, and workflows instead of producing generic designs. The feature is free during beta but is expected to become usage-based and paid.

Agents Work Directly on the Figma Canvas

• Figma’s MCP integration lets agents read and write Figma files through the use_figma tool.
• Agents can create or update:
  • Design assets
  • Components
  • Files based on existing design systems
  • Designs linked to established variables and conventions
• Teams can move between code, the command line, and Figma while keeping design context shared.
• Figma positions the canvas as the place where product decisions become visible and refined.

Working Across Code and Canvas

• The existing generate_figma_design tool converts HTML from live apps and websites into editable Figma layers.
• The new use_figma tool operates directly on the canvas, using existing components and variables.
• The tools are intended to work together:
  • generate_figma_design brings current implementation details into Figma.
  • use_figma edits those designs or creates new system-aligned assets.

Skills Encode Design Intent

• Skills are Markdown-based instructions that tell agents:
  • Which workflow steps to follow
  • What sequence to use
  • Which team conventions to respect
  • What quality standards and specialized knowledge to apply
• Anyone can author a skill without building a plugin or writing traditional code.
• The foundational /figma-use skill teaches agents Figma’s structure and core principles.
• Teams can customize that foundation to reflect their own design systems and working methods.

Example Skills and Workflows

Figma highlights skills for tasks such as:

• Generating component libraries from code
• Creating designs from existing components and variables
• Producing accessibility specifications for VoiceOver, TalkBack, and ARIA
• Creating components from structured JSON contracts
• Applying design systems to existing designs
• Managing spacing through variables and fallbacks
• Synchronizing design tokens between code and Figma
• Running parallel, multi-agent design workflows

More Predictable and Self-Correcting Output

• Skills make AI behavior more consistent by encoding repeatable instructions and implementation rules.
• Agents can use screenshots to identify mismatches and iteratively refine generated screens.
• Because agents work with real Figma structure—components, variables, and auto layout—corrections affect the underlying design system rather than only the visual appearance.
• Team conventions become active rules that agents apply during creation, rather than static documentation they merely reference.

Figma’s agent workflow is most useful when teams invest in well-defined components, variables, and skills. During the beta, teams can experiment with use_figma and community skills to automate design work while preserving their existing design intent and system standards.