Figma to WordPress for agencies: how your design becomes a site your client can edit
Your Figma design is built by hand into a WordPress theme (your existing one or a new block theme), section by section, so it matches on every screen and your client edits it in the block editor without breaking it. White-label, a new page template usually costs $150–250 and takes about 5–6 hours including checks; no automatic converters.
By Abhinav Saxena · Last checked
- Per page template
- $150–250
- Hours per template
- about 5–6
- Delivered as
- drafts / pull request
What happens to each part of your Figma file
Colour and type styles or variables become theme settings (theme.json), so your client can only pick on-brand colours and sizes. Components such as buttons, cards and testimonials become block styles and synced patterns: one change updates every instance. Auto layout frames become Group, Row and Stack blocks with set spacing. A full section (a hero, a feature grid, a call to action) becomes a pattern your client can insert and fill.
Anything blocks can't express, such as filters, a slider or a calculator, becomes a small custom block, or ACF fields where the data is structured; custom code only where the design truly needs it. Desktop, tablet and phone frames become one responsive layout checked at all three. If your studio builds in a page builder such as Elementor, the same mapping happens inside the builder so new pages match your other sites.
Handoff checklist: what to send with the Figma file
Missing a few of these is normal; we ask before building rather than guess.
- Edit or dev-mode access, with final frames clearly marked
- Desktop and phone frames for each template (tablet if it differs)
- Styles or variables for colours and type, not one-off values
- Real or near-final copy; placeholder text hides layout problems
- Images and icons exportable (SVG for icons and logos)
- Hover, focus and empty states for buttons, forms and cards
- Your theme and conventions: repository access, class naming, build tools
- Which content the client must be able to edit, and what stays locked
- Fonts and web licences
- Staging details, the handover you want (pull request, theme package or staging) and the client's date
How the build is checked before it reaches you
Every page is compared with the design at desktop, tablet and phone; copy is checked word for word; nothing scrolls sideways from 320 to 1920 px; WCAG 2.2 AA basics are checked (headings, image descriptions, contrast, keyboard use); every block opens in the editor without warnings; and existing pages are compared before and after so new CSS doesn't change what's already live. Delivery is as drafts or a pull request, so your client sees nothing until you approve.
A real example
This October we built nine pages from a US design studio's approved designs for its building-products client, inside the studio's own block theme and Git repository: three batches, each merged within about a day, under a week from go-ahead to the last page, $2,100 fixed.
What it costs, page by page
| Page | Price | What drives it |
|---|---|---|
| Page reusing built sections | less than a new template | Assembly and checks |
| New template (5–8 new sections) | $150–250 | New sections built and checked at three widths |
| Complex page (hub, filters, slider, calculator) | from about $300 | Custom behaviour, more testing |
| Your first page | free if it isn't right | The test of whether we suit each other |
Questions studios ask
Yes, and that's usually best: we follow its structure, class names and build tools so the new pages read like the rest of the code.
No. Automatic converters produce markup that's hard to edit and fragile on phones. Every page is built by hand.
No. No contact with your client, no credit, no portfolio mention, NDA on request.
We propose the phone layout for each section before building, and you approve it.
Yes. We review it first and tell you honestly what to keep and what to redo, with a fixed price.