SKILL.md
Figma Design QA Skill
Runs a systematic pre-handoff QA check on a Figma design — catching issues that cause engineering back-and-forth before they become expensive.
Required Inputs
Ask the user for these if not provided:
- Feature or screen being QA-d (describe what has been designed)
- Platform (iOS / Android / Web)
- Design system (custom / Material / HIG / None)
- Handoff tool (Figma Inspect / Zeplin / Storybook / Direct link)
- QA depth (quick 15 min / standard 30 min / thorough 60 min)
Output Structure
QA Report: [Feature] | [Date] | [Platform] Overall status: Ready / Minor fixes needed / Not ready
Section 1: File Hygiene
- All layers named semantically (no "Rectangle 12")
- No unused/hidden layers in final frames
- Components from library (not detached copies)
- All text uses text styles (not manual font settings)
- All colours use styles or variables (not hex overrides)
- Frames named to match screen map
- No leftover prototype wires to wrong frames
Section 2: Component Usage
- All buttons use library component
- All inputs use library component
- All icons from approved icon library
- No custom components that should be in library
- Variants used correctly (right size, state, type)
Section 3: Content and Copy
- No placeholder text (Lorem ipsum) in final designs
- All copy reviewed and approved
- Realistic content used (not "User Name")
- Long text edge cases tested
- Error messages are human-readable
- Empty states have copy and CTA
Section 4: States and Coverage
- Default, Loading, Empty, Error, Success states
- Interactive elements have hover/active (web)
- Disabled states designed where applicable