Figma to Pixel-Perfect WordPress: My Workflow with ACF

A Figma design is a promise to the client: the site will look exactly like this. The hard part isn't matching the design once. It's matching it and keeping every section editable so the client can add pages next year without calling a developer.

Here's the workflow I use.

1. Read the design as a system

Before writing code I go through the Figma file and pull out:

• Colors, font sizes, spacing and radii. These become design tokens.
• Repeated sections, like hero, feature grid, testimonials and CTA. These become reusable blocks.
• Breakpoints. If the designer only made desktop and mobile, I decide how tablet should behave now, not later.

Figma's Dev Mode makes this much faster. You can inspect exact values and export assets directly.

2. Turn tokens into CSS variables

:root {
  --color-primary: #14b8a6;
  --color-ink: #171717;
  --font-heading: "Sora", sans-serif;
  --space-section: clamp(4rem, 8vw, 7.5rem);
  --radius: 12px;
}

Every component uses these variables instead of hard-coded values. When the client changes a brand color, it's a one-line change.

3. One section = one ACF layout

I build pages with ACF Flexible Content. Each section in the design becomes a layout with only the fields it needs:

• hero: heading, text, image, button (link field)
• feature_grid: heading and a repeater of icon, title and text
• cta: heading, button and background style

Then each layout gets its own template part:

<?php
if ( have_rows( 'sections' ) ) :
    while ( have_rows( 'sections' ) ) : the_row();
        get_template_part( 'template-parts/sections/' . get_row_layout() );
    endwhile;
endif;

The client now builds pages by stacking sections, and every section looks exactly like the design because the markup never changes.

I keep ACF field groups in Local JSON (acf-json/) so they're version-controlled with the theme and deploy with Git.

4. Pixel-perfect checking

"Pixel-perfect" needs a check you can repeat:

1. Export the Figma frame at 1x.
2. Overlay it on the built page (a browser extension like PerfectPixel works well) at the same viewport width.
3. Fix spacing and typography until they line up, then check mobile.

The usual culprits are line height (Figma's "auto" vs the browser's normal), letter spacing in percent vs em, and images that crop differently.

5. Don't sacrifice performance for looks

Designs often include heavy details that are easy to get wrong:

• Large background videos: use a poster image and load the video only on desktop.
• Fancy scroll animations: prefer CSS or a small library over a full animation framework.
• Custom fonts: self-host and subset them.

A pixel-perfect site that scores 40 on PageSpeed isn't finished.

6. Hand-off

Before launch I record a short video showing the client how to add a page, reorder sections and swap images. It saves hours of support emails.

Result

The client gets a site that matches the design, is fully editable, and stays fast. That's what "Figma to WordPress" should mean.

Have a Figma design that needs building? Let's talk.