What if you could point Claude Code at your running app and have it push every screen into Figma, not as flat screenshots, but as editable layers with real padding values, hex colors, and component hierarchy preserved?
That's exactly what Figma's official Claude Code plugin now enables. Designer Bora Oztunc documented the full workflow, and it flips the usual design-to-code direction on its head: instead of translating Figma mockups into code, you're translating a live app back into Figma.
The Setup
The workflow requires Claude Code CLI (not the Cursor extension or VS Code connector), a paid Claude subscription, and the official Figma plugin installed via claude plugin install figma@claude-plugins-official. The key tool is generate_figma_design, which handles the actual web-to-Figma capture through a remote MCP (Model Context Protocol) server.
One gotcha: if you have the figma-desktop local MCP enabled, you need to disable it. It's read-only and conflicts with the remote plugin's write capabilities.
How It Actually Works
You tell Claude your app is running locally and give it a Figma file URL. Claude analyzes your codebase, identifies all screens, and proposes a capture plan organized into waves. Then it starts your dev server, injects a temporary capture script into your layout file, and opens a browser with a capture toolbar.
You click "Entire screen" for each page. Claude captures it, removes the injected script automatically (no codebase pollution), and creates structured Figma frames. The captured layers preserve your React component tree structure, real CSS properties like padding and border radius, hex colors, auto-layout formatting, and actual text content.
The bidirectional sync is where it gets practical. Modify something in Figma, copy a link to that selection, and tell Claude to match the code to the updated design. Going the other way, Claude can read a Figma node's properties and write the corresponding implementation.
Limitations to Know
Animations and interactions don't transfer. Initial captures frequently need layout touch-ups. There's no automatic design system awareness, so you need to explicitly instruct Claude about your existing components. And context window limits mean you should save your capture plan to a file for session continuity.
This is a solo-builder workflow for now. Teams will need adjustments around shared Figma files and coordination. But for freelancers and indie developers who build first and document later, it solves a real pain point: keeping design files in sync with a live product without manually rebuilding screens.