Claude Code Can Now Write Directly in Figma Canvas

The company also introduced ‘Skills’, which are instruction sets written in markdown that define how agents operate in Figma.

Share

Figma has opened its design canvas to AI agents, allowing them to write directly to Figma files and use design systems as a shared foundation for product development. The feature works through the Figma MCP server and supports tools such as Claude Code, Codex and other MCP clients.

The company said agents can now generate and modify design assets in Figma while adhering to existing design systems. This lets teams move between code and design in a shared environment, where prior decisions on components, naming and structure guide how agents build outputs.

Figma said users do not need to write code or build plugins to create skills. During launch, it released several example skills, including tools to generate components, create designs and sync design tokens between code and Figma variables.

The feature is available as a paid API, but it will remain free during the beta period. It currently supports multiple MCP clients, including Augment, Copilot and Cursor. The company said it plans to further expand agent capabilities and align more features with opening access to surfaces like ‌‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍‍‍‍‍‍‍‌‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‍‍‌‍‍‌‌‍‍‍‍‍‍‌‍‍‌‍‌‍‌‌‌‍‌‍‍‍‍‍‍‍‌‍‍‌‌‌‌‌‌‍‍‍‍‌‍‌‍‌‍‍‌‌‍‌‌‍‌‌‍‌‍‍‌‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‍‍‌‌‌‌‌‌‌‍‌‌‍‍‌‌‍‍‌‍‍‌‌‍‍‌‌‌‍‌‌‌‍‍‌‌‍‌‍‌‌‌‍‌‌‍‍‌‌‌‍‌‍‌‌‍‌‍‌‌‍‌‌‌‌‌‍‌‍‌‌‌‌‍‌‌‌‍‍‌‌‌‍‌‌‌‌‍‍‌‌‍‌‍‍‍‌‍‍‌‌‍‌‌‌‍‌‍‌‍‍‌‌‌‍‌‍‍‍‌‌‍‌‍‍‌‌‍‌‍‌‌‍‌‍‌‌‍‌‌‍‌‌‌‍‌‍‌‍‌‌‍‌‌‌‌‌‌‍‍‌‍‌‍‌‍‌‍‌‌‍‌‍‍‌‌‍‌‌‍‍‌‌‌‍‌‌‌‍‌‌‌‌‍‌‍‌‍‍‌‌‍‌‌‍‌‌‍‌‌‍‌‍‌‍‌‍‌‌‌‌‍‌‌‌‍‌‌‍‌‌‌‌‍‍‌‌‍‌‍‌‍‍‌‌‌‍‌‌‌‍‍‌‌‍‌‌‌‌‌‍‌‌‌‍‍‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‌‌‍‌‌‌‍‌‌‍‌‌‍‌‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‍‌‍‍‌‍‍‌‌‍‌‍‌‌‍‌‍‌‌‌‍‍‍‌‌‌‌‌‍‌‌‌‍‍‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‌‌‌‌‍‌‌‌‌‌‍‌‍‌‌‍‍‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌‍‌‌‌‍‍‌‍‌‌‌‍‌‌‌‌‌‌‌‍‌‍‌‌‍‍‌‌‌‌‌‌‍‌‌‌‌‍‌‌‍‌‌‍‍‌‌‍‌‌‍‌‍‌‍‌‍‍‌‌‍‌‌‍‌‌‍‌‍‍‌‌‍‌‌‍‍‌‍‍‌‌‌‌‍‌‍‍‌‌‌‌‌‌‌‍‌‌‍‍‌‌‍‍‌‍‌‍‍‌‌‍‌‌‌‍‌‍‌‍‍‌‌‌‍‌‍‍‍‌‌‍‌‍‍‌‌‍‌‍‌‌‍‌‍‌‌‍‌‌‍‌‌‌‍‌‍‌‍‌‌‍‌‌‌‌‌‌‍‍‌‍‌‍‌‍‌‍‌‌‍‌‍‍‌‌‍‌‌‍‍‌‍‌‌‌‍‌‌‌‍‌‌‌‌‍‌‍‌‍‍‌‌‍‌‌‍‌‌‍‌‌‍‌‍‌‍‌‍‌‌‌‌‍‌‌‌‍‌‍‌‌‍‌‌‌‌‍‍‌‌‍‌‍‌‍‍‌‌‌‍‌‌‌‍‍‌‌‍‌‌‌‌‌‍‌‌‌‍‍‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‌‌‍‌‌‌‍‌‌‍‌‌‍‌‌‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‍‌‍‍‌‍‍‌‌‍‌‍‌‌‍‌‍‌‌‌‍‍‍‌‌‌‌‌‍‌‌‌‍‍‌‍‌‌‌‍‌‍‌‌‌‌‍‌‌‌‌‍‌‌‍‍‌‍‌‌‌‌‍‌‌‌‌‌‍‌‍‌‌‍‍‍‌‌‍‍‍‌‌‌‌‌‌‍‍‌‌‌‍‌‌‌‍‌‌‍‍‌‌Code Connect, Figma Draw, and FigJam through the Plugin API.

Image

The update allows design systems to act as the source of truth for both human teams and AI agents. Agents can access established components and variables, ensuring outputs align with team standards.

“Teams at OpenAI use Figma to iterate, refine, and make decisions about how a product comes together,” said Ed Bayes, Design Lead at Codex. “Now, Codex can find and use all the important design context in Figma to help us build higher-quality products more efficiently.”

Figma added that this shared context allows teams to move between code and canvas without losing consistency. It said design expertise built over time now directly shapes how agents generate outputs.

The company also introduced ‘Skills’, which are instruction sets written in markdown that define how agents operate in Figma. These outline workflows, steps and conventions for design tasks.

Skills help agents follow specific processes and produce outputs aligned with a company’s design standards. Figma said they also improve predictability, as AI models can otherwise produce varied results for the same prompt.

“The best products come from teams who care deeply about the details,” said Cat Wu, Head of Product for Claude Code. “Skills teach Claude Code how to work directly in the design canvas, so you can build in a way that stays true to your team’s intent and judgment.”

The company added that agents can refine outputs through iterative loops, using screenshots and system structure to adjust designs. These changes interact with components and layout systems rather than only visual layers.

ALSO READ: Figure AI Founder Announces New AGI Venture Hark

Staff Writer
Staff Writer
The AI & Data Insider team works with a staff of in-house writers and industry experts.

Related

Unpack More