What is Direct Import?

UiChemy allows you to seamlessly export your Figma designs directly into your WordPress site, eliminating the need for manual downloads or uploads. With the Direct Import feature, your selected design is automatically converted and imported into WordPress, ready to use.

How to Use Direct Import?

To do this, we have two options here,

Option 1: Step by Step Method

Now, to use the UiChemy Direct Import with this method, follow the steps below –

1. Open the UiChemy plugin and select the top-level frame of your layout.  
2. Select the Step by Step Method, click the Start button, and connect your site.
3. Once successfully connected, click the Convert button, then select Direct Import and click Import to begin converting your design.
4. You’ll see a live progress screen as the design is being converted.
5. Once redirected to the Export Method tab, click the dropdown beside your site (green dot). Under Import Settings, choose New or Existing, and select a template type (Page, Elementor Templates, or Nexter Templates).
6. Click Next, then Import your layout(s). Once uploaded, click Open to preview the design directly on your website.

Option 2: Express Conversion

In the Express Conversion method, you can use the UiChemy Direct Import by following these steps – 

1. Open the UiChemy plugin and select the top-level frame of your layout.  
2. Select the Express Conversion, click the Start button, and connect your site.
3. Once successfully connected, click the Convert button, then select Direct Import and click Import to begin converting your design.
4. You’ll see a live progress screen as the design is being converted.
5. Once redirected to the Export Method tab, click the dropdown beside your site (green dot). Under Import Settings, choose New or Existing, and select a template type (Page, Elementor, or Nexter).
6. Click Next, then Import your layout(s). Once uploaded, click Open to preview the design directly on your website.

Note: For Elementor Template and Nexter Template, you have to select the template type as well.

Direct Import is designed to export the entire design layout at once. However, the maximum supported height for a single design export is 12,000 pixels. If your design exceeds this height, you’ll need to split it into two or more parts before importing.

If you want to export only specific inner sections from the design instead of the full layout, you can use the Copy to Clipboard option. This offers more flexibility when working with individual parts of your design.

This simplified workflow speeds up the design to development process, reduces manual effort, and helps you build pages faster – directly from Figma to WordPress in just one click.

Note: To obtain accurate output in Direct Import mode and avoid losing any frames or colors, maintain the following structure in your Figma design:

Page Frame → Section Frame → Content

You have to make the connection between UiChemy and your WordPress website just once, then you can click on the Preview button to see the live preview of any Figma design.