Figma launched its Design Agent on May 20, 2026, an AI assistant embedded natively inside Figma Design. Unlike the MCP-based workflow announced in March that required switching to Cursor or Claude Code, the agent now has a direct entry point within the canvas and builds screens using your actual design system components from the start.

What Happened

The Figma Design Agent can create frames, place library components, apply color tokens, set spacing variables, and generate screen variants from a text prompt. It does not produce pixel approximations. The agent uses your real components, auto layout constraints, and variable collections, so output is connected to your library and responds to future design system changes.

According to TechCrunch, the agent launches first on Figma Design, with FigJam agent capabilities expanding alongside.

Why It Matters

AI-assisted design previously required a translation step between tools. A designer would prompt in Cursor or Claude Code, inspect the output, manually copy specs into Figma, and rebuild components by hand. The Figma Design Agent removes that step. The agent works inside the file where design decisions are made.

This shift makes design system quality the single biggest variable in agent output quality. Figma opened write access to agents in March 2026 via MCP, but required external tools. The May launch brings that capability into Figma itself, removing the context-switching that limited adoption.

Key Details

  • Skills system: Markdown files encode team conventions, including which components to use for specific UI patterns, naming rules, and spacing systems. Nine community-built skills launched at release covering library generation, accessibility annotations, token synchronization, and workflow orchestration.
  • MCP integration: Works through Figma's MCP server, compatible with Claude Code, Cursor, GitHub Copilot, Augment, Factory, and Warp.
  • FigJam agents: New skills let coding agents read and write FigJam boards, generate architecture diagrams, ERDs, and project plans from docs or codebases.
  • Make enhancements: Figma Make adds voice-to-text prompts, version history, question cards, and a Zapier connector for pulling in external app data.
  • Pricing: Free during beta. Usage-based pricing follows after.

The full suite of Figma AI features is on the Figma AI page.

Creator Outcome: How to Integrate

If you use Claude Code or Cursor today, connect to Figma's MCP server and install the /figma-use skill. Write a short markdown file listing which components your team uses for navigation bars, cards, modals, and forms. Then prompt the agent to build a specific screen such as a user settings page or onboarding flow. The agent assembles the layout using real components, so the output is immediately editable in Figma and stays connected to your library.

Teams with documented design systems get the most from this integration. If your component library is sparse, auditing your core tokens and component variants before enabling the agent on production files is the best first step.

What to Do Next

  • Read the full announcement on the Figma blog
  • Connect your MCP client to the Figma MCP server and install the /figma-use community skill
  • Audit your Figma component library for documentation gaps before running the agent on production files