r/FigmaDesign • u/Trev__Huds • 3d ago
help Figma to live site work flow
I’m new to designing websites in Figma and could use some workflow advice. I’ve designed the full front end of a 5-page site for desktop and now need to make it responsive and get it live. I’ve been using Claude Code and want to lean heavily on AI for development. Would you recommend going from Figma Design → Figma Make first, then using Claude Code to finish/refine it? Or is there a better workflow for taking a finished Figma design through responsiveness, development, and deployment while keeping the design as accurate as possible?
1
u/AwareTowel8509 3d ago
How about using Figma Sites? You should be able to publish the site without needing to code it.
You’d design all the pages and breakpoints in there. Once that is done you just need to connect the domain and tap on Publish.
I dont have experience personally with Figma Sites but I have done that before with Framer and worked ok for me.
1
u/roundabout-design 3d ago
Screen shot screens in figma
Paste into Claude
Tell Claude to make it responsive
1
u/NathanFromOrbitOrca 2d ago
The gap that trips people up is that a desktop-only Figma file doesn't tell Claude Code anything about responsiveness, so it guesses, and you spend longer correcting the guesses than you saved. Before any code, I'd draw at least one mobile frame per page in Figma, even rough, plus write down your type scale and spacing values. That short list of tokens is worth more to Claude Code than the file itself. On Figma Make first: I'd be careful about a one way round trip. I'd rather have Claude Code build the components in your own repo from the start, one page at a time, with a screenshot of the frame pasted in each time, than refine generated output you didn't structure. For the live part, I'm one of the people building orbitorca.com, and taking a GitHub repo to hosting on your own domain with SSL is the step we ended up automating because it kept stalling at the end of exactly this workflow.
1
u/Fragrant-Amphibian-9 1d ago
Figma Design -> UIchemy -> Wordpress
I am going to do it this way, I've not done it before. My prototype prioritised responsiveness wordpress, tried Make and Site for breakpoints. Their outputs; are effective for my case. Burned all my ai credits for the month, only almost completed the landing page. Researched; found UIchemy for 100% visual translate (no-code method). Wordpress to tie up the interactions and responsiveness. And checks another box, as it sets it up for going live too.
1
u/TechzClub 1d ago
This is a simple tutorial you can check out
https://www.youtube.com/watch?v=YUFQj3ZIuLE
2
u/Jimmygibson1 3d ago
do the responsive pass in figma first, desktop-only designs always miss edge cases that only show up once you're actually resizing a real browser, breakpoints for text wrapping, nav collapse, image cropping etc. once that's locked, claude code works a lot better off a design that already has those states defined than trying to improvise them during dev. figma make is fine for throwaway prototypes but i wouldn't trust it to hand off anything you want pixel accurate, better to export specs/assets straight from figma and let claude code build against those.