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:
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)
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 – https://store.posimyth.com/helpdesk/ The support team will help you in every possible way.