Figma Design Checklist to Make it UiChemy-Friendly

Run through this checklist before exporting your Figma design with UiChemy. Following it helps you avoid the most common conversion issues.

1. Auto Layout

Auto Layout excels at creating responsive designs that adapt to different screen sizes and content variations. Use Auto Layout for every frame to get the benefit of CSS Flexbox's responsive properties.

• Main frame width, Fixed
• Inner section width, Fill

2. No Elements Outside the Main Frame / Container

Any element placed outside a container or section within the top-level (main) frame will be ignored during conversion.

3. No Negative Gapping

There shouldn't be any negative gapping in Auto Layout, as HTML doesn't support negative flex-gap.

4. Locking

You can lock a group/frame of multiple elements and export it as a single image when importing into Elementor. This reduces the number of images/vectors on the page. If you're using multiple elements to create a single object, combine those elements and export them as one image.

5. Masking

If you're using masking for creative images, lock the masking group/frame so it imports as a single image.

6. Icons Misalignment

If your icons import misaligned or off-centered, there's a dedicated troubleshooting guide for fixing that.

7. Rotation Problem: Flatten

If rotating a vector causes issues, fix it by flattening it in Figma, or after import, in Elementor.

8. Overflowing Frames: Clip Content

Use Clip Content to show or hide content that overflows the frame boundaries.

9. Font

Make sure the font used in your design is installed on your system.

10. After the Conversion

If icons aren't aligned with the text: go to Theme Customize → Typography → General → Body → Line Height and set it to 1px / 0px.

Alternative fix: go to Edit with Elementor → Site Settings (hamburger menu) → Layouts → Padding & Gap (Elementor's default gap is 20px).