> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# What is Direct Import?

Export your Figma design directly into WordPress with UiChemy's Direct Import feature, manage sites and import settings.


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.

### What You Get

Whichever import path you choose, New or Existing (Pro), Page or Template, the result is the same: a live, fully editable page or template on your connected WordPress site, ready to open and refine in Elementor, no separate upload step required.

### Why Use Direct Import

- **No manual file handling**, your design goes straight from Figma to your live WordPress site, no downloading a template and re-uploading it yourself.
- **Connect once, reuse anytime**, set up your Connection Link a single time, then import to that site whenever you're ready without reconnecting.
- **Manage multiple sites from one place**, add, edit, or delete site connections and pick the right one at import time, useful if you build for several clients or projects.

### How to Use Direct Import

You have two options:

<ExpandableGroup>
  <Expandable title="Option 1: Step by Step Method" default-open="false">
    1. Open the UiChemy plugin and select the top-level frame of your layout.
    2. Select **Step by Step Method**, click **Start**, and connect your site.
    3. Once connected, click **Convert**, then select **Direct Import** and click **Import** to start converting your design. You'll see a live progress screen.
    4. 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).
    5. Click **Next**, then import your layout(s). Once uploaded, click **Open** (labeled with a count of imported designs, for example **Open (02)**) to preview the design directly on your website. The screen's bottom button then changes to **Home**, taking you back to the plugin's start screen.
  </Expandable>

  <Expandable title="Option 2: Quick Conversion" default-open="false">
    1. Open the UiChemy plugin and select the top-level frame of your layout.
    2. Select **Quick Conversion**, click **Start**, and connect your site.
    3. Once connected, click **Convert**, then select **Direct Import** and click **Import**. You'll see a live progress screen.
    4. 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).
    5. Click **Next**, then import your layout(s). Once uploaded, click **Open** (labeled with a count of imported designs, for example **Open (02)**) to preview the design directly on your website. The screen's bottom button then changes to **Home**, taking you back to the plugin's start screen.
  </Expandable>
</ExpandableGroup>

<Callout kind="info">
For Elementor Template and Nexter Template, you also need to select the template type.
</Callout>

<Callout kind="info">
While converting, you'll see a **"Converting... (N%)"** screen with **Network** and **Server** status indicators, so you can tell if a stall is your connection or UiChemy's servers.
</Callout>

<Callout kind="warning">
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.
</Callout>

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.

<Callout kind="tip">
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**.
</Callout>

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.

### Managing Sites

You can add multiple sites to Direct Import, and edit or delete them at any time. Connecting more than one site requires **UiChemy Pro**.

<ExpandableGroup>
  <Expandable title="Add Site" default-open="false">
    1. Open the UiChemy plugin and select the top-level frame of your layout.
    2. Select **Step by Step Method**, click **Start**, and connect your site.
    3. Once connected, click **Convert**, then select **Direct Import** and click **Import**. You'll see a live progress screen.
    4. In the **Select Site** dropdown, click **+ Add Site** under the Import tab.
    5. In the Direct Import popup, paste your **Connection Link** from the WordPress UiChemy plugin, then click **Connect**. You'll see a success or error message depending on whether the details are correct.
    6. Your website URL now appears in the Select Site dropdown.

    <Callout kind="info">
    You can add multiple sites this way, when importing, just select the appropriate site from the Select Site dropdown.
    </Callout>
  </Expandable>

  <Expandable title="Edit Site" default-open="false">
    1. Repeat steps 1–4 from Add Site to get to the Direct Import screen.
    2. In the Select Site dropdown, click **Edit** beside the website URL you want to update.
    3. In the Direct Import popup, paste the updated Connection Link, then click **Connect**.
    4. A green dot beside the website URL confirms a successful update.
  </Expandable>

  <Expandable title="Delete Site" default-open="false">
    1. Repeat steps 1–4 from Add Site to get to the Direct Import screen.
    2. In the Select Site dropdown, click **Delete** beside the website URL you want to remove.
  </Expandable>
