--- title: "Figma Design Checklist to Make it UiChemy-Friendly" url: https://uichemy.com/docs/figma-design-checklist-to-make-it-uichemy-friendly/ date: 2024-02-29 modified: 2026-04-14 author: "Sagar Patel" description: "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..." image: https://uichemy.com/wp-content/uploads/2024/07/Things-to-Avoid-in-Figma-Design-for-Optimum-Conversion-1024x536.jpg word_count: 503 --- # Figma Design Checklist to Make it UiChemy-Friendly ## Key Takeaways - Auto Layout creates responsive designs that adapt to different screen sizes using CSS FlexBox. - Elements must remain within the Main Frame container to avoid being ignored during conversion. - UiChemy achieves conversion accuracy between 85% to 99% with proper design practices. 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. ](https://www.figma.com/file/KaKIakOIfbwGangSQknMGn/UIChemy-Educational-%7C-Community-File-(Community)?type=design&node-id=0%3A1&mode=design&t=e67AjMQW3zTXLUNi-1)1.2 [Ideal Way to Design in Figma With Auto Layout for Pixel Perfect Conversion](https://uichemy.com/docs/ideal-way-to-design-in-figma-with-auto-layout-for-pixel-perfect-conversion/) ## 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](https://www.figma.com/file/KaKIakOIfbwGangSQknMGn/UIChemy-Educational-%7C-Community-File-(Community)?type=design&node-id=127-5351&mode=design&t=vtnDs3o5B3bRzz4U-11).  ## 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](https://www.figma.com/file/KaKIakOIfbwGangSQknMGn/UIChemy-Educational-%7C-Community-File-(Community)?type=design&node-id=130-7074&mode=design&t=vtnDs3o5B3bRzz4U-11). ## 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, you need to combine those elements and export them as a single image. Check this [Example in the Figma](https://www.figma.com/file/KaKIakOIfbwGangSQknMGn/UIChemy-Educational-%7C-Community-File-(Community)?type=design&node-id=145-19239&mode=design&t=vtnDs3o5B3bRzz4U-11) Doc guide - [Combine Multiple Elements in Figma and Export as an Image](https://uichemy.com/docs/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](https://www.figma.com/file/KaKIakOIfbwGangSQknMGn/UIChemy-Educational-%7C-Community-File-(Community)?type=design&node-id=125-5240&mode=design&t=vtnDs3o5B3bRzz4U-11). ## 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?](https://uichemy.com/docs/why-are-icons-misaligned-off-centered/) ## 7. Rotation Problem - Flatten If rotating some Vector causes some Issues, you can fix that by FLATTENING in Figma or after import in Elementor. Check the [example in Figma](https://www.figma.com/file/KaKIakOIfbwGangSQknMGn/UIChemy-Educational-%7C-Community-File-(Community)?type=design&node-id=675-9948&mode=design&t=vtnDs3o5B3bRzz4U-11). ## 8. Overflowing Frames - Clip Content On/Off Use the Clip Content to hide/show the overflowing content. Check the [example in Figma](https://www.figma.com/file/KaKIakOIfbwGangSQknMGn/UIChemy-Educational-%7C-Community-File-(Community)?type=design&node-id=675-9956&mode=design&t=vtnDs3o5B3bRzz4U-11). ## 9. Font Make sure that the FONT used in the design is installed in the system. Check the [example in Figma](https://www.figma.com/file/KaKIakOIfbwGangSQknMGn/UIChemy-Educational-%7C-Community-File-(Community)?type=design&node-id=639-17704&mode=design&t=vtnDs3o5B3bRzz4U-11). ##  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:  ![](https://lh7-us.googleusercontent.com/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) ![](https://lh7-us.googleusercontent.com/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 - [https://store.posimyth.com/helpdesk/](https://store.posimyth.com/helpdesk/). The support team will help you in every possible way. ## Frequently Asked Questions **Q: What are common mistakes when using Auto Layout in Figma for UiChemy?** A: A frequent mistake is not using Auto Layout for every Frame, which can hinder responsive design. Auto Layout is crucial for adapting to different screen sizes and content variations. Ensure your Main Frame width is fixed and Inner Section width is set to fill. This practice enhances the conversion accuracy when using the UiChemy Figma Plugin. **Q: How can I avoid icons misalignment when converting Figma designs with UiChemy?** A: Icons often misalign due to improper grouping or spacing in Figma. To fix this, ensure that icons are properly centered and grouped before export. If misalignment occurs post-conversion, refer to the [Why are Icons Misaligned or Off-Centered?](https://uichemy.com/docs/why-are-icons-misaligned-off-centered/) guide for troubleshooting tips. Proper alignment is essential for a polished look in your WordPress site. **Q: Does UiChemy support negative gapping in Figma designs?** A: No, UiChemy does not support negative gapping in Auto Layout since HTML does not accommodate negative flex-gap. This can lead to design issues during conversion. Always ensure that your Figma design adheres to positive spacing to maintain layout integrity when using the UiChemy Figma to WordPress Converter. **Q: What should I do if my Figma design has overflowing frames?** A: If your design has overflowing frames, use the Clip Content feature to manage visibility. This allows you to hide or show overflowing content effectively. Properly managing overflow is crucial for maintaining a clean layout in your WordPress site after conversion with UiChemy. **Q: What font considerations should I keep in mind for UiChemy?** A: Ensure that the fonts used in your Figma design are installed on your system. If the font is missing, it may not render correctly after conversion. This is vital for maintaining the intended design aesthetics when using the UiChemy WordPress Plugin. **Q: How do I lock elements in Figma for UiChemy conversion?** A: Locking elements in Figma allows you to export a group of multiple elements as a single image, which reduces the number of images or vectors on your WordPress page. This is particularly useful when using the UiChemy Figma to Elementor feature. To do this, select the elements, lock them, and export accordingly.