How to Split a Large Figma Layout for an Optimal Conversion in UiChemy?

If your Figma design exceeds 12,000 pixels in height, UiChemy won’t be able to export it as a single file.

To ensure a smooth and accurate conversion, you’ll need to split your design into smaller sections. This approach not only makes it compatible with UiChemy but also helps maintain the quality and performance of your exported files. 

To do this, follow the steps – 

1. Click on the section/layout you want to split from the design.
2. Then press the Alt key, and when you see the double arrow (black and white), drag the section out to duplicate it.
3. Open the UiChemy plugin.
4. Then select the Optimize option and click the Optimize button.
5. On the next screen, go to the Optimization Companion tab. 
6. Then lock the necessary layers from the Lock Multi Layer Media section by clicking the Fix button individually or clicking the Fix All button to lock all at once.
7. 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.

8. 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.

9. After that, tag your design elements of the duplicate design from the Widget Tags tab.

Note: Just in case you didn’t convert the design to auto layout from the Optimization Companion tab, 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. 

10. After that, tag your design elements of the duplicate design from the Widget Tags tab.

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.

Similarly, you can split the rest of your design and export to Elementor.