Import & ConversionFirst Conversion

Step by Step Introduction of Figma to Elementor Using UiChemy

A complete walkthrough of exporting a Figma design as an Elementor template with UiChemy.

Figma has become a go-to design tool for many designers, offering a collaborative and versatile platform. With UiChemy, you can take your Figma designs and export them as an Elementor template to use directly in the Elementor website builder.

Make sure your server has these settings for a smooth template import in Elementor:

  • PHP Time Limit (max_execution_time): 300s
  • PHP Memory Limit: 256M
  • PHP Upload Limit: >100M
  • max_allowed_packet for MySQL: >5MB

You can make these changes yourself, or contact your hosting provider to increase the PHP time limit, memory limit, and upload limit.

Required Elementor Settings

  • Make sure the free Elementor plugin (3.11.5 or above) is installed and activated.
  • Before importing, enable the Elementor Flexbox container: go to Elementor → Settings → Features, select Active from the Flexbox Container dropdown, and save.

Enabling the Flexbox Container feature in Elementor settings

  • Make sure SVG file upload is enabled: go to Elementor → Settings → Advanced, select Enable from the Enable Unfiltered File Uploads dropdown, and click Save Changes.

Enabling unfiltered SVG file uploads in Elementor settings

Export Design from Figma

  1. Go to Resources → Plugins, search for UiChemy, and click on it, this opens the UiChemy plugin interface. Log in to your account.
  2. Select the section of the layout you want to export, select the top frame to export the entire layout, or a specific section to export just that section.
  3. Choose Step by Step Method or Quick Conversion. See How to Export Figma Design to Elementor for the full step-by-step breakdown.
  4. Click Convert on the final screen.

Based on the frame you selected, UiChemy automatically decides the export method, shown on its own Export Method screen. If you selected the top frame, you'll see two options:

  • Copy to Clipboard, directly copy and paste the design into Elementor
  • Direct Import, export the design directly to your WordPress site, or download and upload the template manually

If you selected a specific section instead, only Copy to Clipboard is available.

Pick an option and click Import to continue. A "Converting..." progress screen shows while your design is processed.

If your Credits balance is too low for the conversion, you'll see a "You're out of credits" message here instead. See What happens if I run out of Credits mid-conversion?

How to Use Copy to Clipboard

  1. Click Copy to Clipboard, once the design is copied, you'll see a green tick.
  2. Open the page or template where you want to paste the design, in the Elementor editor.
  3. Right-click on the dotted-border section, select Paste from other site, then press Ctrl + V to paste. The design is added to your editor.

How to Use Direct Import

Make sure you've installed and activated the UiChemy plugin on your WordPress site.

  1. On the Export Method screen, choose the Direct Import tab.
  2. In the Select Site dropdown, click + Add Site under the Import tab.
  3. In the Direct Import popup, paste your Connection Link, then click Connect. You'll see a success or error message depending on whether the details are correct.
  4. Once connected, your website URL appears in the Select Site dropdown. When the dot beside it turns green, open the layout under Import Settings.
  5. Choose New to create a new page or template, or Existing to update one you already have. Choosing Existing reveals two more options: Replace an existing page or template entirely, or Add-On to it, plus a Replace To dropdown to pick which one.
  6. From the Export To dropdown, select the template type, Page, Elementor Templates, or Nexter Templates. Nexter Templates shows Not Installed if the Nexter theme isn't active on your site.
  7. Click Next.
  8. You'll see a thumbnail of your layout. Click Import to start, an "Importing" progress indicator shows while it uploads.
  9. Once uploaded, preview a layout by clicking the button beside it.

For Elementor Templates and Nexter Templates, you also need to select the template type.

How to Use Manual Download (For Elementor and Bricks)

  1. On the Export Method screen, choose the Download JSON tab.
  2. You'll see a thumbnail of your layout with a download icon. Click it to download that layout individually, or click Download to save it as a JSON file.

We recommend using Direct Import instead, to reduce manual work.

Copy Code Method (For Gutenberg)

When using the Figma to Gutenberg plugin, you'll see a Copy Code option instead. Make sure you've installed and activated both the UiChemy and The Plus Addons for Block Editor plugins, then:

  1. Click Copy Code.
  2. On the next screen, click the copy icon beside the page.
  3. Go to your WordPress dashboard and add a new page.
  4. Click the purple Plus Paste button at the top.
  5. In the popup that opens, press Ctrl+V, the template is imported onto your page.

Import Template in Elementor

  1. From the WordPress Dashboard, go to Templates and click Import Templates.
  2. Click Browse, select your exported template, then click Import Now. Depending on your design's complexity and file size, this may take a moment.
  3. Click View to check the imported template.

Importing an exported template from the WordPress Templates screen

  1. Open the template by clicking Edit with Elementor.

Opening a template with Edit with Elementor

  1. To make sure the layout displays correctly, go to Settings in the Elementor editor panel and set Page Layout to Elementor Full Width or Elementor Canvas (only if you're building a single-page site with header, footer, etc.).

Setting the Page Layout option in the Elementor editor panel

If your layout contains a common sidebar, keep the page layout at default and add the sidebar as a separate template. If your layout contains common sections like a header or footer, create separate templates for them (e.g. using the free Nexter theme) and reference them from your current template.

Use the Template

  1. Add a new page, save it, then click Edit with Elementor.
  2. Click the folder icon (Add Template).
  3. In the popup, go to the My Template tab, find your template, and click Insert to add it to the page.

Inserting a saved template onto a page from the My Template tab

  1. When prompted to apply the template's settings to the page, click Apply, the page now shares the same page settings as the template.

For any issue, check the troubleshooting documentation.

Frequently Asked Questions

What should I do if the Direct Import fails?

Check that the UiChemy plugin is installed and activated on your WordPress site, and that your Connection Link is entered correctly in the Direct Import popup. A common cause is pasting an old or incorrect link.

Can I use UiChemy to export designs from tools other than Figma?

No, UiChemy only converts designs from Figma.

What are the recommended server requirements for using UiChemy?

A PHP Time Limit of 300 seconds, PHP Memory Limit of 256MB, PHP Upload Limit over 100MB, and MySQL's max_allowed_packet over 5MB.

What is the best method to import a Figma design into Elementor?

Direct Import, it reduces manual work by uploading your design directly to your WordPress site.

Was this page helpful?