How do I install the Figma Design QA skill?

Run npx skillmds@latest add majiayu000/figma-design-qa in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Figma Design QA safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Figma Design QA?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Figma Design QA free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Figma Design QA?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Figma Design QA by majiayu000 — Agent Skill

Name: Figma Design QA
Rating: 4.5 (4 reviews)
Author: majiayu000

Figma Design QA

Run a pre-handoff QA checklist on any Figma design before it goes to engineering. Use when asked to QA a Figma design, do a pre-handoff check, review a design before engineering, or validate a Figma file is ready to build. Produces a structured QA checklist covering file hygiene, component usage, accessibility, and handoff readiness with pass/fail status. Optimised for Opus 4.7 and newer models.

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

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

Section 5: Accessibility

All text meets WCAG AA contrast (4.5:1 body, 3:1 large)
UI components meet 3:1 contrast against background
Touch targets minimum 44x44pt iOS / 48x48dp Android
Focus states for keyboard/switch navigation (web)
Information not conveyed by colour alone
Icons have text labels or accessible names annotated

Section 6: Handoff Readiness

Dev annotations on non-obvious interactions
Spacing uses Auto Layout (not absolute positioning)
Images/assets exported at correct resolutions
Design matches approved requirements
Link to prototype included

Issues Found

For each fail: [Issue] — Blocking / Fix before handoff / Fix in next iteration

What: [Specific layer/screen/element]
Fix: [Exact action needed]
Owner: [Designer/PM/Both]

Handoff Decision

Status, signed off by, date.

Quality Checks

All 6 sections completed
Every fail has a specific description and fix action
Blocking issues separated from minor ones
Handoff decision is explicit

Example Trigger Phrases

"QA this Figma design before handoff"
"Run a pre-handoff check on [feature] design"
"Is this Figma design ready for engineering?"
"Do a design QA on [screen/feature]"
"What needs fixing before we hand this off?"

---name: figma-design-qadescription: Run a pre-handoff QA checklist on any Figma design before it goes to engineering. Use when asked to QA a Figma design, do a pre-handoff check, review a design before engineering, or validate a Figma file is ready to build. Produces a structured QA checklist covering file hygiene, component usage, accessibility, and handoff readiness with pass/fail status. Optimised for Opus 4.7 and newer models.--- # 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 ### Section 5: Accessibility - All text meets WCAG AA contrast (4.5:1 body, 3:1 large) - UI components meet 3:1 contrast against background - Touch targets minimum 44x44pt iOS / 48x48dp Android - Focus states for keyboard/switch navigation (web) - Information not conveyed by colour alone - Icons have text labels or accessible names annotated ### Section 6: Handoff Readiness - Dev annotations on non-obvious interactions - Spacing uses Auto Layout (not absolute positioning) - Images/assets exported at correct resolutions - Design matches approved requirements - Link to prototype included ### Issues Found For each fail: **[Issue] — Blocking / Fix before handoff / Fix in next iteration** - What: [Specific layer/screen/element] - Fix: [Exact action needed] - Owner: [Designer/PM/Both] ### Handoff Decision Status, signed off by, date. ## Quality Checks - [ ] All 6 sections completed - [ ] Every fail has a specific description and fix action - [ ] Blocking issues separated from minor ones - [ ] Handoff decision is explicit ## Example Trigger Phrases - "QA this Figma design before handoff" - "Run a pre-handoff check on [feature] design" - "Is this Figma design ready for engineering?" - "Do a design QA on [screen/feature]" - "What needs fixing before we hand this off?"

Frequently asked questions