If you prefer to sketch, iterate, and finalize your designs in Figma, you can now import your layouts directly into PAGEGRID in a matter of seconds.

Following up on our last update, the new Figma to PAGEGRID Importer is officially live on PAGEGRID Cloud and for self-hosted setups. This tool bridges the gap for creators who prefer to sketch, iterate, and finalize their designs in Figma before bringing them to life.

While PAGEGRID is a powerful visual builder right in the browser, we know that the heavy lifting of the creative process often starts on a blank canvas in Figma. But turning a finished layout into a live website usually forces a shift from creative thinking to hours of tedious, manual rebuilding.

That’s why we built this importer. It turns hours of manual rebuilding into a simple, five-second upload, handling the initial layout setup automatically so you can skip the repetitive work and jump straight into the fun part: adding interactions, custom animations, and finishing touches.

Design your way—without strict rules

Most Figma-to-code tools completely break unless your file uses strict, perfectly nested Auto Layout components. We wanted this importer to adapt to your creative process, not the other way around.

Whether you like using Auto Layout, prefer arranging elements freely using Figma's native column guides, or use a mix of both, the importer understands your intent.

When the import is done, you get a fully editable, responsive layout built with native PAGEGRID elements:

• Smart layouts: Elements aligned to Figmas column guides are automatically mapped to precise, responsive CSS Grid positions, while Auto Layout frames remain flexible and fluid.
• Organized layers: Your Figma layer structure is copied over directly, automatically filtering out unnecessary clutter so your layer tree stays neat and easy to manage.
• Instant styles: It instantly grabs your typography, colors, borders, and spacing, applying them directly to your PAGEGRID design.

The structure remains rock-solid—clients or teammates can easily log in to update text and swap images directly on the live page without any risk of breaking the design. With the tedious setup handled in seconds, you are free to focus entirely on the creative details: smooth interactions, animations, and final polish.

A quick design tip: Simply group related items together in Figma. Because Figma groups turn into container blocks in PAGEGRID, keeping your elements grouped ensures the highest layout accuracy and keeps things beautifully organized under the hood.

How to try it

The entire toolset is free to use, works perfectly even on the free version of Figma, and is already active for all PAGEGRID Cloud users.

If you are self-hosting, install the PageGridFigmaImport module to your ProcessWire backend first.

• 1. Run the Figma Plugin: Open the Figma to PAGEGRID Exporter, select your design frame in Figma, and download your .ZIP file.
  
  
• 2. Upload & Run: In your site backend, go to Setup > Figma to PageGrid, drop in your .ZIP file, and watch your design appear live on the web.

If you want a closer look at how to organize your design files for the cleanest possible results, check out our complete Figma Import Documentation.

Since this is an early beta release, we would love to get your feedback. Give it a spin and let us know what you think over at the ProcessWire forums!

Until next time, happy building!