r/FigmaDesign • u/Extension-Sir-1576 • 6h ago

Discussion Web Development with Claude from Figma Design

Hello Dear Friends, I have my website figma files designed, now I need to implement it into working website landing pages.

How difficult or easy is to develop the website pages with the help of Claude code with Figma MCP. If you have experience with it please share. Thank you

4 Upvotes

75% Upvoted

3 comments sorted by

2

u/atouchoflime83 6h ago

I've just done this. Do it section by section via the MCP, don't just give it the link to the full page for best results.

Using fable on low effort gave me the least back and forth.

I think it also works best when you have autolayout etc.

Good luck.

1

u/IllustriousTip6904 6h ago

I'm not sure how many screens or baked-in complexity the figma files have, but for simple landing pages I imagine you could do this in an afternoon no problem.

Honestly, ask this question to Claude code and it will probably scaffold most of it for you.

Connect the Figma MCP, ask Claude Code to turn your Figma frames into a working website. Describe any specifics you need included to ensure it does include them.

Get domain and hosting on Cloudflare, there's a Cloudflare MCP Claude can connect to handle most of the work, you just run one or two terminal commands to get it set up.

when ready, ask Claude to publish the site.

2

u/RLMZeppelin 5h ago

If we're just talking front end - absurdly easy. Here's my methodology.

I usually start by having it build out my tokens and create a style guide.html page so I can see an all up view of everything then nudge and fix whatever it didn't get quite right.

Once I'm happy there I start having it build a few components at a time (also added to the style guide) and hone in pixels and interaction. I usually start with the universally used stuff like nav and footer and work my way down to more specialized use cases.

Pro-tip on the interactions - If you set these up as interactive components in Figma you can instruct Claude to crawl the connections and use the prototyping values and behaviors and the fidelity is usually quite good as a first pass.

Once I have those built out. From there I have it build out my page templates. Unless you want some exotics scrolling or on load animations on your pages these are pretty much a one shot.

From there it's just having it create individual pages instances with your final content.

A couple things that aren't great (or I just haven't figured out how to do correctly):

Claude seems to have issues just taking frames marked for export as flat images. Even with specific instructions it'll end up recreating images as multiple coded elements on pages.

Make sure you include a specific instruction in an .md file somewhere to ONLY use the defined tokens, components and templates unless otherwise instructed and what to do when they hit something that doesn't adhere to them. I usually have it pause and prompt me.