Every week, designers and agencies reach out to developers asking the same question: “Can you build this Figma design into a website?” The answer is almost always WordPress. Install a theme, configure some plugins, squeeze the design into a template, and call it done. I used to do the same thing. After 17 years of building on WordPress, I’ve found a better approach for custom Figma-to-website builds: Payload CMS with Next.js.
The Problem With Figma to WordPress
Designers create beautiful, structured layouts in Figma. Clean typography, consistent spacing, purposeful components. Then a developer takes that design and builds it in WordPress, and something gets lost in translation.
The design becomes a theme. The theme needs plugins for custom fields. The plugins need other plugins. The admin panel fills up with menus that have nothing to do with the client’s actual content. The client logs in and has no idea where to edit their homepage hero section because it’s buried three levels deep in an Advanced Custom Fields group.
Worse, the beautiful Figma components that the designer carefully crafted become rigid WordPress template parts that break when someone tries to add a new section or change the layout. The gap between what was designed and what was built widens every time the client makes an edit.
A Better Workflow: Figma to Payload CMS
Payload CMS is an open-source, code-first content management system built on Node.js and React. When I convert a Figma design to a Payload-powered website, the workflow looks completely different from WordPress.
I look at the Figma file and identify the content structure. What are the page types? What fields does each section need? What content is static and what’s dynamic? Then I define that structure in Payload’s configuration. Collections for pages, blog posts, team members, case studies, or whatever the design calls for. Fields that match exactly what the client needs to edit.
Payload generates the admin panel automatically from that configuration. The client logs in and sees their content types, their fields, their media library. Nothing else. No plugin menus, no WordPress dashboard widgets, no update notifications for things they don’t understand.
On the frontend, Next.js renders the Figma design as React components. Each component pulls its content from Payload’s API. The design stays pixel-accurate because there’s no theme layer mangling it. Components are reusable, responsive, and fast.
Real Example: What This Looks Like in Practice
Say a designer hands me a Figma file for a professional services firm. The design has a homepage with a hero section, services grid, team carousel, testimonials, and a blog feed. There’s an about page, individual service pages, team member profiles, and a blog.
In WordPress, I’d need a page builder or ACF Flexible Content for the homepage, a custom post type for team members, another for services, a blog (native), and probably a testimonials plugin. Five different systems managing content on one site. The client needs a 30-minute walkthrough just to understand where everything lives.
In Payload, I define four collections: Pages, Services, Team Members, and Blog Posts. Each has exactly the fields the design requires. The homepage is a Page with a “blocks” field containing Hero, Services Grid, Team Carousel, Testimonials, and Blog Feed blocks. The client clicks “Homepage”, sees their blocks in order, and edits what they need. That’s it.
When Figma to WordPress Still Makes Sense
I’m not saying every Figma design should become a Payload site. WordPress is still the right choice when:
- The budget is tight and speed matters more than architecture
- The client needs WooCommerce or a specific WordPress plugin ecosystem
- The design is straightforward (brochure site, simple blog)
- The client’s team already knows WordPress
I still build plenty of WordPress sites. But when a designer hands me a complex Figma file with custom layouts, multiple content types, and a client who values a clean editing experience, Payload is the better foundation.
The Technical Stack
For the technically curious, here’s what a typical Figma-to-Payload build looks like:
- Payload CMS: Content management, admin panel, REST and GraphQL APIs, authentication, access control
- Next.js: React-based frontend framework with server-side rendering, static generation, and image optimisation
- TypeScript: Full type safety from CMS to frontend, so content fields are validated at build time
- Vercel: Deployment platform with automatic previews, edge caching, and zero-config SSL
- PostgreSQL or MongoDB: Database, depending on the project requirements
The entire configuration lives in code, version controlled in Git. Staging environments, pull request previews, and automated deployments are standard. Try doing that reliably with a WordPress theme and 12 plugins.
What Designers Should Know
If you’re a designer who works in Figma and partners with developers to build production sites, here’s why you should care about this:
- Your design stays intact. No theme layer reinterpreting your layout. React components match your Figma components.
- Your clients will be happier. A clean admin panel means fewer “how do I edit this?” support calls.
- You can design more ambitiously. Complex layouts, conditional content, multi-step forms, and interactive elements are all easier to build when you’re not fighting WordPress’s template hierarchy.
- The handoff is cleaner. Figma’s component structure maps naturally to React components. What you name in Figma is what the developer builds.
Getting Started
If you’ve got a Figma design that needs to become a website, I’d love to take a look. I offer a $150 design review where I’ll assess your Figma file, identify the CMS requirements, and give you a fixed-price quote for the build.
Check out my Figma to Payload CMS service page for pricing details, or get in touch to send me your Figma file.