Figma Design Checklist to Make it UiChemy-Friendly

Table of Contents

Here are a few essential things to check when creating a Figma design for accurate conversion to a WordPress site with UiChemy. Please review the following document and design guides to avoid common issues during the conversion process

1. Auto-Layout

Auto Layout excels in creating responsive designs that adapt to different screen sizes and content variations. Auto-Layout should be used for every Frame to benefit from the responsive properties of using CSS FlexBox.

Main Frame width – FIXED
Inner Section width – FILL

Doc Guides –

1.1 Design guide in Figma.
1.2 Ideal Way to Design in Figma With Auto Layout for Pixel Perfect Conversion
1.2 Auto Layout vs Absolute Objects in Figma

2. No Elements Outside the MainFrame > Container

Any elements should not be outside any container/ section within the Top-Level Frame (Main Frame) as they will be ignored.

Check the example in Figma

3. No Negative Gapping

There shouldn’t be any negative gapping in Auto Layout, as HTML doesn’t support Negative flex-gap. Check the example in Figma.

4. Locking 

You can lock a group/frame of multiple elements and export it as a single image while importing it into Elementor. This will help you reduce the number of Images/Vectors on the page. If you are using multiple elements to create a single object in your Figma layout, there is a need to combine those elements and export them as a single image.

Check this Example in the Figma

Doc guide – Combine Multiple Elements in Figma and Export as an Image

5. Masking

If you are using Masking for creative Images, you can Lock the Masking Group/Frame & Import them as a Single Image.

Check the example in Figma.

6. Icons Misalignment

If your Icons are importing misaligned Off-Centered, follow the doc to fix that.

Doc guide – Why are Icons Misaligned or Off-Centered?

7. Rotation Problem – Flatten

If rotating some Vector causes some Issues, you can fix that by FLATTEN in Figma or after import in Elementor.

Check the example in Figma.

8. Overflowing Frames – Clip Content On/Off

Use the Clip Content to hide/show the overflowing content.

Check the example in Figma.

9. Font

Make sure that the FONT used in the design is installed in the system.

Check the example in Figma.

 10. After the Conversion: 

10.1.  If Icons are not aligned with the text:

Navigate to Theme Customize >Typography > General > Body > Line Height – Set to 1px / 0px

Check this: 

A6fJXeJNIelns9qFucCJ2FN0141gSUjbVbn1jz5 8eLfExs9 JXgujCqRk0Shxowc2wmtL5a1x ZZCruiFTdHg8OE2RPwu313 5NHAZZuYAF7U0QW9MiD0bGZm1fCcCHA6I L9UqM33RSAH alj1Vw4

10.1.  If Icons are not aligned with the text:

Navigate to Edit with Elementor > Left side Hamburger Menu > Site Settings > Layouts > Padding & Gap  (Default Gap 20px From Elementor)

xNYuSZpqVh1J63On3jMFNIOSxclecg8z9PBIhhlfJ9tQFlf NTmMkRTioezRiYXD4ng QbTz3i NX8NfmcSToTN9BWi4fBxxZM b4hkh0kz uLS8dZPTI4 FbPOz ofWfaoJsVlczejXfAgnK4d6tvk

This checklist should avoid all major issues. However, please note that UiChemy is designed to assist you in converting your Figma designs into functional websites. While it cannot guarantee 100% conversion accuracy, with proper design practices, you can expect conversions to be between 85% to 99% accurate.

If you need further assistance or encounter any issues, you can reach out to the support team at Helpdesk – The support team will help you in every possible way.