Users showed a flow where a rough Figma sketch and file link are handed to Claude Code, which fleshes out styled mockups and extra components inside Figma. The handoff keeps UI iteration in the design tool before code generation, so teams can keep design review upstream of frontend implementation.
The concrete flow is simple. The user starts with what they call a "very ugly sketch" in Figma, then asks Claude Code to "flesh it out in Figma" so they can keep editing there before handing the result back for implementation, according to the original post. That makes Figma the intermediate workspace instead of generating frontend code directly from the first prompt.
The prompt structure matters here. In the follow-up post, the user shares a two-step pattern: sketch first, then pass Claude Code the Figma file link with instructions to "turn that mock up into something that matches the style of this app" and "add a bunch of extra components." A supporting post, the component example, shows those extra additions were concrete enough to review as candidate UI pieces inside the mockup rather than just abstract suggestions.
the more I've been digging into the new Figma MCP, the more excited I am about it something new I'm trying is starting with a very ugly sketch in Figma, and then having Claude Code flesh it out in Figma so I can tweak and edit before sending the final back to Claude Code
I’ll be covering how to make the most of this in my livestream on March 31st with Figma! You can sign up here: fig-events.figma.com/claude-to-figm…
my specific flow was: 1. sketch in Figma 2. prompt: "In my figma file <link>, I've made a sketch of a new grocery list feature, can you turn that mock up into something that matches the style of this app, also add a bunch of extra components that I might want to add"
