Figma to PageGrid
Quickly transform your static Figma designs into a responsive, production-ready PageGrid website. No Auto Layout required—simply design using Figma's native Column Layout Guides and let the exporter handle the rest.
Getting started
- Install the Figma to PageGrid Exporter Plugin in Figma
- Select a Frame and Export .ZIP folder from Figma
- Install the PageGridFigmaImport Module for ProcessWire
- In your ProcessWire admin go to
Setup > Figma to PageGridand Import the .ZIP file - Polish and publish
Features
- Parses the Figma layout grid and maps elements to CSS grid column/row positions
- Converts Figma groups into nested PageGrid blocks (pg_group, pg_image, pg_editor, etc.)
- Extracts typography, colours, borders and spacing as PageGrid metadata or copyable CSS
- Imports Figma Text Styles (reusable Figma typography definitions) as global CSS classes
- Creates a new ProcessWire page with all blocks pre-populated, ready to edit in the visual editor
For Best Results: Use Column Layout Guides: Select your Frame, click + next to Layout grid in the right panel, and change the type to Columns
