StyleGuardBlog·
The Figma design QA checklist to run before developer handoff
A practical pre-handoff checklist for Figma files: styles, pixels, names, hidden layers, contrast, alt text, and touch targets.
Shipping a Figma file to engineering is when small inconsistencies become tickets. Unlinked fills, a 23.4px frame, “Rectangle 12”, and 10px helper text all survive visual review because they look fine at 100%.
Use this pass before you share the file.
1. Bind styles and variables
Fills, strokes, text styles, and effects that are not linked to a shared style or variable will drift the next time the kit updates. If a matching local style already exists, bind it instead of leaving a one-off.
2. Snap stray pixels
Non-integer x, y, width, or height values create hairline gaps on export and in layout. Skip rotated nodes and positions owned by auto layout. Everything else should sit on whole pixels.
3. Check the radius scale
A 13px corner next to a 16px scale is almost invisible in isolation and obvious in production. Derive the file’s dominant radii, then flag anything off-scale.
4. Archive hidden work
Hidden layers outside an archive, _old, or deprecated group still ship in the file. Designers keep them “just in case”; developers trip over them.
5. Rename default layers
“Frame 4” and “Boolean” tell a developer nothing. Name from content or role: btn-primary, nav/item, hero/title.
6. Accessibility before polish
- Contrast against WCAG AA (4.5:1, 3:1 for large text) or AAA if your product requires it.
- Alt text on image fills.
- Interactive targets at least 44×44.
- Body text at or above 12px.
7. Scan the whole document, not just the page you have open
Handoff files often hide issues on other pages: covers, archives, old flows. A document-scoped scan is the only way to catch them.
StyleGuard automates this checklist: nine built-in features, custom rules that travel with the file, and one-click fixes.
Ready to check your file?
Try StyleGuard directly in Figma.
Get the Figma plugin