How to Export Non-Auto Layout or Auto Layout design from Figma to Elementor using UiChemy?
Export both Auto Layout and non-Auto Layout Figma designs to Elementor with UiChemy.
With UiChemy, you can export both Auto Layout and non-Auto Layout designs from Figma to Elementor.
For the best results, we recommend using Auto Layout, but that doesn't mean you have to build your entire design with Auto Layout from the start. UiChemy's Auto Layout conversion feature lets you turn any regular (non-Auto Layout) design into Auto Layout with a single click, making your Elementor conversion more accurate.
While this feature converts non-Auto Layout designs to Auto Layout, it's still recommended to follow the design guidelines for the best result.
If you'd rather not convert your design to Auto Layout at all, you can export the non-Auto Layout design to Elementor directly instead.
Convert Non-Auto Layout Design to Auto Layout Using UiChemy
- In Figma, go to Resources → Plugins, search for UiChemy, and click on it. This opens the UiChemy plugin, log in to your account.
- Select the frame you want to export.
- Select Step by Step Method and click Start.
- On Step 2: Lock Media, lock the necessary layers, then continue to Step 4: Manage Auto Layout.
- On the Manage Auto Layout step, choose Convert to Auto Layout.
Choosing It's already in Auto Layout skips this conversion entirely, only pick that option if your design is already using Auto Layout.
- Click Duplicate & Optimize Design, this duplicates your design and converts it into Auto Layout without affecting the original.
The conversion result depends on your design's structure and standard grouping.
- Use the duplicate design for tagging.
More details on switching to Auto Layout conversion later in the flow, if you skip it at the Manage Auto Layout step, will be added once this is fully documented.
Converting to Auto Layout before exporting gives a more accurate conversion in Elementor.
Non-Auto Layout to Auto Layout conversion is only available for Figma to Elementor conversion.
Export Non-Auto Layout Design Directly to Elementor
If you'd rather convert your non-Auto Layout design to Elementor without converting it to Auto Layout, you can do that too:
- In Figma, go to Resources → Plugins, search for UiChemy, and click on it. Log in to your account.
- Select the frame you want to export.
- Choose Step by Step Method or Quick Conversion.
Whether your design is in Auto Layout or not, we strongly recommend locking it at the Lock Media step before exporting. If your design is already optimized, locked, and tagged, Quick Conversion gives you a faster export.
Choose Step by Step Method if you want access to more advanced options, Lock Media, Widget Tagging Mode, Responsive, Global Styles, and Settings. We recommend using Step by Step Method for a more accurate result.
- Export the design using Copy to Clipboard or Direct Import.
The plugin automatically recommends an export method based on how you selected the design, you may see Copy to Clipboard, Direct Import, or both.
- Click Copy to Clipboard to copy the entire design.
- Open the page or template in the Elementor editor where you want to add the design, right-click, select Paste from other site, and press Ctrl + V. Your non-Auto Layout design is added to Elementor.
Frequently Asked Questions
What should I do if my design doesn't convert properly to Auto Layout?
Check the structure and grouping of your layers, conversion accuracy depends heavily on how well your design is organized. Using Step by Step Method before conversion can help; if issues persist, adjust your design according to the design guidelines.
What is the best practice for exporting designs from Figma to Elementor?
Use Auto Layout where possible, UiChemy can convert non-Auto Layout designs to Auto Layout with one click, which improves conversion accuracy. Always lock your layers at the Lock Media step before exporting.
What happens if I use Quick Conversion instead of Step by Step Method?
You may get a less accurate conversion, and your design's responsiveness in Elementor could be affected, Step by Step Method unlocks advanced options like widget tagging mode, responsive, and global styles that help maintain design integrity.