Search the Community

New Figma to PageGrid Importer From design to production in no time, with the new Figma to PageGrid Importer. At our studio, Konkat, we do all our design work in Figma because it lets us move and iterate quickly alongside our clients. While AI is great at spinning up generic, cookie-cutter layouts, true professional value lies in creating websites genuinely custom-tailored to a client. For that level of work, pure text prompts simply don’t offer the layout precision you need—writing a description will never match the intuitive control of direct visual input. But as any developer here knows, turning a finished design into a live, client-editable website usually requires a lot of manual layout replication before you can get to the core development. Even though PageGrid is already a massive speed upgrade, manually recreating a canvas layout element-by-element is still a time-consuming assembly phase. It eats up hours better spent on deep development, custom logic, and polished execution. That’s exactly why I (with the help of Claude Code) built the new Figma Exporter plugin and a native PageGrid Importer module for ProcessWire. It compresses hours of manual layout replication into a five-second automated import. By handling the structural translation instantly, it lets you skip the repetitive setup entirely and jump straight into the fun stuff: custom animations, fine-tuning, and high-level development. Instead of just telling you what it does, I want to be completely transparent about how it was built, why we intentionally avoided a "live AI" generation solution, and how it changed my perspective on building dev tools. Why We Rejected Live AI Generation When I started working on this, my first instinct was to leverage the power of AI agents directly during the import process. I tried using Claude via a live Model Context Protocol (MCP) setup to directly read my active Figma canvas and dynamically generate the PageGrid layout on the fly. Honestly, AI is surprisingly good at understanding how to build a layout in PageGrid now, and the initial results were already incredibly close to the original Figma designs. Using MCP is a really interesting alternative, but for daily production work, relying on a live AI connection just didn't make sense for a few major reasons: It was unpredictable: Every single time I ran the generation on the exact same layout, the resulting code structure came back slightly different. It was slow: Relying on live AI cloud prompts meant waiting for the model to think, stream, and process the data. API Bottlenecks: The live Figma API connections generated far too many requests, causing frequent rate-limiting issues. Resource-heavy: Each time we want to create a new layout we have to prompt an AI, which uses extra computing power and adds up in ongoing token costs. At our agency, Konkat, we built PageGrid to power actual production sites for our clients. We plan to use these tools daily to optimize our own studio workflow. In a professional production pipeline, an unpredictable guessing game that changes its behavior on every prompt simply isn't an option. We needed something that was completely deterministic, blazing fast, and independent of live external APIs. So, we changed our strategy entirely. Changing the Strategy: AI as the Engineer, Not the Runtime Since Claude had become deeply familiar with the Figma API, and thoroughly understood the structure of ProcessWire and PageGrid, I stopped trying to use the AI to generate layouts on the fly. Instead, I partnered with Claude to write a dedicated, local compiler. Claude acted as my co-developer. Together, we built a simple, two-part ecosystem: A local Figma Exporter Plugin that reads the canvas instantly and packages the architectural structure and assets into a lightweight .ZIP file. A native ProcessWire Importer Module that unzips that package and handles the rendering locally on your server. Because the final tool runs entirely on pure, local code logic, it requires zero active AI API calls, runs instantly, and produces the exact same, predictable structure every single time. Respecting Layout Intent Without Forcing "Auto Layout" Most Figma-to-code plugins fail unless you have meticulously built your file using strict, perfectly nested Auto Layout components. If you design loosely, those plugins break or output absolute-positioned spaghetti code that is impossible to maintain. As a designer, I know that forcing strict Auto Layout workflows during the rapid, creative prototyping phase can feel incredibly restrictive. That’s why we engineered our importer to give you complete freedom to design your way. Whether you prefer nesting elements using strict Auto Layout, arranging them freely using Figma's native Column Layout Guides, or using a mix of both, the compiler adapts to your workflow. When you run the importer, PageGrid respects your structural intent and translates it into standard web architecture: Native CSS Grid & Flexbox: Elements aligned to your column guides are automatically mapped to precise, responsive CSS Grid positions, while Auto Layout frames are translated cleanly into semantic Flexbox structures. Direct Layer Mapping & Smart Flattening: The importer replicates your Figma layer structure directly in PageGrid by mapping all layer nodes straight to native PageGrid Blocks like pg_group (groups), pg_image (images), and pg_editor (text). At the same time, the parser automatically filters the tree, flattening out any unnecessary deep nesting or arbitrary wrappers when needed so your backend tree stays incredibly clean. Maps Figma API to Modern CSS: It natively extracts typography styles, colors, borders, spacing rules, and effects, turning them directly into clean PageGrid metadata or copyable CSS. 💡 The "Grouping" Pro-Tip: Because Figma group nodes map directly to pg_group container blocks, grouping items that belong together directly shapes your PageGrid backend structure. While the importer can handle ungrouped layers, grouping your elements ensures the highest layout accuracy and keeps complex structures beautifully organized under the hood. Keeping You in the Driver's Seat When the import finishes, you are not left with a static image or a fragile webpage that breaks the moment you edit a line of text. You get a native, fully editable ProcessWire page built out of organized PageGrid blocks. Because PageGrid functions like a precise web canvas, the layout remains rock-solid. Your clients can easily log in to update text and images directly on the live page, but they will never accidentally break the structural layout you designed. The mechanical translation work is completed in five seconds. From there, you take over to do the work that humans do best: adding fine-tuned interactions, implementing custom animations, and binding dynamic backend data fields. How to Try It You don't need a paid plan to use it—the plugin works perfectly on the free version of Figma. Here is how to get started: Get the Figma Plugin: Open the Figma to PageGrid Exporter in Figma. Select your main design frame and download your .ZIP package. Install the Importer Module (Self-Hosted Only): Add the PageGridFigmaImport module to your ProcessWire backend. Upload & Run: Go to Setup > Figma to PageGrid, drop in your file, and watch your layout appear natively. Documentation: Figma Import Documentation. I consider this a beta launch, not every generated layout will be perfect out of the box, but results so far have been quite impressive. I plan to improve this over time. Give it a try and let me know what you think!

