Building from Figma to WordPress can be tricky. A good approach to picking your tech stack is to think long-term, considering the Total Cost of Ownership(TCO), especially if you’re building an e-commerce business.
In this list, we feature the 3 best ways to convert from Figma to WordPress, each with its approximate development cost, page load time, and maintenance cost.
If you want to go the pure HTML + CSS route, use Tailwind for CSS with UndescoreTW, which creates a theme with Tailwind CSS/typography and the WordPress Block Editor.
Block editor plugin
WordPress block editor plugins allow you to build a website using blocks, including building the header, footer, and all other parts of the website.
Pricing: Free or starting at $39/year
Development costs: Free or hire a developer starting at $20/hour.
Load time: Fast
Maintenance: Medium
GenerateBlocks
GenerateBlocks Free is a WordPress block editor with 4 features on it. These 4 blocks (container, grid block, headline block, button) are meant to build your WordPress site with flexibility without having a single block for each thing.
GenerateBlocks offers a Pro plugin that has over 200 pattern templates to speed up your building process. GenerateBlocks Pro starts at $39/year.
Other popular block plugins:
- Kadence Blocks
- Gutenberg
- Kubio (Hybrid)
Starter theme
A starter theme is an example theme that you build on top of, making your style and layout changes.
Most developers use a starter theme to build a long-term project, and clients choose this kind of theme based on its scaling purpose, a positive tradeoff.
The maintenance costs of custom themes are high, and each edit you ask your developer, even on a contract, can be costly.
Pricing: Free
Development costs: start at $35/hour per developer
Load time: Fastest
Maintenance: Hard
Sage Theme
Sage is a starter theme from Roots.io, the creator of the WordPress boilerplate tool Bedrock.
Other popular starter themes:
Theme Builder
Currently, the easiest way to convert Adobe xd to WordPress including header, footer, and custom elements, is with page builders(Divi, Elementor & Breakdance).
Pricing: Free or starting at $49/year
Development costs: build it yourself, or hire a developer starting at $20/hour.
Load time: Slow
Maintenance: Easy
Breakdance
Breakdance is a new page builder from the creators of page builder Oxygen. With an approach to having a more user-friendly experience while visually building a website, it can be an Elementor alternative.
Breakdance does the same easiness of building a website with a drag-and-drop feature, but it has the advantage of generating a leaner page, that will load faster than others. With Speed and Core Web Vitals as an algorithm, it’s necessary to have a fast-performing website to rank high in SERP positions.
One of the main features of Breakdance is its support for Woocommerce. It comes with 26 Woocommerce widgets, including customizing the cart page, account page, and mini cart.
Breakdance offers a form builder with built-in integrations with all major marketing, including MailChimp, ActiveCampaign, and Convertikit. Breakdance has a unique pricing of $149/year for unlimited sites.
Other popular page builders: