Figma to Website: How to Publish Your Design
Yes. You can turn a Figma design into a live, public website. In simple terms: you make the page in Figma, and Figment gives that page a web address that anyone can open. You do not need to write code.
If you want to try it now, open the free Figment plugin in Figma, select one top-level frame, choose Publish to website [No-code], and publish it to a figment.so subdomain. That first publish is free and does not need a card. The plugin uses the selected frame as the homepage. Your original Figma file stays in Figma and stays editable.
You can also move the design into Figma Sites, use a code-export plugin, or build it by hand. The correct method depends on what you need after launch.
A prototype is not a website
A Figma Design prototype is an interactive presentation of frames. It can contain hotspots, transitions, overlays, and several user flows. Figma describes prototypes as a way to preview, test, and present how a user may move through a design. You share them from Figma's presentation view.
A published website is different. It has a public web address and runs in a browser without the Figma Design presentation interface. It can be indexed only if the published page allows search engines to access it. It also needs real links, readable text, useful image descriptions, and a layout that works at the visitor's screen size.
Figma now has a native publishing product called Figma Sites. This means that Figma can publish websites, but a normal Figma Design prototype link is still not a published site. Figma says Sites is in beta and publishing is available on paid plans. A free Starter account can create a Sites file but cannot publish it to the public web at the time of this update.
How to use Figma to design a website
Most web design in Figma goes wrong before publishing, not during it. If you are about to create a website in Figma, set up the file so that each frame can become a real page:
- One top-level frame for each page. Use a desktop-width frame for each page, and name it after the page, such as
HomeorPricing. - A separate frame for mobile. Draw the phone layout as its own frame when it needs a different composition. Do not expect the desktop frame to rearrange itself.
- Auto layout for sections. Stack sections with auto layout so that spacing stays consistent when text changes length.
- Real text layers. Keep headings and body copy as text, not as flattened images, so that visitors and search engines can read them.
- Named image layers. Give meaningful images clear names. They become useful image descriptions.
- Web fonts you can load. Use a font that the published site can load, such as a Google Font. Read why Figma fonts stop working on a website before you pick a licensed typeface.
When the design is ready, choose how to turn it into a website.
Which Figma-to-website method should you use?
| Your goal | Best starting point | What you receive | Main limit to check |
|---|---|---|---|
| Put a design online without code | Figment or another direct-publish plugin | A hosted website URL | The publisher controls the generated runtime and hosting workflow |
| Stay inside Figma and use breakpoints or a CMS | Figma Sites | A hosted figma.site website | Publishing needs a paid plan, and Figma says you cannot export Sites code for external hosting |
| Give a developer a starting point | A code-export plugin | Generated code, depending on the plugin and plan | Generated output still needs review, testing, and maintenance |
| Build a long-lived custom product | Hand-code from the design | A codebase your team controls | This needs development time and web engineering skills |
Do not choose from the screenshot quality alone. Decide who will update the site, where it must run, and whether you need a CMS, application logic, or source code.
How to publish a Figma design with Figment
The steps below match the current Figment plugin source and interface.
1. Prepare one top-level frame
Make the frame you want to publish a direct child of the Figma page. Give it a clear name such as Home, not Frame 247.
Keep text as text layers. Give useful names to meaningful image layers. Figment uses the selected frame as the homepage and uses the design data to build the published page.
2. Open the plugin
Open Figment in the Figma Community and choose Open in, or find it from the Tools tab in a Figma Design file. Figma's current plugin guide uses Open in and Run instead of the older install flow.
You need edit access to the Figma Design file. You also need to sign in to Figment when the plugin asks you to do so.
3. Add website behavior
Select an element before you add behavior to it. The current plugin can add a link, media, a hover effect, or an entrance animation. Use this for buttons and navigation that must work on the published page.
Do not assume a Figma prototype connection becomes a website link. Add and test the link in the publishing workflow you selected.
4. Open the publish screen
Choose Publish to website [No-code]. Select the primary frame. The plugin labels this frame as the homepage.
Choose the figment.so subdomain. Enter a useful page title and page description. The plugin shows a search-result preview for these fields.
5. Build and publish
Select Build & Publish! and wait for the plugin to return the website link. Open the result in a browser before you share it.
That link is the first useful result: it lets another person open your design as a normal web page without opening Figma. You can send the link, test it on a phone, and update it when the design changes.
The first publish sends the selected frame as the desktop design. A desktop frame that scales down is not the same as a designed mobile layout. If you need a separate mobile composition, add and check that layout in Figment's browser editor before launch.
Check the published website before you share it
Use this short checklist on the real URL:
- Open it in a private browser window. This finds access and login mistakes.
- Test every button, navigation item, logo link, and external link.
- Check at a narrow phone width and a wide desktop width.
- Confirm that text does not clip or overlap.
- Confirm that images load and have useful layer names where they carry meaning.
- Read the browser-tab title and inspect the search description.
- Test video, hover, and entrance effects with the published page, not only in Figma.
- Check forms, checkout, login, and other external services separately. A static publish does not create those backend services.
Use the longer Figma-to-website checklist if you need to check fonts, image weight, frame structure, and responsive work before publication. After the site exists at a real URL, use the pre-launch check for generated websites before you share it, then follow the static-site publishing guide if your chosen route produced files instead of managed hosting.
What about Figma Sites?
Figma Sites is Figma's own website builder, and it is the native choice when you want to stay in Figma. Figma says you can copy a frame from Figma Design into a Sites webpage, then add breakpoints and publish it. Figma recommends auto layout because Sites uses it for responsive behavior.
Sites can publish to a figma.site address and can connect a custom domain. It can also use a CMS. However, Figma's current publishing guide says that you cannot export the site's code for external publishing. Use Sites when hosted publishing inside Figma fits the job. Do not treat it as an HTML download.
Can you export the design as code instead?
Yes, but Figma Design itself does not provide a complete HTML-page export button. Figma can export static assets as PNG, JPG, SVG, or PDF. Dev Mode can show CSS snippets for a selected object. A complete page needs a code-export plugin or a developer. If a developer is coding the website from the Figma design, give them the named frames and Dev Mode access, and agree on the breakpoints first.
Read How to export Figma to HTML before you choose that path. If a coding agent will implement the design, the Figma-to-code workflow for coding agents covers the handoff, implementation, and review steps. The useful question is not only whether a tool can generate code. Ask whether your team can run, test, and maintain the result.
Can AI edit the website later?
That is a separate workflow. Figment's AI editor is public now. It imports a separate static copy of a public website. It does not edit the original Figma file or the original hosted website in place. Forms, login, checkout, databases, and other backend services do not transfer as working systems.
If you already have a public brochure or marketing site and that copy-based workflow fits your task, you can open the AI editor. Use the Figma plugin above when your source of truth is still the Figma design.
Sources: Figma Help: Guide to prototyping in Figma; Figma Help: Use plugins in files; Figma Help: Explore Figma Sites; Figma Help: Move designs from Figma Design to Figma Sites; Figma Help: Publish, update, or unpublish a site; Figma Help: Use code snippets in Dev Mode; Figma Help: Export formats and settings.
