How to Export Figma Design to Elementor Using UiChemy?

Are you looking to convert your Figma design into an editable Elementor page or template? The process can be time-consuming, but UiChemy simplifies it, saving you valuable time and boosting your efficiency and workflow.

Export Design from Figma

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

1. In Figma, 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.
2. Then select the frame you want to export.
3. Then select either the Optimize or Express option and click the Optimize or Convert button as per your selection. Let’s select Optimize.

Note: If your design is optimized, then use the Express mode, but if it is not, then use the Optimize mode it will automatically adjust your layout for best conversion.

4. On the next screen, click on the Optimization Companion tab.
5. If your design requires locking certain layers, they will appear in the list. For better conversion, we recommend locking these layers. You can click the Fix button to lock the recommended frame. However, if you need to tag specific elements, avoid locking them. Instead, review the list manually and lock only the necessary layers.

Note: If you click on the Ignore All button, it will not lock the layers but you might see some design issues in the converted layout.

From the upcoming update, we are even removing the manual optimization step.

6. Then, from the Convert Non-Autolayout design to Autolayout tab, you can optimize the design using Manual or Auto mode. The Manual mode will allow you to duplicate the design and use manual tagging and the Auto mode will automatically optimize the design.
7. Then click on the Save & Go Back button.
8. After that, from the Widget Tag tab, you can tag elements to specific widgets.

Note: If your design is not optimized, you can optimize it from here as well by clicking the No button from the Is your design optimized? section. 

9. From the Responsive Manager tab, you can manage the responsive layout.
10. Then, from the Conversion Settings tab, you can adjust some conversion settings, like exporting without images and more.
11. After that, from the Global Styles tab, you can set the global style of Elementor as per your design. From here, you can set global colors, typography & boxed-width for containers for a consistent look across your site. The width of the sections will be set according to the global boxed width wherever applicable. Sections that match the global boxed width will automatically have their width set to boxed, while sections that don’t match will have their width set to full-width.

Note: To use the Global Style options, your site must be added to UiChemy.

12. After that, click on the Convert button.
13. This is an auto-recommended process; if you’ve selected the top-level frame of your Figma design, then you’ll see two options – 

• Copy to Clipboard – To simply copy and paste the design in Elementor.
• Live Import – To export the design using the live import feature.

Otherwise, it will automatically go to the Copy to Clipboard option. Let’s select the Copy to Clipboard option.

14. Then, it will copy the entire design after that, click on the Copy to Clipboard button.
15. After that, open the page or template where you want to add the design in Elementor editor and right-click on the page, then select Paste from other site option and press Ctrl + V, and the design will be pasted on your page.

Now your design will be added to Elementor.

Important Considerations for Export

If you have a complete page layout, we recommend using the Live Import method.

If you are trying to export smaller sections or one of the sections from the entire design, then you can export it using Copy Mode.

If you are trying to export multiple pages, then you will only have the Live Import option.