PageGrid Figma Import

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

 Download  GitHub  Support

A ProcessWire module that converts Figma design exports into responsive PageGrid layouts powered by a clean CSS Grid structure.

What it does

Export your Figma design as a ZIP file using the Figma to PageGrid Exporter Plugin, then upload it through the Setup → Figma to PageGrid admin page. The module:

  • 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_text, pg_editor, …)
  • 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 ProcessWire page with all blocks pre-populated, ready to edit in the visual editor

Documentation

Full documentation and usage guide

More modules by jploch

  • PAGEGRID Page Builder PAID

    Build visually with PAGEGRID’s intuitive editor, seamlessly integrated with ProcessWire’s API, fields, and permissions for full power and flexibility.
    FieldtypePageGrid by jploch

  • Admin Theme Canvas

    A minimal admin theme with optimised page editor UI, based on Uikit 3. Currently this is an early beta. It's not recommended to use it for producton yet.
    AdminThemeCanvas by jploch

  • PageGridBlocks

    Get up and running fast! Use our ready-made blocks for the PAGEGRID page builder and launch pages in minutes.
    PageGridBlocks by jploch

  • Quick Tree

    This module is great for productivity when editing many pages within the admin, as it gives you direct access to the page tree navigation without having to hover the tree icon first.
    Added 8 months ago by jploch

  • PageGrid Figma Import

    Transform your static Figma designs into an editable, responsive ProcessWire website in seconds.
    Added 2 days ago by jploch

All modules by jploch

Install and use modules at your own risk. Always have a site and database backup before installing new modules.