Figma Code to Canvas: What the Demo Didn’t Show You

A few weeks ago, Figma and Anthropic launched an integration where you type "Send this to Figma" in Claude Code, and the UI running in your browser becomes an editable frame in Figma. Not a screenshot. Actual layers, with auto-layout, editable text, and separate buttons.

I saw the news and went to understand it.

What Code to Canvas is

On February 17, 2026, Figma and Anthropic announced Code to Canvas. You generate an interface with Claude Code, open it in the browser, and send it to Figma. Figma receives the UI structure, parsed into editable layers.

Dylan Field, Figma’s CEO, put it this way:

In a world where AI can help build any possibility you can articulate, your core work is to find the best possible solutions in a nearly infinite possibility space.

What he’s really saying: when generating UI becomes trivial, the real work is deciding which version to ship.

How it works

The connection happens through MCP – Model Context Protocol – an open standard that lets AI tools talk to external services. Figma exposes an MCP server that Claude Code consumes. In practice:

1. You install Figma’s MCP in Claude Code (one command)
2. Authenticate via OAuth
3. Generate your UI normally in Claude Code
4. Open it in the browser (localhost, staging, production – doesn’t matter)
5. Type "Send this to Figma"
6. Claude captures the rendered state and converts it to layers in Figma

What actually happens when you say "send this to Figma": Claude calls Figma’s generate_figma_design tool, gets a capture ID back, injects a capture script into your page’s HTML, and opens the browser with special hash parameters – something like http://localhost:5173/#figmacapture=<id>&figmaendpoint=<url>. The script runs in the browser, captures the rendered DOM, and sends it to Figma’s servers. Claude polls until it’s done, and you get a Figma link. Under a minute, start to finish.

What arrives in Figma is a frame with the structure preserved: editable text, buttons as separate elements, and auto-layout transferred.

It works in both directions. You can send code to Figma, but you can also select a frame in Figma and ask Claude Code to generate code from it. The MCP server reads components, variables, design tokens, and layout structure. Claude reads your design system and maps it to code.

Setting it up

Setup takes 2 minutes:

# Add Figma's remote MCP server
claude mcp add --transport http figma https://mcp.figma.com/mcp

# Restart Claude Code if it was already open
# Then, inside Claude Code:
/mcp
# Select "figma" > "Authenticate" > authorize in the browser

Once connected, the workflow is:

1. Generate a component in Claude Code
2. Open it in the browser
3. Say "Send this to Figma"
4. Paste it in Figma
5. Design team explores, annotates, compares variants
6. Engineer goes back to Claude Code referencing Figma’s changes

My experiments

I wanted to see how this works beyond the demo-friendly scenarios, so I tested it with two different projects I had Claude Code generate for me: a course landing page and a hospital dashboard.

Test 1: Course landing page

The first project was a landing page for selling a Node.js + AI course. I had Claude Code generate it earlier – a React + Vite app with the usual sections: hero, features, curriculum, stats, testimonials, pricing, CTA, and footer. The kind of page you’d expect from any SaaS or course website. I got the dev server up and said "send this design to a new Figma file."

Here’s the thing – this page loads content on scroll. Sections animate in as you scroll down. And Figma’s capture only gets what is currently visible in the viewport.

So what I got in Figma was: the hero section at the top, nothing in the middle, and the footer at the bottom. Everything that was waiting for a scroll trigger to appear was simply missing.

When I told Claude about the problem, it figured out the fix on its own. The landing page used a custom useInView hook built on IntersectionObserver to trigger animations. Claude modified the hook to always return true, which made every section visible at once. Then it recaptured the page, got the full content this time, and restored the original hook.

So if your page uses scroll-based animations, you need to disable them before capturing. Claude can do this for you if it has access to the code, but you have to ask – the capture itself won’t scroll the page for you.

