How to Convert Figma to WordPress? [Free & Paid Ways]

Figma is best known as a design and creativity tool, whereas WordPress is renowned for its flexibility, customization, and ease of use. What if you could combine the best of these platforms to create a stunning website?

---

---

Yes, it is possible. You can design your website using Figma and then convert it into WordPress. Although this was once a daunting task involving HTML processing and pre-installed themes, things have become much easier now.

If you are looking for the same, you are in the right place.

In this post, we will guide you on how to convert Figma to WordPress in a very easy, beginner-friendly way without requiring any technical expertise.

---

---

---

Option 1: Use a Free Plugin to convert Figma to WordPress

Although there are multiple ways to convert Figma to WordPress, you can either choose the free method, use the premium conversion plugin, or go through the manual method. (They have their pros and cons)

Step 1: First of all you should create a Figma design that you would like to convert into WordPress afterward. But you should never forget to follow all the industry best practices and design principles.

Step 2: Once you have successfully created and designed the Figma page, it is time to generate its API key. This API key will help to fetch the Figma page through the Plugin and embed it into WordPress.

For this, click on the Figma icon located at the top left side of the screen. It will open Menu options on which you have to select Help and Account> Account settings.

It will open a new prompt in which you have to scroll down to the “Personal Access tokens” section and click on the Generate new token link.

It will further open a new prompt in which you will be asked to provide some basic details for the token that you are creating, such as name and expiration date.

---

Note: In the Expiration section, always select “No expiration” so that your Figma page doesn’t disappear from your website after a specific time frame.

---

Below that set all the Scopes as “Write” and click on the “Generate token” button. You will be redirected to the “Personal Access Token” section from where you can easily copy the generated token and save it either in Notepad or on any editor.

Step 3: Now that you have successfully generated and saved the token, it is time to convert your Figma page into WordPress.

To begin with the process, you need to install and activate a simple yet powerful WordPress plugin named “Animation and Design Converter for Gutenberg Block – Advanced Addons” on your WordPress site.

After successful installation and activation, open your WordPress site’s page or post on which you would like to embed your designed Figma page.

On that page or post, click the “Import from Figma” button at the top left of the screen.

A prompt will open asking you to provide the “Figma Access Token” you generated and saved earlier. Enter the Figma File URL.

For the Figma File URL, head back to your Figma File, copy the URL in the browser Tab below, and paste it into the Figma File URL box.

For the rest, the Plugin will do its work and convert the Figma file into WordPress blocks. After that, you can do as many customizations as you want from the block panel.

Once done, click on the “Publish” or “Update” button to save your settings.

---

Option 2: Use a Paid Plugin to convert Figma to WordPress (More efficient and HassleFree)

For this method, we will use a more popular and efficient conversion plugin, ‘Uichemy.’ This plugin offers a very hassle-free and straightforward workflow, making the conversion process seamless. It is best suited for beginners with no coding expertise as well as developers who want to speed up their process.

Currently, this plugin can convert only Figma designs into Elementor and Bricks website editors, but the company has promised to bring support for Gutenberg blocks in the future.

Step 1: Open your Figma design and install the Uichemy plugin on the Figma dashboard to initiate the conversion process.

• To do this, search for “UiChemy” in the search bar and find the UiChemy plugin.

Click the “Let’s Start” button and follow the instructions for Installation and Activation.

• Enter your serial key to finish activation. (For the serial key, create a free account by clicking the ‘Start For Free’ button. After creating your account, you’ll find your license key in the dashboard of your Posimyth Store account.)

Step 2: After successful activation, select the Figma design or Frame that you want to convert into WordPress and click on the “Convert to Elementor” button in the pop-up window.

(Make sure you have installed and activated the Elementor Plugin on your WordPress site before the conversion process and also Read all the conditions before converting your Figma design).

Step 3: You can now preview your design by entering your Site’s URL and token key. If you don’t want to, just directly click on the “Convert to Elemetor” button. ( Refer to UiChemy’s tutorial on “What is Live Preview” for guidance on generating your token key and website URL.)

Step 3: Your design will be converted and download the JSON file.

Now Open your WordPress Admin dashboard > Go to Templates > Saved Templates.

Now click on the “Import Templates” button at the top of the page and Upload the JSON file.

Step 4: Congratulations! Your Figma design will now appear in the ‘Saved Templates’ section, where you can open it and do further editing or customization.

