Figma to WordPress conversion manually using Elementor

There are many methods given on the internet for Figma to WordPress or converting Figma design to WordPress. Trust me, NON of these work for your template. Because, every template has its own styles and CSS, pros and cons. That’s why all other methods do not work instead of manual conversion.

There are plugins just like FIGNEL for WordPress to Figma conversion, but it only works for a few templates, not for all.

Table of Contents

Complete Video Tutorial on how to convert Figma template to WordPress

A complete YouTube Video Tutorial on How to Convert a Figma Template into a WordPress Elementor Template

Figma also provides a prebuilt plugin, but it also does not work for all templates.

The custom CSS code shown in this Video can be copied from the below link.

copy CSS Code

Steps to Convert Figma Template to WordPress

There are simple steps to convert the Figma template to WordPress or the Figma template to Elementor design.

Install WordPress and Required Plugins

First of all, you need to install WordPress in your hosting account and domain. Because without installing WordPress it’s not gonna work for us.

You can watch this video tutorial on how to install WordPress.

Required Plugins to install

There are a few plugins that we need to install. 2 Plugins are free and 1 is paid.

You need to install these plugins carefully and start converting your design.

Copy figma styles, fonts, colors

You need to copy your Figma design Default colors, font families, sizes, and layout into a text document that we can use in Elementor site settings.

Add all Settings colors and fonts into Elementor site settings

Elementor to wordpress convert. Elementor site settings preview

Now you need to do site settings and match them with your Figma design. If in Figma design H1 is 42 pixels, set H1 in Elementor site settings 42. Just like that, you need to do for paragraphs and add proper font families to every text matched with your Figma template.

Start Designing your page

Now you need to start designing your page. As entire given above tutorial, we have given complete instructions to design a page with Elementor and add all kinds of required widgets.

Hire a figma to WordPress convert designer

If you can’t make a wordpress stunning design or you can’t convert your design into an actual website, you can hire a WordPress to Figma designer for your help.

You can contact us to get your website done by our designers or by me.

Contact to hire a designer

Hire a WordPress designer via the Freelance platform

There are lots of platforms like Fiverr, and Upwork where you can find a better designer for your website. All kinds of designers with different price ranges you can find there.