Figma to PageGrid

Transform your static Figma designs into an editable, responsive PAGEGRID website in seconds.

Design exactly how you want. The PageGrid Figma Importer perfectly handles both strict Auto Layout and free placement using column guides. It translates your layers into clean, native CSS Grid and Flexbox code with zero bloat.

Watch the demo to see how it works!

Getting started

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, and download your .ZIP file.
2. Upload & Run: In your admin, go to Setup > Figma to PageGrid, drop in your .ZIP file, and watch your design appear live on the web.

Features

• Parses Figmas column layout guides and maps elements to CSS grid column/row positions
• Converts Figma groups into nested PageGrid blocks (group, image, text)
• Extracts typography, colours, borders and spacing as PageGrid metadata or copyable CSS
• Imports Figma Text Styles (reusable Figma typography definitions) as shared global CSS classes
• Creates a new page with all blocks pre-populated, ready to edit in the visual editor

How to use

For best results, use column layout guides: Select your frame, then choose Columns under Layout Guides in the right-hand panel:

Elements aligned to your column guides are automatically mapped to responsive CSS Grid positions.