What is Direct Import?
Export your Figma design directly into WordPress with UiChemy's Direct Import feature.
UiChemy lets you export your Figma designs directly into your WordPress site, eliminating the need for manual downloads or uploads. With Direct Import, your selected design is automatically converted and imported into WordPress, ready to use.
How to Use Direct Import
You have two options:
Option 1: Step by Step Method
- Open the UiChemy plugin and select the top-level frame of your layout.
- Select Step by Step Method, click Start, and connect your site.
- Once connected, click Convert, then select Direct Import and click Import to start converting your design. You'll see a live progress screen.
- 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).
- Click Next, then import your layout(s). Once uploaded, click Open to preview the design directly on your website.
Option 2: Quick Conversion
- Open the UiChemy plugin and select the top-level frame of your layout.
- Select Quick Conversion, click Start, and connect your site.
- Once connected, click Convert, then select Direct Import and click Import. You'll see a live progress screen.
- 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).
- Click Next, then import your layout(s). Once uploaded, click Open to preview the design directly on your website.
For Elementor Template and Nexter Template, you also need to select the template type.
Direct Import exports the entire design layout at once, but the maximum supported height for a single export is 12,000 pixels. If your design exceeds this, split it into two or more parts before importing.
If you only want to export specific inner sections rather than the full layout, use the Copy to Clipboard option instead, it offers more flexibility for individual parts of your design.
This workflow speeds up the design-to-development process, reduces manual effort, and helps you build pages faster, directly from Figma to WordPress in one click.
To get accurate output in Direct Import mode and avoid losing frames or colors, maintain this structure in your Figma design: Page Frame → Section Frame → Content.
You only need to connect UiChemy to your WordPress site once, after that, you can click Preview anytime to see a live preview of any Figma design.
See Direct Import: Add Sites & Import Settings for the full guide on managing sites and import options.
Frequently Asked Questions
What is Direct Import in UiChemy?
It lets you export your Figma designs directly into your WordPress site without manual downloads or uploads, the selected design is automatically converted and made ready to use.
What is the difference between Direct Import and indirect import?
Direct Import exports your entire design layout at once. Indirect import (like Copy to Clipboard) involves more manual steps but offers more flexibility for individual sections.
What should I do if my design exceeds the maximum height for Direct Import?
Split it into two or more parts before importing, the maximum supported height for a single export is 12,000 pixels.
What's the best practice for maintaining structure in Figma for Direct Import?
Keep a Page Frame → Section Frame → Content structure, to avoid losing frames or colors during export.
How do I connect UiChemy to my WordPress site for Direct Import?
You only need to connect once, after that, use the Preview button anytime to see a live preview of any Figma design.