The Designer’s Technical Checklist for a Clean Figma to WordPress Handoff

The quality of a Figma-to-WordPress build is decided before a single line of code is written. A well-prepared design file produces a pixel-accurate site quickly; a loose one produces guesswork, back-and-forth, and a result that does not quite match. Here is the checklist we wish every designer used.

1. Define your breakpoints explicitly

Design for desktop, tablet, and mobile — and actually lay out the key screens at each size. The most common handoff gap is a design that exists only at desktop width, leaving the developer to guess how it should reflow. If you have specific intentions for how a layout collapses on mobile, show them. Do not make the developer invent your responsive design for you.

2. Use a consistent spacing system

Build your spacing on a consistent scale — multiples of 4 or 8 pixels is the standard. When spacing is arbitrary, the developer cannot tell whether a 23-pixel gap is intentional or a stray drag. A clean spacing system translates directly into clean, maintainable CSS and a faithful build.

3. Define a real type scale

Set your heading and body sizes as defined styles, not one-off values scattered across the file. Specify the font family, weights, line heights, and sizes you actually want in production. If a font is a paid or non-web font, flag it early — it affects both licensing and performance.

4. Name and organize your layers

A tidy layer structure with sensible names and components tells the developer how you think about the design’s structure. Use components for repeated elements like buttons and cards so the developer knows they should be built once and reused.

5. Specify interactive and hover states

Static comps do not show what happens on hover, on focus, or when a form field is active. Document these states. What does a button look like when hovered? What does an error state look like on a form? These details are part of the design, and if they are missing, the developer has to invent them.

6. Export and label your assets

Mark which images and icons need to be exported, and in what format. Provide SVGs for icons and logos so they stay crisp. Flag which images are decorative and which are content. This prevents a round of “can you send me that icon” after the build starts.

7. Note anything dynamic

If a section will be populated from WordPress — a blog feed, a list of services, a testimonial slider — say so. Static comps look fixed, but the developer needs to know which parts are editable content versus fixed layout, because that changes how the page is built.

The payoff

A file that hits these points can be built fast and accurately, with almost no back-and-forth. That is better for everyone: you get a site that matches your design, your client is happy, and nobody spends a week clarifying spacing values over email. When we take a handoff, this is exactly what we look for — and when something is missing, we flag it up front rather than guessing.