Figment.so
BlogHow to usePricing

The Figma to Website Checklist

Use this checklist with the current Figment Community plugin. It publishes selected frames as a hosted website. It does not export website code.

Before you open Figment

1. Use a Figma Design file

Figment publishes frames from a Figma Design file. It does not publish a Figma Sites file in place.

2. Put each website page at the top level

Each page must be a top-level frame. This means the frame is a direct child of a Figma page. A frame inside another frame or section does not appear as a website page in the publishing list.

You can select from 1 to 100 top-level frames for one website.

3. Choose the homepage before you continue

The first selected frame becomes the homepage. Each other selected frame becomes a separate page. Select the intended homepage first and confirm that Figment shows the Home label beside it.

Do not select desktop and phone frames as two versions of one page. Figment treats each selected frame as a separate page in this flow.

4. Name the frames clearly

Use names such as Home, About, and Pricing. Clear names make the selection list easy to check. Remove duplicate and old draft frames from the top level if they must not become pages.

5. Keep readable content as real content

Keep headings and body copy as text layers. Do not flatten important text into a vector or image. Use vector layers for icons and logos when possible. Compress large photographs before you add them to the file.

6. Check fonts

Use fonts that a browser can load. Confirm that you have a web license for each non-system font. Note the font weights that the design uses. Read Figma fonts not working on your website for the full font check.

7. Add website behavior

Use Figment to add the links and effects that the website needs. Check the navigation, buttons, logo, footer links, and social links. Do not assume that every prototype connection becomes a website link.

In the plugin

8. Use the current publishing action

Open Figment from its Figma Community page or from Saved plugins. Select Make this website public. Community version 35 has no code-export action.

9. Review the selection

Check the frame count and the Home label. Open Website settings to check the title and figment.so address. Then select Make into website.

10. Complete the browser handoff

Sign in when the browser opens. Select Continue with Free for the free hosted option. Return to Figma after the plan choice.

Keep Figma and the plugin open until the website is ready. The automatic build needs the open Figma file.

After publication

11. Open the real URL

Do not stop at the success message. Select Open website and check the hosted result.

12. Test the important paths

  • Open the homepage in a private browser window.
  • Open every page from the website navigation.
  • Test every visible link and button.
  • Check a narrow phone width and a wide desktop width.
  • Check for clipped text, overlap, missing images, and horizontal scrolling.
  • Check the browser-tab title.
  • Test media and effects on the hosted website.
  • Test forms, checkout, login, booking, and other external services separately. Static publishing does not create those backend services.

If the build stops, reopen Figment and check the existing website before you try again. The plugin keeps the selected frames, but an interrupted build does not restart without your review.

For the complete walkthrough, read Figma to Website: How to Publish Your Design.


Get the latest content from Figment. Subscribe today for Figma design guides and website building tips.


Figment.so

Contact

Twitter

Pricing

About

Privacy

Terms