01The four routes compared
| Route | Best for | Trade-off |
|---|---|---|
| Figma Sites | Designers publishing their own simple sites | Newer, fewer features than mature builders |
| Framer | Design-led marketing sites | Rebuilding effort; hosted on Framer |
| Webflow | Sites needing structure and a CMS | Steeper learning curve |
| Developer handoff | Custom sites and apps | Cost and time |
| Code it yourself | Learning, full control | Slowest without experience |
02Route 1: Publish with Figma Sites
Figma introduced Figma Sites at its Config 2025 conference, letting designers turn designs into responsive, published websites from the same canvas, with custom domains. Figma's help center describes publishing on paid plans. It is the most direct route for a designer who wants their own portfolio or a simple marketing site live without learning another tool.
03Route 2: Rebuild in Framer or Webflow
Visual builders let you recreate a design with real responsive layout, a CMS and hosting. Framer feels closest to Figma and has tools for bringing designs in; Webflow offers more structural control. Either way, expect to rebuild rather than import perfectly. Is Framer worth it? and Webflow vs WordPress help with the choice.
04Route 3: Hand off to a developer
Figma's Dev Mode gives developers measurements, colors, typography and assets from your file. Handoff goes far better when the design uses consistent styles and components, includes mobile layouts and documents states such as hover, error and empty. Hacker News discussions of Figma handoff note that pixel values and hard-coded colors in the inspector often clash with a codebase's design tokens, so agreeing on a shared system first saves time.
- 1Use styles and variablesColors, type and spacing defined once, not per element.
- 2Design mobile and desktopAt least the key breakpoints for every page.
- 3Show every stateHover, focus, error, loading and empty states.
- 4Name layers and componentsClear names become clear code.
- 5Agree on tokensMap Figma variables to code variables before building.
05Route 4: Code it yourself
If you know HTML and CSS, translating a clean Figma file is a good exercise: set up variables for your colors and type, build components from the smallest up, and lay out each page with flexbox and grid. How to make a website from scratch covers the basics, and is React good for a website? covers whether to use a framework.
06What about AI design-to-code tools?
AI tools can now turn a screenshot or design into code, and some builders accept an image as a starting point. They save time on the first draft and usually need cleanup for responsiveness and consistency. Can AI turn a design into a website? covers what works today.
- Good for: fast first drafts and simple layouts.
- Check: mobile layout, spacing consistency, accessibility, real content.
- Expect: some manual refinement before launch.
What people who tried it say
Hacker News designers and developers describe Figma-to-code handoff as better than it used to be but still full of friction, because Figma's layout model is not HTML and CSS; shared design tokens and component libraries reduce the gap.
- Making Figma better for developers with Dev ModeHacker News
Commenters welcome Dev Mode as an improvement over older handoff methods while noting that inspected values often do not match a codebase's design system.
- Figma will never be good at dev handoff because it isn't built on HTML/CSS renderingHacker News
The thread argues Figma's canvas model makes perfect export impossible, so translation work is inevitable.
Looking for more first-hand opinions? Search Reddit for “how to turn a figma design into a website”. We link the live threads rather than summarizing them, so you read them in full.
Our take
if you designed it yourself and it is simple, publish with Figma Sites or Framer and move on. If it is a business-critical site, the cost of a careful developer handoff pays for itself in a site that holds up on every screen.
Where this falls short
Figma Sites is relatively new and its features and plan availability are changing; check Figma's current documentation. No route turns a static design into a well-behaved responsive site without decisions about smaller screens.
On paid plans, Orlume can start a site from an uploaded screenshot or design, then builds it as a responsive Next.js project rather than a pixel copy.
Free to start · No card required · Live in one click
Sources
- 1.Figma Sites · Figma
- 2.Figma Sites help · Figma Help Center
Researched and written by the Orlume team · Updated October 2026
Still stuck?