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?
- “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.
- “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.
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: pxCode Figma plugin
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].
You can decide the [Asset Scale], select [Download All] or [Download Selected] to export your Figma
Design File.
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 use the WordPress Block Editor Gutenberg code for further integration.
Steps on WordPress Integration
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
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 find the exported widget in the left inserter of block editor . Now you can add widgets to your page!
You can add the pxCode block to your page with block editor.
9. Add a Reserved Block in your pxCode Widget
If you want to add other widgets into the pxCode widget, you can add the Reserved Block on the group in pxCode.
Step 1: Select a 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!