Figma: Code to Figma — More Dev Tools Support

Figma Expands Code to Canvas to Warp, Augment, Factory, and Firebender

Figma extended its Code to Canvas feature to support a significantly broader set of AI development tools. Originally available only through Claude Code (Anthropic) and Codex (OpenAI), the generate_figma_design capability in Figma's MCP server now works across eight clients: Augment, Claude Code, Codex by OpenAI, Cursor, Factory, Firebender, VS Code, and Warp.

What Code to Canvas Does

Code to Canvas allows developers to capture a live, running user interface from their browser — whether in production, staging, or on localhost — and convert it into fully editable Figma frames in a single session. The resulting frames are standard Figma design layers that can be organized, duplicated, annotated, and compared side by side on the canvas.

Rather than taking static screenshots, the feature uses the Figma MCP server to translate the rendered browser state into structured design layers with editable text, layout, and visual properties. The underlying MCP tool is called generate_figma_design and supports flexible output destinations: a new Figma Design file created automatically in the user's team or organization drafts, an existing file with edit permissions, or the clipboard for manual placement.

Why This Expansion Matters

Before this update, Code to Canvas was accessible only to teams using Claude Code or Codex. Developers working with Warp (the AI-native terminal), Augment Code (the enterprise AI coding assistant), Factory (an autonomous engineering agent), or Firebender (an AI-powered IDE) were excluded from the reverse direction of the design-code workflow. They could pull design context from Figma into their tool via MCP, but could not push live UI back onto the Figma canvas.

This expansion makes Figma's bidirectional pipeline effectively tool-agnostic. Teams can now establish the complete design-code roundtrip — generate code from Figma designs, render it in the browser, capture it back onto the Figma canvas for design review, and return the refined result to their preferred coding tool — regardless of which AI coding environment they use day-to-day.

The Code to Canvas Workflow

The typical workflow involves three stages:

Build or Iterate in Code

A developer uses any of the eight supported AI coding tools to build or modify a user interface. The rendered result lives in the browser — production, staging, or localhost all work.

Capture to Canvas

The developer prompts their AI tool to send the current interface state to Figma. The MCP server captures the live browser UI and converts it to editable Figma frames. Multi-step flows can be captured in a single session, allowing teams to lay out entire user journeys — onboarding, checkout, settings pages — side by side on the canvas for comprehensive review.

Collaborate and Refine

The team reviews the captured frames on the Figma canvas, organizing layouts, annotating decisions, comparing flow variants, and aligning on design direction. Once design decisions are resolved, developers return the context to their coding tool and implement the changes.

Availability and Requirements

The Code to Canvas feature requires a Figma Dev or Full seat on a paid plan. The remote MCP server connection is used for this capability — not the local desktop server. Figma's MCP catalog at figma.com/mcp-catalog lists all supported tools with connection instructions tailored to each environment.