Posted June 28, 2026 by Cameron Ashley. I build Figma files into WordPress sites for a living. Same five things go wrong on every project. Here's the checklist I send to designers before we start.
I'm a WordPress developer. Designers send me Figma files, I build them. Most projects take two to four weeks. Some take six. The difference is almost always the Figma file — not the design quality, but how ready it is to hand off.
I've rebuilt the same designs twice because the Figma file had gaps. I've spent eight hours guessing at hover states that should have been in the file. I've shipped a build and then discovered the mobile breakpoint doesn't exist for the contact page.
This post is the checklist I now send to every designer before we start. Use it. Save the hours.
1. One artboard per page, three per page
Every page in your design should exist as three artboards: desktop, tablet, mobile. Not "desktop with a mobile pattern sketched at the bottom." Three separate, fully-built artboards.
The most common gap I see: the designer built a beautiful home page on desktop, mobile is a "we'll figure it out" comment, and tablet is missing entirely. When I get that, I have two choices — build mobile from scratch and lose a day, or push back and lose a week waiting on revisions.
If your client signed off on desktop only, push back before sending to the developer. Get mobile sign-off first. It's easier to argue for it before the build starts than after.
2. Every interactive element needs a state
Buttons, links, form fields, accordions, tabs, modals — every interactive element should have its states drawn out. Default, hover, focus, active, disabled. Sometimes loading.
The single biggest time sink: designers build the default state perfectly, skip the others, and tell the developer "just match the design and figure out hover." I end up either guessing (and getting it wrong) or asking (and losing a day to back-and-forth).
If you build components in Figma with variants, set up the hover, focus, active, and disabled variants before you export. It's 20 minutes of work that saves me three hours.
3. Use real content — not lorem ipsum
The Figma file I get should have the final copy in it. Not "Lorem ipsum dolor sit amet." Not "[HEADLINE GOES HERE]." Not placeholder names like "John Smith" and fake company names.
Real copy does two things. First, I can see how long the content is. A 6-word headline and a 20-word headline lay out differently. Second, the build looks closer to done at every stage, which means the client review is more useful — they're reviewing the work, not the placeholders.
If the final copy isn't ready yet, tell me. I'll build with placeholders, but the project will need a content swap round near the end. Better to know that upfront.
4. Export your design tokens
Design tokens are the building blocks of your design: colors, typography, spacing, radii, shadows. In Figma, these are in the Styles panel.
Before you send the file, export your styles. There's a free Figma plugin called "Figma Tokens" that exports everything as JSON. Or just screenshot the Styles panel — colors, type styles, spacing values. Anything so I'm not eyeballing the hex codes off the canvas.
When I don't have tokens, I sample colors from your artboards. The result: the final site is 3-5% off from your design. Looks "close but not quite right." The client feels it. They always do.
5. Optimize and export assets in the right formats
Hero images should be exported as WebP at 2x the display size. Icons should be SVG. Background photos should be JPG. Photos with transparency should be PNG.
Don't export from the canvas with the default PNG setting. The file will be 4x larger than it needs to be. Use Figma's export panel: pick the format, pick the size, batch export.
For logos, send both a full-color SVG and a single-color SVG (for use on dark backgrounds). I shouldn't have to ask.
The five things I flag on every Figma file
I open every Figma file and check the same five things. If any are missing, I email back within 24 hours with a list of what's missing. Most projects get the list once, never again.
- Mobile artboards for every page. Not just the home page. Every page.
- States for every interactive element. Default + hover + focus + active at minimum.
- Real content, not lorem ipsum. Or explicit acknowledgement that content will come later.
- Exported design tokens. Colors, type styles, spacing values.
- Optimized assets. SVG icons, WebP images, logos in multiple colorways.
What I don't need from the file
Some things designers include that I never use:
- 3D renders and "hero" mockups — I work from the actual screens, not the marketing shot of the design.
- Pixel-perfect measurements in the dev hand-off tool — I measure from the artboards, not from Zeplin or Figma Dev Mode exports. Both work, but the artboards are usually more accurate.
- Style guide pages — useful for documentation, less useful for the build. The tokens are what I need.
What a clean handoff looks like
Here's what a clean handoff looks like in practice:
- You send the Figma file link + a Loom walkthrough of how the design works (3-5 minutes, talking through the homepage interactions and any unusual patterns).
- I open the file, check the five things above, and reply within 24 hours with either a green light or a list of what's missing.
- You fill in the gaps. I quote a fixed price and timeline.
- We agree on a delivery date. I start building.
This process takes two to four weeks depending on scope. A typical 6-10 page marketing site with the file done right lands at $2,500 to $6,000.
The cost of a messy handoff
If you send a file without the five things, the timeline stretches. Here's roughly what each gap costs:
- Missing mobile artboards: +3 to 5 days
- Missing states: +2 to 4 days of back-and-forth
- Lorem ipsum placeholders that get swapped later: +1 to 3 days per swap round
- No tokens: ongoing 5% "close but not quite" revisions
- Unoptimized assets: rebuild for page speed after the design is done
A messy handoff can double the project time. None of it is hard to fix upfront. It's just discipline.
What if I'm not a designer?
If you're a business owner who hired a designer and now need a developer, this post is still useful. Forward it to your designer before the build starts. Most designers appreciate the clarity — they'd rather know what you need than guess.
If you don't have a designer and need someone who can take your Figma file and build it in WordPress, that's literally what I do. Send me the file. I'll review it for free and tell you what I see.
About the author
Cameron Ashley is a Toronto-based WordPress developer who specializes in Figma-to-WordPress builds. He's shipped 100+ sites for freelance designers and small Toronto design studios. Top Rated on Upwork with $100K+ earned and 100% Job Success. More about Cameron →