How to convert Figma to WordPress

Why we need to convert Figma to WordPress

As far as I know, in addition to the manual development of web programs by software engineers, most of the “WordPress web pages” are currently created using page editors such as Gutenberg / Elementor / Beaver / Divi. I would like to know if you are using the editor. The following experience?

1.“Web designers” prefer to use Figma/Sketch, a design software without design restrictions, to design beautiful and cool “web visuals”. Making web pages from web design via Gutenberg / Elementor / Beaver / Divi is very painful! It takes a lot of time to copy the design draft to make it into a web page. Due to the limitations of the tools, the layout and responsive effects cannot reach the original design.
2. “Web page visual design” requires a lot of communication with customers. Using Figma / Sketch design software can quickly design results so that customers can see the design style early. This will help improve communication efficiency and reduce the cost of changes. However, if you use Gutenberg / Elementor / Beaver / Divi to develop web pages while designing, it means that you have to complete the “page” to communicate with customers, which will take a lot of time on design and changes.

pxCode can help you solve this problem.

Overview

pxCode lets you export your Figma frames and components. With the revolutionary features provided, you hold the complete control to make flexible edits on your design, obtain WordPress Widgets for Gutenberg to export for integration.

Exporting your Figma design to WordPress is more suitable for developing high-fidelity websites. In this article, we will guide you through how to do this, and just how fast it is.

Please visit our WordPrsss demo site and associated figma file first.

Steps on Figma

1. Install pxCode for Figma plugin

On Figma, go on [Community], select [plugin] and search for pxCode to install. Install link.

2. Export Figma design with pxCode plugin

Next, you can move on to your Figma design. When your Figma design is complete, right click on the canvas, on Plugin, click on Figma to HTML by pxCode.

Steps on pxCode

3. Import Figma design file into pxCode

Open pxCode on your Web Browser. Open the Figma Design which you just exported on Create Project, now your design will be imported into pxCode.

4. Structure and Responsive Editing

Through this tutorial video (3m33s), you can also learn the essential yet revolutionary features that pxCode provides.

a. Layout Concept
b. Smart Suggestion (Ctrl+F or CMD+F)
c. Analyze Group for Flexbox
d. Responsive Editing via CSS Media Query

You can now have a fun and simple way to convert your design files into a fully Responsive Webpage, while pxCode exports various codes for you based on your editing. You can get more info from pxCode university.

5. Export WordPress Widget Plugin

Now it’s time to break the limitation! 🎉 On editing canvas, you can edit your design into Responsive Web. After completing the design, you can select Export Code , now you can download WordPress Plugin and WordPress Theme from WordPress Block Editor Gutenberg selection.

Steps on WordPress

6. Install pxCode WordPress Plugin

Step 1: Log into your WordPress backend, on the left menu, click Plugins -> Add New, then click the button “Upload Plugin”. https://<your wordpress domain>/wp-admin/plugin-install.php

Step 2: Select the WordPress plugin ZIP file and click the button Install Now.

Step 3: Activate the plugin after it’s installed.

7. Install pxCode WordPress Theme

Step 1: Log into your WordPress backend, on the left menu, click Plugins -> Add New, then click the button “Upload Theme”. https://<your wordpress domain>/wp-admin/theme-install.php?browse=popular