Skip the "Add New" dialog page on Page Tree and elsewhere and go directly to the resulting page that shows all page fields right away. Page creation is now improving from being a two-step to becoming a one-step process. Scenarios: When only one Template can be selected: Skip the intermediate "Add New" dialog page by adding a GUID or other temporary page name that is later renamed. Show the final editing page so user can start editing all fields right away On Save: Page name is renamed with title When multiple Templates can be selected: Ask user to select Template on clicking New (before leaving the Tree Page). Then use the "one Template" flow above. (I am aware why the Page Name is needed.)

Hey guys, As the question says, I'd really like to learn about your initial client communication workflows. In other words, what's your process like from the moment you get a request to provide a quote for a website to the moment you actually send the quote? My current workflow: A client fills out the contact form on my site to request a quote. I review the information provided and send them a Word document questionnaire with a list of questions. I ask for things like project scope, features needed, desired timeline, allocated budget, etc. They fill out the document and send it back to me. I review the information provided and make sure I've got everything I need. I write and send the quote to the client. Client accepts the quote. I send them a contract, get it signed and collect 50% of total payment. I gather some extra information from them, usually just by asking questions via email or by sending them another Word document questionnaire. I start building their site. Lately, I've been thinking about changing this workflow a bit. Currently, my online contact form has three fields: name, email and message. What I'm thinking is, what if I provide a select toggle above my form so that clients can choose between a simple, general enquiries form and a larger form (with all the questions I've got in my Word document) to request a quote? This would allow me to do away with the Word document, and would make this a one-step process. The reason why I haven't done this so far is because I'm not sure how good of an idea it is to have a long contact form with say, 10-15 questions. What's your take on this? Another thing I'm not entirely happy with is having to send them two questionnaires (steps 2 and 8). The reason why I do this is because I don't want to overwhelm them with lots of questions at the beginning, and also because, to be honest, the questions I ask in the 2nd questionnaire do not really influence pricing, as they have more to do with the nature of their business, their goals with the new site, possible corporate colours they may have, things like that. What do you guys think? Does my workflow seem sensible to you? Is it similar to what you do? What would you change? Thanks, and sorry for the brick! P.S. If some of you guys are willing to share your client questionnaires I would certainly appreciate it.

