How to convert Figma to WordPress

Figma/Sketch to WordPress

Why we need to convert Figma to WordPress

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

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

Install Figma Plugin

2. Export Figma design with pxCode plugin

Export Figma to pxCode

Steps on pxCode

3. Import Figma design file into pxCode

Import design to pxCode

4. Structure and Responsive Editing

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

Download WordPress Plugin and Theme

Steps on WordPress

6. Install pxCode WordPress Plugin

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 2: Select the WordPress Theme ZIP file and click the button Install Now.

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

8. Get the pxCode Block in Page Block Editor

🎉🎉🎉 You can add the pxCode block to your page with block editor. 🎉🎉🎉

9. Add a Reserved Block in your pxCode Widget

Step 1: Select group and click Block->Reserved Block in context menu.

Step 2: Then sync your Reserved Block settings to the widget from WordPress.

Step 3: Reserved blocks will become placeholders in the WordPress block editor. You can use placeholder to add any widget you want.

Enjoy Figma + pxCode + WordPress!
You can create your own WordPress Plugin via pxCode.

--

--

From Design to Code. Your fastest choice for Responsive Webpage. https://www.pxcode.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store