Refine.UI

About this plugin

Refine.UI is a design quality scanner for Figma.

Select a frame, run a scan, and get a clear score plus a list of issues grouped by category so you can quickly clean up your UI.

Refine.UI currently checks for:

1. Typography – very small text, inconsistent sizes, line-height problems, too many text styles, etc.
2. Spacing & layout – uneven gaps, misaligned elements, and inconsistent spacing patterns.
3. Color & contrast – low-contrast text and basic readability issues.
4. Accessibility (tap targets) – interactive elements that are too small to tap comfortably on mobile.

What you get after each scan:

1. A single overall score (0–100) with a short message like “Needs attention”, “Can be improved”, or “Looks good”.
2. A breakdown by category showing how many issues were found in typography, spacing, color, and accessibility.
3. A scrollable Issues list where every issue is labeled as Critical / Major / Minor.
4. A detailed “Why this matters” + “How to fix” explanation for the selected issue.
5. A “Show component in canvas” button that highlights the exact layer causing the problem in your frame.

Workflow:

1. Select a frame in your Figma file (web or mobile).
2. Open Refine.UI and click “Scan selected frame”.
3. Review the score, categories, and issues.
4. Click “Show component in canvas” to jump to the problem area and fix it.
5. After making changes, click “Rescan” to see how your score improves.

Privacy:

All checks run locally inside Figma.

Your design data is not sent to any external server.

Refine.UI is designed for anyone who wants a fast, opinionated UX sanity check – from beginners learning good UI practices to experienced designers doing final polish before hand-off.