Step by Step Introduction of Figma to Elementor Using UiChemy

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

Recommended Server Requirement

Make sure you have the following server settings to smoothly import the template in Elementor.

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

You can check the following guides to make the changes yourself or you can contact your hosting provider for the same. 

Increase PHP time limit (max_execution_time).

Increase PHP memory limit and upload limit.

Required Elementor Settings

Make sure you have the free Elementor plugin (3.11.5 or above) installed and activated.

Before importing the template, make sure the Elementor Flexbox container is enabled.

To do so from the Dashboard, go to Elementor > Settings > Features, then select Active from the Flexbox Container dropdown and save the changes.

Also, make sure the SVG file upload option is enabled from the Elementor settings.

To do so from the Dashboard, go to Elementor > Settings >Advanced.

On that page, select Enable from the Enable Unfiltered File Uploads dropdown and click on the Save Changes button.

Export Design from Figma

To export your Figma design using UiChemy, follow the steps – 

1. Make sure to create the layout in Figma following the UiChemy design guidelines.
2. Then go to Resources > Plugins and search for UiChemy and click on it. It will open the UiChemy plugin interface and log in to your account.

3. Now select the top level frame of your layout that you want to export or you can click on the arrow icon in the UiChemy window it will automatically select the top level frame. Make sure to select the top level frame otherwise, the export option won’t be activated.
4. Then select either the Optimize & Convert or Express Convert option and click the Optimize & Convert or Express Convert button as per your selection.
5. Click on the Convert button, on the next screen.

Note: From the Settings icon beside the Convert To Elementor button you can export the template without images or you can export with scaled images.

6. On the next screen, you’ll see two buttons –

• Download JSON – In this process, you’ll have to download and upload the template manually.
• Live Import – In this process, the template will be imported directly to your WordPress website and you can preview the template.

Note: In the Figma to Gutenberg conversion, you’ll see a Copy Code button instead of the Download JSON button.

How to Use Live Import

To make the Live Import work, make sure you’ve installed and activated the UiChemy plugin on your WordPress website.

1. Click on the Live Import button.
2. In the Select Site dropdown, click on the + Add Site button.
3. Then you’ll see a Live Import popup here, you have to add the Site URL and Security Token.
4. Once you’ve added the URL and Token, click on the Connect button, if everything is correct, you’ll see a success message otherwise, you’ll see an error message if anything is wrong.
5. Then you’ll see your website URL is selected in the Select Site dropdown.
6. Once the dot beside the website URL turns green, click on the dropdown under the Import Settings.
7. Then select New from the Select Method section. You can also update an existing template or page.
8. After that from the Export To dropdown, you have to select the template type. You can import as a Page, Elementor Template or Nexter Template.
9. Then click on the Next button.
10. On the next screen, you can import individual layouts or can import all layouts at once by clicking the Import All button. It will import the layout directly to your website.
11. Once the layout is uploaded, you can preview the layout by clicking the button beside the layout.

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

How to Use Manual Download (For Elementor and Bricks)

1. Click on the Download JSON button.
2. On the next screen, you can select the pages you want to download and then click on the Download JSON button. You can also download individual pages by clicking the download icon beside each page.
3. Then save the template as a JSON file.

We recommend using the Live Import option to reduce the manual work.

Copy Code Method (For Gutenberg)

When you are using the Figma to Gutenberg plugin, you’ll see the Copy Code option to import the template on your WordPress website. For this to work, make sure you’ve installed and activated the UiChemy and The Plus Addons for Block Editor plugins on your WordPress website, then follow the steps –

1. Click on the Copy Code button.
2. On the next screen, click on the copy icon beside the page.
3. Now go to your WordPress dashboard and add a new page.
4. Click on the Plus Paste button (purple color) at the top.
5. Now a popup will open, press Ctrl+V and the template will be imported on your page.

Import Template in Elementor

To import your exported template in Elementor, follow the steps –

1. From the WordPress Dashboard and go to Templates and click on the Import Templates button.
2. Click on the Browse button and select your exported template, then click on the Import Now button and your template will be imported. Depending on the complexity of your design and file size it may take some time to import the template.

3. You can click on View to check the template.
4. Open the template in Elementor by clicking on Edit with Elementor.

5. To make sure the layout shows perfectly, from the Elementor editor panel go to Settings and set the Page Layout to Elementor Full Width or Elementor Canvas (only if you want to create a single page website with header, footer etc.)

Note: If your layout contains a common sidebar, then you can keep the page layout to default and add the sidebar in a separate template.

Note: If your layout contains common sections like header, footer etc. you should create separate templates like header, footer etc. and add them in their respective templates from your current template. For creating these templates, you can use the free Nexter theme.

Use the Template

To use the template, follow the steps – 

1. Add a new page, after saving the page, click on Edit with Elementor.
2. On the next screen, click on the Folder icon (Add Template).
3. In the popup, go to the My Template tab, go to your template, and click on Insert to add the template on the page.
4. When prompted to apply the settings from the template to the page, click on Apply, this way, the page will have the same page settings as the template.

For any issue, do check our troubleshooting documentation.