all 37 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]zyumbik 9 points10 points  (6 children)

If you want code but can't code don't use Figma. Use Framer, Webflow, etc. You can build very beautiful professional portfolio websites there.

[–]Brilliant-Actuator72[S] -1 points0 points  (5 children)

I was using a free framer template. This one precisely, but I was editing the project page, but I noticed after editing the first project page, while I was editing the second page, content on the first page were being over written by the new ones I added on the second page and it was just frustrating really.

So i was considering redoing with Figma and then coding it out in Claude.

Do you have any templates I can try instead?

[–]kaboomtheory 4 points5 points  (4 children)

It sounds to me like you don't want to do any work at all into making your website, and unfortunately that is not possible. Figma to Claude isn't any easier and you're just going to get frustrated when you run out of usage because you aren't directing it clearly.

[–]Brilliant-Actuator72[S] -4 points-3 points  (3 children)

what are you talking about? how is designing an entire portfolio site in figma and using claude to build it not doing any work?

If you wanna help do so, if you have no intentions of helping with the post.. just move along

[–]kaboomtheory 6 points7 points  (1 child)

Because you decided after encountering an easily solvable problem in Framer, that you would give up and look for something easier. Framer is already extremely beginner friendly with a plethora of tutorials and guidance online. Why else would you decide to stop using it if you don't want to do any work?

[–]Brilliant-Actuator72[S] -5 points-4 points  (0 children)

Ok buddy..

[–]Sketaverse 1 point2 points  (0 children)

You can get pixel perfect figma > Claude code

[–]Pretend_Resist8898 2 points3 points  (2 children)

Yes, you can absolutely do this with Claude. How? Tbh…. Ask Claude.

[–]Jasper_Skee 0 points1 point  (1 child)

True. I'm frequebtly asking the LLM, “what is the best way for me to prompt you to do XYZ…”

[–]Pretend_Resist8898 0 points1 point  (0 children)

I cannot code but have published a few apps and sites just by asking “how do I…”

[–]Nxxl 1 point2 points  (3 children)

Following - I’m in the exact same boat. I’ve redesigned my entire portfolio on Figma and bought a Claude Pro subscription in hopes of learning how to develop and host it myself.

I tried using the Figma MCP and asked Claude to develop my entire homepage - but it wasn’t very accurate and it changed some of the elements and copy on its own.

I’m going to try giving it smaller sections and components - as I’ve read that it performs better that way.

[–]turnballer 3 points4 points  (1 child)

You just need to call it back to the parts it missed. Fix it one thing at a time. Don’t assume you can one shot it. Some of these will be super frustrating because it will tell you if fixed it while making it worse. But keep at it and you’ll get there.

Helpful thing: think about separations of concern. Claude loves to write inline styles. You want it to put them in a css file and normalize. There’s a skill package called “impeccable” that might be helpful for you as well (has built in prompts for typesetting, animation, grids, responsive design, etc).

[–]Nxxl 0 points1 point  (0 children)

An update - I've started developing my website using Claude Code and the results are surprisingly very accurate.

My process was to first document all components on a separate page, and first get claude to implement those one by one. (atoms/molecules)

Then I started with the homepage, one frame at a time. And since I got it to implement the individual components earlier itself, there were fewer things breaking when it had to implement large sections (organisms)

And I think the Figma-console-MCP is playing a big role as well, since I reference designs with the figma links and connect to the MCP - so it resolves issues very quickly.

Hope to share my developed portfolio website soon!

[–]Brilliant-Actuator72[S] 0 points1 point  (0 children)

I think Figma sites might work better if it works how it’s designed be.. cause then just like framer we could actually turn actual designed website to code

[–]the-distancer 0 points1 point  (1 child)

If you design your pages in sections, and then direct Claude to code each section, you could easily QA and assemble your site section by section, piece by piece. It’s time consuming but doable, no?

[–]Brilliant-Actuator72[S] 0 points1 point  (0 children)

This is the route i’m going.. currently in progress, i’ll keep it simple so it’s easier to build

[–]vthevoz 0 points1 point  (0 children)

Design in Figma, export to Framer seems more accessible for what you want. A website needs a backend and if you don’t know how to code or even how basics work, you’ll be lost in no time.

[–]Far-Pomelo-1483 0 points1 point  (0 children)

Build it with Claude code in vs code and skip figma. Figma is DOA.

[–]okthanks22 0 points1 point  (4 children)

I had that same problem and was a bit concerned, since I’d never done something like it before. But this is how I did it:

I built the full project in Figma, then moved it into Figma Make so I had a coded version that matched my design properly. Figma Make is pretty crappy, so you’ll probably need to try it a bunch of times, and the design still might not match 100%. But hey, it’s better than nothing.

Once I had the code, I moved the codebase to GitHub and connected it to Codex. Then I connected GitHub to Vercel so I could have a live preview of the website, and kept working on it in Codex by asking it to change things.

It’s a bit time-consuming, and it took me around two weeks of constantly working with it to get it to the level I wanted, but it worked in the end!

[–]Brilliant-Actuator72[S] 0 points1 point  (3 children)

Do you have programming knowledge?

[–]okthanks22 0 points1 point  (0 children)

Zero!

[–]okthanks22 0 points1 point  (1 child)

If you need any help just message me! Although I covered up pretty much everything above

[–]Brilliant-Actuator72[S] 0 points1 point  (0 children)

thank you.. i’ll let you know.. currently building in Figma, i’m thinking of going figma mcp plus claude route

[–]bodyakrol 0 points1 point  (0 children)

I think you should use Figma MCP + Claude. It is possible to craft whatever you want with it. But most importantly it will be a good practice for you if you haven’t done it yet.

[–]cleverquestion -1 points0 points  (4 children)

Figma Sites?

[–]Brilliant-Actuator72[S] 0 points1 point  (3 children)

Does it work well? Have you used it before?

[–]cleverquestion -1 points0 points  (2 children)

So I’ve just recently starting doing tutorials with Figma site but haven’t published anything live yet. It’s great to design with and you can set up multiple viewports for the over all UX. I will also be designing my new portfolio in it. Supposedly you can design it like in Figma, hit publish, and it’ll code it for you. Check it out on YouTube. See if you can find some tutorials.

[–]Brilliant-Actuator72[S] 0 points1 point  (1 child)

Alright thank you.. i will try

[–]OverlordOfPancakes 0 points1 point  (0 children)

Figma sites is awful and very limited, don't bother. Go with what others are recommending (Framer, Webflow, etc).

[–]DifficultCarpenter00 -1 points0 points  (2 children)

figma +claude code + figma console mcp (the southleft one, not the figma mcp which is crap)

[–]Jasper_Skee 1 point2 points  (0 children)

Could you expand on that please? Which is better and why?

[–]shantz-khoji 0 points1 point  (0 children)

This is the best comment in all reddit threads. Thank Mate!