Hi everybody, we started our first Processwire driven project in my new company and for the first time, I was working on one site with more than 2 colleagues on the same site. It didn't take long for us to stumble across some problems when multiple developers work at the same time, conflicts with updating the database on vagrant machines, like duplicate entries for page IDs, errors when setting up fields and stuff like this. We ended up working on a dedicated database server, that we linked to our vagrant machines and most of the problems were gone, but the performance of this constellation is really bad compared to our first approach with database running on vagrant machines. I already tried to find a solution in the forums but I couldn't find anyone with problems like this. So I was wondering: how do you manage projects with multiple developers on vagrant machines in a git-based workflow?

Warning: it's going to be TL;DR so proceed with caution In an effort to come up with an optimized development workflow, I have come up with the idea of implementing most of the required template files in the form of static HTML files first (based on a "CSS framework" which will also serve as the CSS base of the site). Basically I want to implement most of the frontend without touching ProcessWire in the first place. The advantage of this approach is that it is a lot faster to work with only HTML/CSS/JS during the frontend design phase of the project, and the end result of the design phase can be "similar" to a wireframe/mockup which can be presented to a client, but this "mockup" actually represents (say) 80% of the final design, so it is something that is rather good to work with when the backend development with ProcessWire begins. This also means that my ProcessWire template files will be mostly implemented with <?php echo ... ?> and alternative syntax control structures that can be "just injected" into the above mentioned static HTML template files to turn them into ProcessWire template files later on. So far so good, but my ProcessWire template files are going to be separated into "template file partials", and I also want to implement the static HTML template files in the same way, so that they are also separated into "template file partials", and ideally organized in the very same structure. E.g. I will include the site's navigation in the ProcessWire template file like this: <?php echo $navigation ?> So I want to do the same in the corresponding static HTML template file, something like this: <div data-template="partials_navigation"></div> If it can be done recursively, then I can implement the same in both cases. With ProcessWire, I use wireRenderFile() to render partials recursively, so I just had to figure out what to use in the case of the static HTML template files. What else to use if not JavaScript? I started off by googling around, looking for some pre-made solutions... I did not find too much that could help me, the only thing useful I could dig up is "HTML Imports", for example: http://blog.teamtreehouse.com/introduction-html-imports Note, that currently this technique only works in Chrome(-ium), but that is my choice in frontend development anyway. I've read somewhere that other browsers might never implement "HTML Imports", but that is to be seen... I have found a lot of articles explaining the basics of "HTML Imports", but I could not find any libraries or frameworks nor even something similar to what I need, so I implemented a proof of concept version of mine: I'm quite happy with the result so far. The JavaScript code needs some additional error handling, but otherwise it seems to do what I need. Here it is in action (Chrome(-ium) only!!!): [...no longer live...] And here is the source code for those who want to take a closer look: [...old stuff, I removed it to save space...] However, I'm pretty sure that someone must have already come up with this idea, so I'm asking the ProcessWire community if anyone can point me to similar solutions, something that I can study and/or use. So any piece of advice that might help me to take it to the next level, or any objections to this "HTML Imports" technique, any disadvantages? Thank you in advance

Hello everyone, I didn't play much with ProcessWire, my project has just started and I have no experience about how ProcessWire will be when go live. I'm using a tool to deploy my code automatically to production server after build passed (Magallanes). Please give me the answers for the questions below: Which folders/files will be created by the application after installed ? Which folders/files usually be overwritten? Which folders/files using as cache, as session, as temporary? Do ProcessWire supports logs? If so, where is it? Which files are using as configuration files? Should I concern about template configuration files? Any help would be appreciated. Thank you!

Hello folks, I was working on different projects and needed to have a better way to organize my code and a workflow. And I came across this methodology https://about.gitlab.com/2014/09/29/gitlab-flow/ Here's a video explaining the workflow Hope it helps