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 the Elementor option and click on the Convert To Elementor button in the UiChemy panel.
5. You’ll see a popup, tick the checkbox.
6. Then again, click on the Convert To Elementor button.

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.

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

• Preview – In this process, the template will be imported directly to your WordPress website with a single click and you can preview the template.
• Download – In this process, you’ll have to download and upload the template manually.

How to Use Live Preview

1. To use the Preview button you have to generate a token key.
2. Then click on the Settings icon in the Preview button and add your Website URL and Token key.
3. Then click on the Preview button and the template will be imported directly to your WordPress website.
4. Once the template is uploaded, you’ll see an Open button, click on it to see the template preview.

You’ll find the uploaded template in the Elementor Templates section.

The templates uploaded with the Preview button will be in draft mode you’ll have to publish them manually.

How to Use Manual Download

1. Click on the Download button.
2. Then save the template as a JSON file.

We recommend using the Preview option to reduce the manual work.

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.