What is UiChemy Supported Score?

Thanks for coming and eager to know about this score.

Certainly! Here’s a breakdown of the documentation for the badges based on the specified score ranges and criteria:

1. Green Badge: 86% to 100% Score
2. Blue Badge: 61% to 85% Score
3. Yellow Badge: 41% to 60% Score
4. Red Badge: 0% to 40% Score

If all the layouts appear correct and you have avoided the mistakes mentioned in Blue Badge, Yellow Badge & Green Badge criteria, your designs will qualify for the Green Badge within the score range of 86% to 100%. This badge reflects that you have properly followed the best practices and design standards for UiChemy conversion.

Green Badge (86% to 100% Score)

The Green Badge is given for designs scoring between 86% to 100% and meets the following criteria:

1. Avoid Negative Gaps: Make sure that no negative spacing is added between layers within auto layouts. Properly managing space between elements is essential for a compatible design.
2. Avoid Unnecessary Frames: Make sure not to add any unnecessary frames. Only use frames when you need them to organize and structure things.
3. No Fill Color: Make sure to add fill color to elements before tagging. For example, when tagging elements like buttons without directly applying a background color, while exporting these elements will use the default primary color of the widget. 
4. Consistent Text Color: Make sure that in your design, sentences or phrases don’t use different colors for individual words in the same paragraph. Keeping the text color consistent helps everything look unified and easier to read.

Blue Badge (61% to 80% Score)

The Blue Badge signifies a score between 61% to 80% and is assigned when Figma designs contain common issues such as:

1. One or Two Frames not in Auto Layouts: Your Figma layout contains one or more frames that are not in auto layout.
2. One or Two Frames in Absolute Position: Your Figma layout contains one or more frames that are in absolute layout.
3. Negative Gaps: Your Figma layout contains negative spacing in some frames.
4. Failure to combine layers by locking: Layers are not locked to combine multiple elements or layers using the lock feature in Figma.
5. One or Two Frames set to “Fill” width: Frames should not uniformly extend to fill the entire width.
6. Direct addition of rectangles after the MAIN FRAME: Rectangles are added directly without nesting with appropriate structures.
7. Utilizing CROP for Image selection: Using the ‘Crop’ function for image selection might lead to a lower score.
8. Content/Frame Alignment Issues Prevention: Auto Layout is applied to the frame without specifying the vertical (top/center/bottom) or horizontal (left/center/right) alignments.

Yellow Badge (41% to 60% Score)

The Yellow badge signifies a score between 41% to 60% and is assigned when Figma designs contain common issues such as:

1. Few/Less Frames not in Auto Layouts
2. Misplacement of elements outside containers
3. Few/Less Frames in Absolute Position
4. Negative Gaps
5. Not combining layers by locking
6. Few/Less Frames set to “Fill” width
7. Direct addition of rectangles after the MAIN FRAME
8. Utilizing CROP for Image selection
9. Content/Frame Alignment Issues Prevention

Red Badge (0% to 40% Score)

The Red badge signifies a score between 0% to 40% and is assigned when Figma designs contain common issues such as:

1. All/Most Frames not in Auto Layouts: All or most frames are not using Figma’s Auto Layout feature.
2. Misplacement of elements outside containers: Items placed at the top level rather than within containers for proper structuring.
3. Frames in Absolute Position: Elements are positioned using absolute layout instead of relative placements.
4. Negative Gaps: There are instances where there is negative spacing between elements.
5. Failure to combine layers by locking: Layers are not combined by using the lock feature in Figma.
6. All Frames set to “Fill” width: Frames are not uniformly extended to fill the entire width.
7. Direct addition of rectangles after the MAIN FRAME: Rectangles are added directly without nesting with appropriate structures.
8. Utilizing CROP for Image selection: Using the ‘Crop’ function for image selection might lead to a lower score.
9. No Fill Color: Make sure to add fill color to elements before tagging. For example, when tagging elements like buttons without directly applying a background color, while exporting these elements will use the default primary color of the widget.
10. Consistent Text Color: Make sure that in your design, sentences or phrases don’t use different colors for individual words in the same paragraph. Keeping the text color consistent helps everything look unified and easier to read.

Additionally, for more detailed information, we have provided educational purpose guidelines and case studies addressing common issues.

Case Study Templates

This updated version aims to clearly explain the criteria for earning the Green Badge while stressing how crucial it is to meet these standards. It also emphasizes the availability of educational resources on common issues for extra help.