How to Export Non-Auto Layout or Auto Layout design from Figma to Elementor using UiChemy?

With UiChemy, you can easily export both auto layout and non-auto layout designs from Figma to Elementor.

To get the best results when converting your Figma design to Elementor, we recommend you to use Auto Layout. But don’t worry—this doesn’t mean you have to create your entire design using Auto Layout from the start.

With UiChemy’s Auto Layout conversion feature, you can quickly turn any regular (non-Auto Layout) design into Auto Layout with just one click. It’s fast, easy, and helps make your Elementor conversion much more accurate. 

Note: While this feature does convert non auto layout design to auto layout it is always recommended to follow the design guideline for the best result. 

But if you don’t want to convert your design to auto layout, you can export the non-auto layout to Elementor as well.

Convert Non-Auto layout Design to Auto Layout using UiChemy Plugin

To use the auto layout conversion feature, 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 the Optimize option and click the Optimize button.
4. On the next screen, go to the Optimization Companion tab. 
5. Then, lock the necessary layers from the Lock Multi Layer Media section.
6. After that, in the Convert Non-Auto Layout design to Auto Layout section, set the toggle to Manual.

Note: If you keep the toggle to Auto it will not optimize your design for auto layout. It is ideal if your design is already in auto layout.

7. Then click on the Duplicate & Optimize Design button.

Now it will duplicate your design and convert it into an auto layout without affecting your original design.

Note: Conversion result will depend on the design’s structure and standard grouping.

After that, make sure to use the duplicate design for tagging.

Just in case you didn’t convert the design to auto layout from here, you’ll find an option in the Widget Tags tab.

Click on the No button in the, Is your design optimized? section.

Then click on the Optimize button, and it will duplicate your design and convert it into an auto layout.

Now, if you convert your design to Elementor, it will give a more accurate conversion.

Note: Non-Auto Layout to Auto layout conversion is only available with Figma to Elementor conversion. 

Export Non-Auto Layout Design Directly to Elementor

Now, if you simply want to convert your non-auto layout design to Elementor without converting to auto layout, you can do that too with UiChemy.

To do so, 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 Express. Whether your design is in Auto Layout or not, we strongly recommend locking it using the Optimization Companion before starting the export process. This ensures the design is properly optimized. If your design is already optimized, locked, and widget-tagged, you can directly use the Express method for a faster export process.

Note: Use the Optimize option if you want to use more advanced options like Optimization companion to optimize design, Widget Tags to tag widgets, Responsive manager feature to manage the responsiveness of your design, Global Styles for syncing colors and fonts, etc. We recommend that you optimize your design before exporting for a more accurate result.

4. After that, you can export the design using the Copy to Clipboard or Live Import method. Let’s select the Copy to Clipboard option.

Note: The plugin will automatically recommend an export method based on how you select the design. As a result, you may see either Copy Mode, Live Import, or both options.

5. Then, it will copy the entire design after that, click on the Copy to Clipboard button.
6. 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 the Paste from other site option and press Ctrl + V, and the design will be pasted on your page.

Now your non-auto layout design will be added to Elementor.