How to put a Figma design online

A Figma file is finished and everyone likes it. Now somebody has to make it a page on the internet — one with a real address, that works on a phone, that a customer can actually use to get in touch with you.

Figma does not do that part. It has a preview link and it has Dev Mode, but a prototype link is not a website: it has a figma.com URL, it cannot take a form submission, it will not be indexed by Google, and it stops existing the day someone moves the file. What follows is the four honest routes across that gap, what each one really costs, and how to do the fastest one.

What "online" has to mean

Before comparing methods, it is worth being precise about the finish line. A design is online when:

• it answers at your own domain, not a preview URL;
• it holds together on a phone, not just at the artboard width;
• it can receive something — an enquiry, a booking, a signup;
• you can change the copy on a Tuesday without reopening the design file;
• and a search engine can read it.

Every route below gets you a page. They differ enormously on the other four.

The four routes

1. Hand it to a developer

The traditional answer, and still the right one for anything genuinely custom. You get exactly what you designed, and someone who can extend it later.

The cost: money and calendar time. A marketing site is usually a week or two of somebody's life, and every copy change afterwards is a ticket. If the site is five pages that need to exist by Friday, this is a heavy instrument.

2. Export from Figma and code it yourself

Dev Mode gives you measurements, colour values and CSS snippets for individual layers. Plugins will generate markup from a frame.

The cost: what comes out is not a website. Layer-level CSS is absolute positioning that falls apart the moment the viewport is not the artboard width, and no export gives you hosting, a domain, a form endpoint or a way to edit the text later. It is a starting point for someone who already writes HTML.

3. Rebuild it in a site builder

Open a builder, pick something close, and reconstruct the design block by block.

The cost: you are doing the design twice, and the second time with worse tools. It works, and it is what most people end up doing, but the result usually drifts from the file everyone approved.

4. Generate the pages from the design

Upload the design itself and have the pages built from it, then edit them like any other page.

The cost: it will not be pixel-identical to the file. What you get is a real page with your layout, your colours and your content, which you then correct by clicking on the bits that are wrong. For most marketing sites that is a better trade than any of the three above.

Doing it the fourth way, step by step

1. Export the frame as an image. In Figma, select the frame and export at 2x as PNG. One image per page you want.
2. Upload it. Create a site in Fronty and choose to build from a design. Website generation reads the layout off the image and writes the page — the navigation, the sections, the buttons, the images sized for the slot they sit in. If you would rather not export anything, you can describe the site in a sentence instead and get the same kind of page.
3. Fix what came out wrong. Open the editor and click whatever needs changing. Nothing here requires knowing what a div is.
4. Match the brand exactly. The theme configurator sets the brand colour, the typeface, the text size, the spacing and the corner radius once, for every page at the same time. This is the step that closes most of the gap between "generated" and "ours".
5. Add the things that were never in the design. See below.
6. Connect your domain and publish. Point the domain at Fronty, paste two DNS records at your registrar, and the HTTPS certificate is issued and renewed for you.

The parts a design file never contains

A Figma frame shows a contact form. It cannot receive one. This is the work that always appears after the design is signed off, and it is worth knowing it exists before you promise a launch date:

• A form that actually sends. The form builder puts the fields on the page and the submissions in an inbox you own — or describe the form in a sentence and have it assembled.
• Lists that change. A catalogue, a team page, a blog: in the design these are copies of one card. On the site they should be one card bound to a table, so adding a row adds an item and nothing goes stale.
• An address that matches the domain. A site at your own domain and a contact address at gmail.com undo each other; business email connects the mailbox provider you already use and watches the DNS records that keep it working.
• A check before you publish. Readiness checks read the site the way a visitor would and tell you what is broken, in plain language.

What if you want the code?

A fair worry about any builder: what happens when you outgrow it. Export gives you standalone HTML for every page — no proprietary project file, nothing only one company can open. If the site later needs a developer, they are not starting from a screenshot.

Questions people actually ask

Will it be pixel-perfect?

No, and no route except a developer will be. What you get is your layout, your colours and your content on a page that works on a phone, which you then adjust by clicking. If pixel-exact matters more than time, route one is the honest answer.

Can I upload more than one frame?

Yes — generate a page at a time. Pages after the first pick up the navigation, fonts and colours the site already has.

Does it work from a screenshot rather than Figma?

Yes. It reads an image; it does not care whether it came from Figma, Sketch, Illustrator, a slide or a photo of a whiteboard.

What does it cost?

Generating and editing are on every plan including the free one. Custom domains and code export are on the paid plans. Current numbers are on the pricing page.

The short version

If the design is custom and the budget is there, hire a developer. If it is a marketing site that needs to be live this week, upload the frame, correct what came out wrong, set the theme, connect the domain, and publish. The difference between those two routes is usually a fortnight.