How to Design and Code with Claude Code and Figma MCP in 50 Min | Felix Lee
How to go from Figma design to working code (and back) using Claude Code and Figma MCP step by step
Dear subscribers,
Today, I want to share a new episode with Felix Lee.
Felix has taught 1000s of designers how to code with Claude Code and Figma MCP. I got him to show me how he converts a Figma design into a working website and converts a website back into editable layers in Figma. A designer who can ship is one of the most valuable hires in tech today — learn how by watching this episode.
Watch now on YouTube, Apple, and Spotify.
Felix and I talked about:
(00:00) 3 products Felix designed and built in Claude Code
(06:36) Building a 3D animated world map in one-shot
(07:50) Felix's app that analyzes how good your landing page is
(13:17) Demo: Figma design to working website in 15 min
(23:07) Demo: FigJam flowchart to a working game
(31:30) A UX reviewer skill for design feedback
(40:19) How to export code back to Figma as editable designs
(45:10) Why most designers aren't adapting fast enough
I’m proud to partner with Replit
Replit’s Agent 4 is the best way for teams to work with AI agents. You can use it to:
Explore design variations on an infinite canvas
Build using multiple AI agents at once using a task board.
Generate beautiful slide decks, animations and more in one shot.
Try Agent 4 for 3 months free by using my code PYANG26 at checkout.
Top 10 takeaways I learned from this episode
If you use Figma, Figma MCP is the best way to go from design to code:
Install. In your terminal, run “claude mcp add --transport http figma https://mcp.figma.com/mcp”
Authenticate. Open Claude Code, type “/mcp” and then select Figma. It’ll open your browser for you to authenticate the MCP with your Figma account.
Copy a Figma frame. Now go to one of your Figma designs and right click any frame or layer. Select “Copy link to selection” and then paste the link into Claude Code with the prompt: “Build this design.” It’s as simple as that.
Convert code back into editable Figma layers to explore more design variations. Here’s how to do this step by step after setting up Figma MCP: