The short answer
A Figma design becomes a WordPress site when a developer rebuilds it by hand as a theme: the colours, fonts and spacing become theme settings, the repeated sections become blocks or patterns, and the pages are recreated with your real content.
Automatic converters exist, but for a business site they rarely produce code that is fast, accessible and safe for staff to edit.
So the useful questions are not "which plugin converts Figma" but "is my file ready to hand over" and "which build route fits how we will edit the site". Both are covered below. The file itself may follow website design trends for 2026 or ignore them; the conversion process is the same either way.
We do not sell Figma design work as a separate service, and this article does not assume we drew your file. It is written for owners and designers who already have a design, from an in-house designer or a freelancer, and want to know what happens next.
What a Figma file usually misses
- States. Hover, focus, error and empty states for buttons and forms are often not drawn.
- In-between screen sizes. Many files show a desktop and a phone frame only. Tablets and small laptops are left to guesswork.
- Real content. Placeholder text is short and tidy. Real room descriptions, treatment names and product titles are not.
- Thai text lengths. A button that fits "Book now" may not fit the Thai equivalent at the same size, and Thai needs more vertical room for its vowel and tone marks.
What does a Figma file need before handoff?
A tidy file saves days of back and forth. If your designer is newer to web work, our primer on UX design basics explains why states and flows matter as much as the look. Before you send the link, check these points.
- Named styles and variablesColours, text styles and spacing saved as named styles or variables, not typed by hand on each layer.
- Auto layout on componentsCards, buttons and sections built with auto layout, so the developer can see how they stretch and wrap.
- Breakpoint framesAt least desktop, tablet and phone frames for every template, not just the home page.
- Component statesHover, focus, disabled and error states drawn for buttons, links and form fields.
- Real or realistic contentLongest likely headings and descriptions in both English and Thai, not lorem ipsum.
- Exportable assetsIcons as SVG, photos at full resolution, and a note on which images staff will replace.
- Font licencesConfirmation that every font may be used on the web, with the licence or the web font source.
- Dev Mode or inspect accessView or Dev Mode access for the developer so measurements and values can be read directly.
Four ways to get from Figma to WordPress
There are four realistic routes. The right one depends less on the design and more on who edits the site afterwards and how long you plan to keep it. If you are still deciding whether you need a bespoke build at all, our comparison of a WordPress template vs custom site covers that choice first.
A word on automatic converters
Converter plugins read the Figma layers and output pages. They are quick for a mock-up. The trouble shows later: absolute positioning that breaks on phones, deeply nested markup, images where text should be, and pages that only the converter can edit. Treat the output as a prototype, not a production site.
| Route | How it works | Good for | Watch out for |
|---|---|---|---|
| Hand-built custom theme | Developer codes templates and blocks from the design | Sites that must stay fast and match the design closely | Needs a developer for new layouts |
| Block theme with patterns | Design values in theme settings, sections as reusable patterns | Teams that add pages often and want guard rails | Pattern set must be planned up front |
| Page builder rebuild | Design recreated inside a visual builder | Owners who want to move things freely | Heavier pages, and editors can drift off the design |
| Automatic converter | Plugin or service turns layers into pages | Quick prototypes and demos | Fragile layout, poor code, hard to edit |
From variables and components to theme.json and blocks
The conversion is mostly a translation exercise. Each thing in Figma has a natural home in WordPress, and a clean file makes the mapping almost one to one. If a term below is new to you, our web design glossary explains themes, components and the rest in plain words.
| In Figma | Becomes in WordPress |
|---|---|
| Colour variables | The colour palette in theme.json |
| Text styles | Font families and a font size scale in theme.json, with Thai and English fonts set separately |
| Spacing variables | Spacing presets and content widths |
| Small components (button, badge, input) | Block styles on core blocks |
| Section components (hero, card grid, FAQ) | Block patterns, some with locked structure |
| Complex components (price box, room card with fixed fields) | Custom blocks |
| Page frames | Page templates and the first real pages |
Where the file used raw values instead of variables, the developer has to reverse-engineer a system: fourteen near-identical greys become three, and odd spacing values get rounded to a scale. That is normal, but you should expect small visual differences from it, and it is worth agreeing up front who signs off on them.
What always changes between design and build
- Text wraps differently in a browser than in Figma, especially Thai, which has no spaces between words.
- Fonts render slightly differently across Windows, Mac, Android and iPhone.
- Menus, sliders and pop-ups need behaviour the static file cannot show.
- Cookie consent and PDPA notices need space the design rarely reserves.
Keeping it editable
A pixel-perfect build that your receptionist or marketing assistant cannot update is a failed build. Editability has to be designed in, not added after launch.
Decide what staff can change
Before development starts, list what changes weekly (offers, menus, opening hours, news), what changes yearly (team, services, prices) and what should rarely change (layout, header, footer). The first group gets simple fields or patterns. The last group is locked in the theme.
Give editors building blocks, not a blank canvas
Staff insert a ready "promotion" pattern, swap the photo and text, and publish. They do not drag spacing handles or pick colours. This is where a custom theme differs from a page builder: the editor stays simple, and the design survives the fifth person who touches it.
Plan for two languages
If the site is English and Thai, each pattern must be tested with Thai text in it before handover. Editors should see how to switch language, where the Thai version of a page lives, and which fields must be filled in both.
Hand over properly
A short recorded walkthrough or a one-page guide per content type saves more support time than any amount of documentation nobody reads.
How do you test the build against the design?
Put the Figma frame and the page on your staging site side by side and work through a fixed list. It is also worth comparing against a few website design examples by industry so you judge the result as a working site, not only as a copy of the file.
- Browsers: Chrome, Safari, Edge and Firefox, plus the in-app browser that opens when someone taps your link inside LINE or Facebook.
- Devices: a mid-range Android phone, an iPhone, a tablet and a laptop. Many Bangkok visitors arrive on mobile data, so test on a phone connection, not only office Wi-Fi.
- Thai text: long headings, line breaks inside words, vowel marks clipped by tight line height, and the Thai font loading correctly.
- Accessibility: keyboard navigation, visible focus, colour contrast and alt text on images.
- Forms: every form sends, shows a clear error, and records consent where PDPA requires it.
- Speed: image sizes, font loading and anything heavy the design added, such as video backgrounds.
Common mistakes
- Approving the design on desktop only, then discovering the phone layout at launch.
- Using a font with no web licence.
- Designing with short English copy and adding Thai at the end.
- Picking a page builder for speed, then fighting it to match the file.
Time, cost and next steps
Three things drive the time and cost of a Figma build: the number of distinct templates (not pages), how many custom blocks the design needs, and whether the site runs in one language or two. Missing states and breakpoints add time too, because the developer has to design them on the fly and get your approval.
For reference, our typical project runs about 15 days. A larger site, a complex catalogue or a file with gaps can take longer, and we say so in the quote rather than after. Our Business package starts from THB 30,000 as an indicative one-time price and covers up to 15 pages in English and Thai on a custom WordPress theme with no page builder, with two revision rounds. The final price is set in your written quote.
If you have a finished file, our website design on WordPress service builds supplied designs as custom themes. Send the Figma link and a list of templates and you can request a quote based on the actual file. For broader background on the platform locally, read our guide to WordPress Thailand, or browse more articles on WordPress, Shopify and platforms.
More on WordPress builds
Sources
- Figma Help Center (Dev Mode, variables and auto layout)
- WordPress Block Editor Handbook: Global settings and styles (theme.json)
Builds and ranks the websites: the systems behind the 17 client sites whose Search Console numbers we publish. This guide was written by the Website Development Bangkok team. More about us