Step 5: After completing the customization or edits, view your design on the front end. Make sure all the images and buttons are aligned correctly and working properly. Also, check if the design is responsive on all screen sizes.

---

Option 3: Convert Figma to WordPress Manually (For Developers)

This method is quite technical, hence requires good knowledge of WordPress CMS and little patience, therefore it is best suitable for those who love to code.

Step 1: The first step is to export all the pieces of design like icons and images from Figma. For this, open your Figma Design and choose what you want to export. Now click on the “Export” button and section the right format and resolution.

---

Note: It is highly recommended that, when exporting images, you choose PNG or JPG, and for icons and vectors, choose SVG to maintain quality. Also, be careful when exporting your files, ensuring they are in the correct format, otherwise, it will severely affect your website’s appearance.

---

Step 2: Now we have to create a custom WordPress theme to convert all the Figma designs into a WordPress site. It is because a WordPress theme is what controls how your website appears and functions.

A typical WordPress theme file consists of PHP code, JavaScript files, and CSS stylesheet files.

• Make a new folder in WordPress for your theme in the wp-content/themes directory and name it of your choice. (You can access these files, either through Cpanel, WordPress Editor, or FTP clients) Or check out our dedicated blog on ” How to install WordPress theme?“

If you are a WPOven user you can access the WordPress file by following this tutorial. “New File Manager to easily manage your site’s files and folders.“

Now, add files like index.php, header.php, footer.php, and functions.php to it. (Leave these files blank for now). Also, add the style.css file to set up your theme’s CSS stylesheet in the same folder.

(This particular style.css file is responsible for displaying all the colors, fonts, borders, margins, and other visual elements of the website.)

Now add the following header comment to your style.css file as given below:

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

Here, You have to provide the Theme Name of your custom WordPress theme and Your author. This will help WordPress to identify your custom theme.

Also do not forget to add an image for your WordPress theme, so that it can easily be recognizable in the WordPress directory, just like a YouTube thumbnail.

Preferable size should be 800×600 pixels and should be in PNG format. Name anything your choice and add it to the theme folder.

Step 3: Now we have to add all your exported Figma assets within your customized theme folder.

Tip: If your site is complex it is better to manage all your assets in a specific subfolder, just like we have shown in the picture below:

Step 4: To make your WordPress theme completely functional, you need to add HTML, CSS, and JavaScript to the theme files.

Let us see how you can do this,

First, you have to convert your Figma mockups into code, and for that, you will be required to have a code editor tool.

Begin with setting up an HTML structure with elements like headers, footers, navigation bars, and sections. Add your codes to the PHP files (index.php, header.php, and footer.php).

Now Use, CSS to style your HTML elements. Add your styles in the ‘style.css’ file, setting colors, fonts, sizes, and other design aspects.

• For better styling, you can use:
  • CSS preprocessors like SASS or LESS
  • Frameworks like Bootstrap or Tailwind
  • A WordPress starter theme
• For complex designs, you don’t need to put all your CSS into a single file, but in a more organized way. You can add separate CSS files for different parts in the assets folder so that it becomes easy for you to manage and troubleshoot in the future.

At last, for Javascript, figure out the elements that need to be interactive such as dropdown menus, sliders, etc.)

Consider using jQuery to make it easier tasks like AJAX calls and DOM Manipulation and properly load your CSS (stylesheets) and JavaScript files (scripts) into your WordPress theme using the functions.php file.

Step 5: Now here comes the testing part, after successfully going through all the above steps, save your files and check whether everything works well. But before that, we have to Activate the plugin.

To activate the plugin, go to your WordPress dashboard> Appearance> themes. Your custom theme will start appearing with the image that you uploaded earlier in the theme folder. Click on it to activate and viola your WordPress site is ready for testing.

Here are some of the testing suggestions you can follow:

• Check how your site looks and works in different browsers and screen sizes.
• Use tools to optimize your images for faster loading.
• Implement caching to speed up your site.
• Make a backup of your site before making it live.

---

Summary

Converting from Figma to WordPress is not as easy as it seems, depending on the complexity of the website. The more complex the design, the more complex the process you have to follow. We have tried to cover all the options for all types of users.

Manually doing it might give you more control, but it will consume a lot of your time and effort. However, you can utilize plugins to speed up the conversion process, but you might still need to make certain changes to get better results.

It is completely up to your preference and ease of understanding which method you choose.

---