Building from Figma to Wordpress can take time and effort. A good approach for choosing your plugins is to think long-term, considering the Total Cost of Ownership(TCO) and tradeoffs, especially if you’re building an e-commerce.
In this list, we feature the best ways to convert from Figma to Wordpress, for non-technical users or website developers, each with its approximate development cost, page load time, and maintenance cost.
Even if you aren’t tech-savvy, you probably should avoid automated conversion plugins as they may create poor code, which becomes unmaintainable in the coming years.
To speed up your building process even further use Relume, a free tool with free Figma kits and an AI-powered site generator.
Block plugins or block themes (Gutenberg)
You don’t need to be an expert to build Figma design for Gutenberg. Wordpress block plugins or block themes 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
Spectra
Spectra is a block plugin from the creators of the Astra theme. It offers a variety of paid and free full-page patterns – also known as website/layout templates – for Woocommerce and many other industries:
Spectra Pro
The Spectra Pro block plugins offer enhancements, such as:
- Dynamic Content; ACF, PODS, and Meta Box
- Loop Builder; displays posts and pages based on custom parameters
- Popup Builder and Modals
- Animations, Image Gallery, Instagram Block
- Slider Pro
- User Registration and User Login form customization
YITH Wonder
This theme offers many patterns to enhance your Woocommerce website. It also offers full-page patterns(website/template layouts).
It doesn’t require installing a block plugin to use its patterns, it leverages the block editor(Gutenberg) capabilities for the blocks.
Gutenberg Libraries
Wpalpha offers one of the GutenbergHub offers a free Gutenberg pattern library on their website, you can even share previews of full-page patterns that you built. There’s also the official Wordpress pattern repository. It allows you to copy and paste the patterns from there, without having to install a plugin, like others. The Ollie theme is a block theme that offers +50 patterns. To view its pattern list, you must install the theme, add a block, browse all, and explore all patterns. Aino is a new full-site editing theme. It offers numerous patterns for a quick start of design. Aino also offers a paid Woocommerce block theme Mugistore for $59 Other popular block plugins: Currently, the easiest way to convert Figma to Wordpress including header, footer, and custom elements, is with page builders(Divi, Elementor & Breakdance). It’s also the easiest way to build a Woocommerce store. Pricing: Free or starting at $49/year One of the current best ways to export Figma to Wordpress is Elementor. Use the new Elementor Cloud, which is Elementor’s new product that facilitates all the work from building a new website. You can also buy the Elementor plugin at $59/year. Elementor Cloud offers an integrated platform to build and manage multiple websites, with the Elementor Pro plugin installed. It’s hosted on Google’s Cloud Platform, with CDN(Cloudflare), Custom Domain Connection, and Free SSL Certificate. Pricing starts at $10/month(limited). 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: A custom theme is an example theme 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. 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. Pricing: Free Sage is a starter theme from Roots.io, the creator of the WordPress boilerplate tool Bedrock. Other popular starter themes:
Ollie
Aino
Website Builder
Development costs: build it yourself, or hire a developer starting at $20/hour.
Load time: Slow
Maintenance: EasyElementor
Breakdance
Custom theme
Development costs: start at $35/hour per developer
Load time: Fastest
Maintenance: HardSage Theme
