Figma to WordPress
A Figma file shows a page on the day it launches. A WordPress site has to keep its shape after your staff have published forty posts, swapped the hero image and typed a heading twice as long as the designer planned for.
We turn Figma designs into a WordPress theme written by hand, and we treat the editing screen as part of the job. There is no page builder underneath, so nothing breaks when a plugin licence lapses. This website runs on a theme we wrote ourselves, made the same way.
Block theme, classic theme or both
The design does not settle this. How much freedom your editors should have does.
Block theme
Templates are HTML files made of blocks, and theme.json holds colours, type sizes and spacing. Staff can change headers, footers and templates in the Site Editor. Suits teams trusted with layout.
Classic theme
Templates are PHP files that nobody can alter from the dashboard. Posts and pages are still written in the block editor. Suits sites where the page frame must stay fixed.
Classic with theme.json
The frame stays in PHP, while the editor offers only the palette, font sizes and spacing from the design. A common middle path.
Leaving a page builder
Content made in a page builder is stored in that builder's own format. We plan the move page by page and tell you which pages must be entered again by hand.
What the Figma file turns into
Each part of the design has a matching part in WordPress.
Variables become theme.json presets
Colour, typography and spacing variables are written into theme.json, so the editor sidebar shows the brand colours and nothing else.
Components become custom blocks
A pricing row or team card becomes a block registered through block.json with its own fields. Editors fill in fields. They do not arrange columns.
Sections become patterns
A whole band from the design, such as a call to action with image, is saved as a pattern that can be inserted and then edited.
Frames become templates
Home, single post, archive, search results and the 404 page, including the ones the designer did not get round to drawing.
Fixed layouts become locked templates
Where order matters, blocks can be edited but not moved or removed.
What the file needs before we start
WordPress content changes daily, so the design has to show more than the ideal case.
- Colour and text styles that are named, not loose hex values
- A blog post frame with a long title and a short one
- Archive, search results, empty search and 404 frames
- Menu states: current page, dropdown open, mobile menu open
- Form fields in error and success states
- Font files, or the licence that permits web use
- A note of which areas editors may change
- Image crops for card, hero and social sharing sizes
From file to live theme
Five stages, each with something you can look at.
Reading the file
We go through every frame and write down what is missing or unclear. You receive that list and an estimate before any code is written.
Theme base
theme.json, fonts, the header and footer, and the block editor styled to look like the front of the site.
Blocks and templates
Built on a staging copy. Each block is tried with awkward content: a long heading, a missing image, one item where three were drawn.
Comparison
Staging pages are compared with the Figma frames at the agreed breakpoints. You get a list of differences and decide which to fix and which to accept.
Editor guide and launch
A short written guide shows your staff each block and pattern. Then the theme goes live.
Asked before most WordPress builds
Will the site match the Figma file exactly?
It is checked against the design at the breakpoints we agree, and every difference found is listed. Browsers set type slightly differently from Figma, so small changes in line breaks are normal.
What happens when WordPress updates?
Blocks built with block.json and the public editor packages follow the path WordPress supports. We stay away from private and experimental APIs for that reason.
Can the design cover a WooCommerce shop?
Yes, if the file includes product, basket, checkout and account frames. Shop templates have many states, so they need drawing, not guessing.
Who owns the theme?
You do. It is committed to your repository, and the terms are in the agreement signed before work begins.
What your procurement team will ask, answered before the call
- Your paper or oursNDA, data-processing agreement, master agreement and statement of work.
- Named peopleThe statement of work names the delivery lead and the escalation contact above them.
- Your code, your accountsWork is committed to your repository and assigned to you on final payment.
- Local sales teamsSales teams in the UAE and Singapore; engineering in Rajkot and Ahmedabad, India.
What WordPress theme work costs
The leading digits of each figure are shown here. A person reads your request and sends the full rate card, a personal calculator or a written quotation.
Rate bands
Full rate follows an approved request
| Role | Hourly | Monthly* |
|---|---|---|
| Frontend / WordPress | $3? | $4,8?? |
| Backend / API | $3? | $5,1?? |
| Full-stack | $3? | $5,6?? |
| Mobile (React Native / Flutter) | $3? | $5,6?? |
| DevOps / Cloud | $4? | $6,4?? |
| AI / Automation engineer | $4? | $7,2?? |
| QA / Test engineer | $2? | $4,0?? |
| UI / UX design | $2? | $4,4?? |
*160 hours a month, full time, in US dollars. A question mark stands for a digit sent on request. Rates depend on seniority, contract length and overlap hours. Hosting and third-party costs are separate.
See full pricing
Share the file and the current site
Send a view link to the Figma file and tell us who will edit the site day to day. We reply within one business day.