Can Figma Export A Website? How To Publish Your Design

The mock-up is done. Every frame is aligned, the type is right, and somebody has just asked the obvious question: can you put it online by Friday?

So you open Figma's export panel, and it offers you PNG, JPG, SVG and PDF. No HTML. No "publish as website" button in the design file at all.

That's the first surprise, and it catches a lot of people. Can Figma export a website? Not from the design tool you've been working in. Figma does have products that publish or generate code, but each one comes with a catch, and the catch decides which route you should take.

There are four honest ways to get from a Figma file to a page people can open. One keeps you inside Figma and pays them for hosting. Two generate code for you, with very different results. And one is a rebuild, which sounds like the slow option and is often the fastest for a small page.

Can Figma Export A Website On Its Own?

No, not from the design file. Figma's own export guide lists four formats: PNG, JPG, SVG and PDF. Those are pictures and documents. A browser can show them, but none of them is a web page with real text, links and a layout that reflows on a phone.

Figma has two newer products that get closer, and they're easy to confuse.

Figma Sites turns a design into a published site. As of November 2026, Figma's help centre lists publishing on the Professional, Education (not K-12), Organization and Enterprise plans. The site goes live on a random figma.site address, and you can add your own domain afterwards. The same page says, plainly, that it's not currently possible to export your site's code for external publishing. Figma's help article on publishing a site So the site works, but it lives on Figma's servers for as long as you pay.

Figma Make is the AI prompt-to-app tool. It does have a Download code option, for people on a Full or Dev seat. What you download is React source code, though, not a finished site. It has to be built into plain files, usually inside a Vite project, before any host can serve it.

If you've never done that step, it's the same one any React project needs, and what to upload from a built React project covers it.

The Four Routes From A Figma File To A Live Page

Only three of the four routes leave you with files you own: a Make download, a plugin, or a rebuild. Here's how all four compare.

Figma Sites: Simplest, But Rented

If you already pay for Figma and you're happy for Figma to host the page, this is the least work. Design, publish, add your domain.

The trade is ownership. With no code export, the day you stop paying or want to move, you're rebuilding anyway.

Figma Make: Code, But A Project

Make gives you files you own, which is good. But a downloaded project isn't a website yet. You need to install its dependencies and run the build, then upload the dist folder it produces, not the folder you downloaded.

Plugins: Figma To HTML, With A Clean-Up Bill

Figma-to-code plugins read your frames and write HTML and CSS. Anima's pricing page lists 5 code generations in the Figma plugin on its free plan, as of November 2026. Locofy and Builder.io work along similar lines.

They're best when your file uses auto layout properly. A file built from loose, absolutely positioned layers comes out as code that matches the desktop frame and falls apart on a phone.

Rebuild: Slower On Paper, Often Faster In Practice

For one page, rebuilding as HTML is a short job, and you can hand it to an AI with a screenshot of the frame and the text pasted in. What comes back is a single file you can read, edit and host anywhere. It's the route I'd pick for anything under five or six sections.

Once you've got a folder, the rest is the same four steps as any site, and the general method for hosting a static website walks them.

Why Not Just Export The Whole Frame As An Image?

Because a page that's one big picture isn't a website, even if it looks like one on your laptop. It's the shortcut everybody tries once: export the frame as a PNG, drop it into an HTML file, done.

Here's what breaks:

• Phones. A 1440 pixel frame shrinks to roughly a quarter of its width on a phone, and the text becomes unreadable unless the visitor pinches and scrolls sideways.
• Search. Search engines rank a page on its text, and a picture of text gives them almost nothing to work with.
• Accessibility. A screen reader gets one alt attribute instead of your headings and paragraphs. The W3C guidance on images of text says to use real text wherever the presentation can be done with text. W3C's guidance on images of text
• Links and buttons. Nothing in the picture is clickable. "Email us" is just pixels.
• Weight. A full-page PNG can run to several megabytes, which is a long wait on mobile data.
• Edits. Changing one opening time means re-exporting and re-uploading the entire page.

Export the photos as images. Rebuild the words as words.

Worked Example: A Ceramics Shop's Mock-Up Becomes A Page

Take a small ceramics shop: two potters, mugs and bowls, a studio that runs weekend workshops. Their mock-up in Figma is one page with a header, a hero photo, three product cards, workshop dates, opening hours and a contact block.

They don't need a store. Their orders go through an existing Etsy listing, and the page just has to look like the mock-up and send people to the right places.

Here's the route, start to finish.

1. Export the photos, not the frame. Select each product photo and the hero image in Figma and export them as JPG at 2x. Name them plainly: hero.jpg, mug-speckled.jpg, bowl-ash.jpg.
2. Copy the text out. Every heading, price and opening hour goes into a plain text note. This is the content the page will actually be made of.
3. Rebuild the page. Paste a screenshot of the frame and that text into an AI assistant and ask for a single index.html with the photos in an images folder. Or write it yourself if you're comfortable. Either way, ask for it to stack into one column on a phone.
4. Compare side by side. Open the HTML file next to the Figma frame. Fix spacing and font sizes until they match closely enough that nobody but you would notice.
5. Check it at phone width. Narrow the browser window until it's about as wide as a phone. Product cards should stack, and the text should stay readable without zooming.
6. Upload the folder. index.html and the images folder together, structure intact. If your host takes a ZIP, uploading a ZIP and getting a live site covers what to put in it.
7. Wire the contact block. Either a plain mailto: link, or a real form if they want workshop enquiries in a list. A static page can't receive a form by itself, so the form posts to a form service such as Formspree or Web3Forms, which emails each enquiry on.

The rebuild in step three is the only part that takes real time, and for a page this size it's an afternoon, not a week. On OxyPages the upload in step six is dragging the folder onto the page, and Netlify Drop or Cloudflare Pages will take the same folder just as happily.

The result is a page the shop owns as files. If they leave a host next year, they take the folder with them.

What The Live Page Can't Do

It won't stay in sync with Figma, run a shop, or play your prototype animations, because a rebuilt or generated page is static.

Take sync first. Change the mock-up next month and the live page doesn't know. Once the page is live, the HTML is the real version, and the Figma file is a sketch of it.

It can't run a shop. A static page can't track stock, take card payments by itself or log customers in. Link out to Etsy, Shopify or a Square checkout for that. If the ceramics shop wanted a full catalogue with a cart, OxyPages would be the wrong tool, and so would every other static host.

And it won't animate the way a prototype does. Figma's prototype transitions are instructions for Figma's player, not for a browser. Anything you want moving on the live page has to be rebuilt in CSS.

What To Do Next

To turn a Figma design into a website, pick your route by one question: do you want to own the files?

• If not, and you already pay for Figma, publish with Figma Sites and stop there.
• If you do, and the design is one page, rebuild it as HTML.
• If it's a multi-page site with clean auto layout, try a plugin and budget time to tidy the output.
• If you built it in Figma Make, download the code, run the build, and upload what the build produces.

When you've got a folder with an index.html in it, drop the folder in and get a live link. It takes about a minute. A shop's page is business use, so build and test it on a free account first, then upgrade before you share it and connect your own domain.