</ExpandableGroup>

### Import Settings

Configure how you want to import the design to your site. Each selected page gets its own card, configure them one at a time, or set up the first one and click **Apply to below Fields** to copy those same settings to the rest.

### New

Import your design as a new template or page in WordPress.

<ExpandableGroup>
  <Expandable title="Page" default-open="false">
    1. From the Direct Import screen, select the appropriate site from the Select Site dropdown.
    2. Click the dropdown under **Import Settings** and select **New** from the Select Method section.
    3. From the **Export To** dropdown, select **Page**.
    4. A green tick appears beside your design once you're ready to import, importing adds the design as a new WordPress page.
  </Expandable>

  <Expandable title="Elementor Template" default-open="false">
    1. Select the appropriate site, then **New** under Import Settings.
    2. From **Export To**, select **Elementor Template**.
    3. Select the template type from the dropdown that appears.

    <Callout kind="warning">
    Except for Standard Template, all other Elementor template types require Elementor Pro to be installed on your website.
    </Callout>

    4. Import to add the design as a new Elementor template.
  </Expandable>

  <Expandable title="Nexter Template" default-open="false">
    <Callout kind="warning">
    Nexter Templates requires **UiChemy Pro**.
    </Callout>

    1. Make sure the Nexter Extension plugin is installed.
    2. Select the appropriate site, then **New** under Import Settings.
    3. From **Export To**, select **Nexter Template**, and choose the template type from the dropdown that appears.
    4. Import to add the design as a new Nexter template.
  </Expandable>
</ExpandableGroup>

### Existing

<Callout kind="warning">
Importing into an **Existing** page or template requires **UiChemy Pro**. On Free, the Existing option is locked, only **New** is available.
</Callout>

Replace or update an existing template or page with your design.

<ExpandableGroup>
  <Expandable title="Replace" default-open="false">
    1. Select the appropriate site, then **Existing** under Import Settings.
    2. From **Export To**, select the appropriate option (Page, Elementor Template, or Nexter Template).
    3. Select **Replace** from the Select Method section.
    4. From the **Replace** dropdown, select the page or template you want to replace.

    <Callout kind="info">
    The Replace dropdown can list pages and templates of different types together, double-check you're picking the right one before importing.
    </Callout>

    5. Import to replace the existing page or template.
  </Expandable>

  <Expandable title="Add-On" default-open="false">
    1. Select the appropriate site, then **Existing** under Import Settings.
    2. From **Export To**, select the appropriate option (Page, Elementor Template, or Nexter Template).
    3. Select **Add-On** from the Select Method section.
    4. From the **Add-On To** dropdown, select the page or template you want to update.
    5. Import to add your design to the existing page or template.
  </Expandable>
</ExpandableGroup>

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="What is Direct Import in UiChemy?" default-open="false">
    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.
  </Expandable>

  <Expandable title="What is the difference between Direct Import and indirect import?" default-open="false">
    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.
  </Expandable>

  <Expandable title="What should I do if my design exceeds the maximum height for Direct Import?" default-open="false">
    Split it into two or more parts before importing, the maximum supported height for a single export is 12,000 pixels.
  </Expandable>

  <Expandable title="What should I do if my site isn't connecting during Direct Import?" default-open="false">
    Double-check the Connection Link in the Direct Import popup, an incorrect or outdated link will prevent a successful connection, and you'll see an error message if something's wrong.
  </Expandable>

  <Expandable title="How do I update the Connection Link for an existing site?" default-open="false">
    Go to the Direct Import screen, select the site from the dropdown, click **Edit**, paste the updated Connection Link, and click **Connect**. A green dot confirms the update worked.
  </Expandable>

  <Expandable title="What happens if I delete a site from UiChemy?" default-open="false">
    It's removed from your list of connected sites, and you won't be able to import designs to it anymore. This action is permanent, so make sure you no longer need the connection before deleting.
  </Expandable>
</ExpandableGroup>