Figma Can Now Convert UI Code to Layers
A new Claude Code integration in Figma can now convert rendered UI into editable Figma layers. The workflow allows engineers or AI agents to generate UI code that designers can then import and modify, aiming to bridge the gap between code and design.
This new workflow is powered by Figma's Model Context Protocol (MCP), an open standard allowing AI tools to connect with external applications. The integration requires enabling a local server in Figma's Dev Mode, which then allows Claude Code to capture the live browser state and convert it into a Figma-compatible frame. This creates fully editable layers, not just a flat image. The "Code to Canvas" functionality works in reverse as well. By providing Claude Code with a link to a Figma frame, it can generate production-ready code that respects existing design systems, including components and tokens. This two-way communication aims to create a continuous, synchronized loop between design and development, reducing the friction of traditional handoffs. This integration is part of Figma's broader strategy of embedding AI throughout its platform. The company has been introducing AI-powered features like auto-naming layers, generating designs from text prompts with "Figma Make," and collaborative image generation in FigJam. These tools are designed to assist, not replace, with every AI-generated element remaining fully editable. The AI model behind this is from Anthropic, a research company founded by former OpenAI employees with a focus on AI safety. Their Claude models are known for strong performance in complex reasoning, vision analysis, and code generation across multiple languages. The latest versions, like Claude 4, have demonstrated leading capabilities on coding benchmarks. This move reflects a larger industry trend of using AI to bridge the gap between design and development. The goal is to automate repetitive tasks, allowing developers to focus on more complex problem-solving and enabling non-technical team members to build functional prototypes. Some early feedback suggests these AI workflows can reduce development timelines significantly. Figma's focus on AI-driven features has intensified since its proposed $20 billion acquisition by Adobe was terminated in late 2023 due to regulatory scrutiny. Since then, Figma has continued to expand its platform with new tools and integrations, including collaborations with OpenAI for ChatGPT and Google for Gemini 3 Pro.