The other issue was text gradients. The landing page had some headings with CSS gradient text (the background-clip: text trick). Figma couldn’t reproduce those – the text came through, but as plain colored text, not with the gradient effect. It’s a CSS visual that doesn’t have a direct equivalent in Figma’s layer model.

Test 2: Hospital dashboard

For the second test, I started from scratch. I asked Claude Code to create a hospital dashboard, and it scaffolded a React + Vite project with Tailwind, recharts for charts, and lucide-react for icons. In about a minute I had a full dashboard with a sidebar navigation, stats cards (total patients, available beds, appointments, active doctors, emergency cases), an admissions vs. discharges area chart, a department bar chart, bed occupancy progress bars, a recent patients table, and today’s appointments list. A dense, data-heavy UI.

I said "send this design to a new Figma file", and about 48 seconds later I had a Figma link. The structure came through well – cards were separate elements, text was editable, the layout made sense. But there was one visible issue: the sidebar was shorter than the main content area.

Why? The dashboard layout has a sidebar with its own viewport. The sidebar doesn’t scroll – it’s fixed in height to the screen. But the main content area does scroll, so it’s taller than the viewport. When Figma captured the full page, it got the full height of the scrollable content, but the sidebar only rendered at its viewport height. The result: a sidebar that stops halfway while the content keeps going.

It’s a consequence of how the capture works. It sees the rendered state, and the sidebar’s rendered state is viewport-height. Worth knowing if you’re working with fixed sidebars or navigation panels.

Despite that, this test was the more successful one. The dashboard structure translated well to Figma, and a designer could pick up those frames and run with them.

What works well

Prototyping with real data is where this shines most. You generate a dashboard with Claude Code, connect it to an actual API, and send it to Figma with real data on screen. The designer sees real content, not lorem ipsum.

Variant exploration is another good one. Generate 3 versions of an onboarding in Claude Code, send all 3 to Figma, and place them side by side. The whole team compares on the canvas instead of opening 3 branches and switching between browser tabs. Code is good for converging to a state; canvas is good for diverging and seeing the big picture.

From my testing, pages that render everything without scroll interactions capture the best. Dashboards, settings pages, and admin panels – these are the sweet spot.

It also brings non-technical people into the conversation earlier. A PM or designer who doesn’t open a terminal can receive the frames in Figma, duplicate, annotate, comment, request changes. The discussion artifact is an editable frame, not a link to staging.

And you can reverse engineer existing UIs. Open any site in the browser, ask Claude to capture it, and paste in Figma. Useful for competitive analysis or documenting a legacy UI for which nobody has the original .fig file for.

Where it breaks

Beyond the scroll and sidebar issues I showed above, there are a few more things.

The roundtrip has friction. Going from code to design and back means passing through at least three tools: Claude Code, browser, Figma. Each handoff loses information. That’s a pipeline with leaks.

Figma receives visual layers, not code. No event handlers, no state, no validation. When the designer changes a button in Figma and the engineer needs to implement it, they’re reimplementing from scratch, not applying a diff.

The MCP itself is still rough. Reports of get_code failing with annotated elements, Japanese text turning into empty squares, and images not respecting original dimensions. It’s a v1, and it behaves like one.

One more thing: the official Figma MCP server is read-only. You can read designs, extract tokens, and understand components, but you can’t manipulate anything. You can’t ask Claude to "move this button to the right" directly in Figma. A dev frustrated with this limitation hacked an alternative using Chrome DevTools MCP to access Figma’s plugin API through the browser.

The other direction: Figma to code

The Figma MCP also works in the opposite direction. You paste a Figma link into Claude Code, and it reads the design – layout, spacing, colors – and generates the code. Designer tweaks something in Figma, sends you the link, and you tell Claude Code "implement what’s in this frame." No more squinting at inspect panels or eyeballing spacing values.

From a developer perspective, this direction is honestly a bit more useful to me than sending code to Figma.

Thanks for reading!

We want to work with you. Check out our Services page!