Figma to Website: How to Publish Your Design

You can publish a Figma Design file as a hosted website without writing code. Figment Community version 35 starts with the frames you want to publish. You can select 1 to 100 top-level frames. The first selected frame is the homepage. Each other selected frame becomes another page.

Figment publishes the result to a figment.so address. It is a hosted publishing tool. It does not offer a code-export action.

Before you open the plugin

Prepare the file so the publishing choices are clear:

• Put each website page in a top-level frame. A top-level frame is a direct child of a Figma page, not a frame inside another frame or section.
• Give each frame a clear name, such as Home, About, or Pricing.
• Keep useful text as text layers. Do not flatten headings or body text into images.
• Use fonts that a browser can load. Read why Figma fonts stop working on a website if you use a licensed desktop font.
• Add website links and effects in Figment. Do not assume that every Figma prototype connection will become a website link.

Do not select a desktop frame and a phone frame as two versions of the same page. In the current publishing flow, each selected frame becomes a separate website page. Check the finished website at phone and desktop widths instead.

How to publish with Figment

1. Open the current Community plugin

Open Figment in the Figma Community. Run it in the Figma Design file that contains your website frames. You can also open it from Saved plugins.

The first action is Make this website public. The current Community release has no code-export screen.

2. Select the website frames

Choose between 1 and 100 top-level frames in the plugin. Select the homepage first. Confirm that the plugin shows Home beside that frame.

The order matters:

• The first selected frame is the homepage.
• Each remaining selected frame is a separate page.
• A nested frame does not appear in this list. Move it to the top level if it must be a page.

3. Check the website settings

Open Website settings if you want to change the website title or the figment.so address. Check the address before you continue.

Select Make into website. Figment saves the frame selection before it opens the browser.

4. Sign in and choose Free

The browser opens the Figment sign-in and plan flow. Sign in to your Figment account. Then select Continue with Free if you want the free hosted option.

Return to Figma after you select the plan. The plugin should show that it is creating the website.

5. Keep Figma open

Keep Figma and the plugin open while Figment reads the selected frames and creates the website. Closing Figma interrupts the automatic build. If a build was interrupted, reopen the plugin and check the website before you try again.

The useful checkpoints are:

1. The correct frame has the Home label.
2. The plugin says Choose your plan in the browser after the browser opens.
3. The plugin starts creating the website after you return from Continue with Free.
4. The final screen gives you Open website.

6. Check the live website

Open the returned URL before you share it. Check these items on the real website:

• The intended frame opens as the homepage.
• Every selected frame appears as the intended page.
• Navigation, buttons, logo links, and external links work.
• Text does not clip or overlap at phone and desktop widths.
• Images and media load.
• The browser-tab title is correct.
• Forms, checkout, login, and other external services work separately. Static publishing does not create those backend services.

Use the longer Figma-to-website checklist before you publish a large design.

How this differs from a Figma prototype

A Figma Design prototype is a presentation of frames and interactions. A published website has a public web address and opens without the Figma presentation interface. A prototype link is not the same as a website URL.

How this differs from Figma Sites

Figma Sites is Figma's own hosted website product. Figma's current pricing FAQ says Sites is available with a Full seat on paid plans and that a limited Starter experience is coming later. Figment uses top-level frames from a Figma Design file. It does not publish a Figma Sites file in place.

Use Figma Sites when you want its native Sites workflow and have the required seat. Use Figment when you want to publish selected Figma Design frames through the Community plugin.

Sources: Figma Help: Guide to prototyping in Figma; Figma Help: Use plugins in files; Figma pricing FAQ; Figma Help: Explore Figma Sites; Figma Help: Publish, update, or unpublish a site.