How to Convert a Figma Design into a WordPress Website

These days most agency sites start life in Figma. The design gets approved, the client loves it, and then comes the harder part: turning that file into a WordPress site that looks the same and that the client can edit without calling you.

Next: the process step by step, the main ways to build it, and the usual reasons a build ends up looking slightly off. If you still get PSD files, the same steps apply.

Step 1: read the file like a developer

Before writing code, go through the Figma file and look for what’s missing. Are all templates there, including the blog archive, a single post, search results and the 404 page? Are there mobile and tablet frames for the key pages? Hover, focus, error and empty states? Do colours, type and spacing come from shared styles, or are there dozens of one-off values? And is it clear which parts the client should be able to change?

Raise the gaps now. Designing a mobile menu takes the designer ten minutes. Guessing it, building it and redoing it after review takes a lot longer. Our guide to the designer–developer handoff describes a file that’s ready to build.

Step 2: pick the build approach

There are three common routes.

Page builder

Elementor and similar tools let you rebuild the design visually. That’s quick for simple sites. The downsides show up later: heavier pages, a harder time matching the design exactly, and a client tied to one plugin.

Custom theme with ACF blocks

A custom theme with blocks built on Advanced Custom Fields gives you full control over the markup, and editors get simple fields to fill in. It’s a dependable choice for marketing sites and the one many agencies settle on.

Custom theme with native Gutenberg blocks

Native blocks show the client a live preview while they edit, and they use the editor WordPress itself keeps investing in. They take more skill to build, and the editing experience is the best of the three.

For most agency projects we’d go with a lightweight custom theme and either ACF or native Gutenberg blocks. You get close design fidelity, a fast site and safe editing.

Step 3: put the design system into code first

Move the Figma styles into code before building any section. Colours, type and spacing go into theme.json or CSS variables. Headings, paragraphs, links, buttons and forms get their base styles. The grid matches the one in the design.

If the foundation matches Figma, every section you build on top of it starts out matching too.

Step 4: build sections as blocks

Turn each section of the design (hero, features, testimonials, call to action) into a block the client can add, move and edit. Think carefully about which settings to expose. Real content needs some flexibility, but every extra option is another way for an editor to break the layout.

Step 5: templates and dynamic content

Then build the templates that fill themselves: the blog archive, single posts, case studies, team members, products. Where content has a clear structure, use custom post types and fields.

Step 6: responsive layouts

Build mobile-first and check each section at real screen widths, not only at the two frame sizes in Figma. Where a breakpoint wasn’t designed, follow the design system and run your decisions past the designer.

Step 7: compare with the design

Put every page next to its Figma frame, on desktop and on a phone. Check spacing, font sizes, line heights, colours and how images crop. Then do the usual QA: forms, browsers, speed, accessibility. Our WordPress QA checklist has the full list.

Step 8: hand it to the client

Get the site ready for the people who’ll use it every day: tidy editor screens, block names that make sense, and a short guide to editing pages.

Why builds drift from the design

When a finished site looks slightly off, the cause is usually one of these. The design system never made it into code, so each section was styled on its own. Missing breakpoints were improvised without the designer. Page builder spacing controls were used instead of one consistent scale. Or nobody compared the build with Figma before the client saw it.

Building Figma designs at agency scale

If your agency designs more sites than your developers can build, a white label partner can take over the build. Our Figma to WordPress development service follows this process: we review the file, flag gaps before quoting, build on staging and compare every page with the design.

Send us a Figma file for an estimate.