| name | figma-review |
| description | Use this skill whenever the user wants to audit, review, or check a Figma file for UX content quality, or compare Figma copy against a copy document. Triggers include: "review my Figma", "audit the copy", "check UX content", "compare against a checklist", "content audit", "UX writing review", "check microcopy", "does the Figma match the copy doc", "check the design against the copy", or anything involving reviewing text/labels/copy in a Figma design file. Also trigger when the user provides a markdown copy doc and wants to validate Figma content against it. Use this skill even if the user only mentions a Figma link and asks for "a review" — always assume a content audit is appropriate.
|
Figma UX Content Audit Skill
Performs three checks on a Figma file:
- Exact copy match — compares every text string in the Figma file against a markdown copy document, flagging any differences (wording, missing strings, extra strings, minor differences like punctuation or capitalisation)
- UX quality check — reviews Figma content against UX best practice checklist
- Brand & style compliance — reviews all copy against the Canonical copy style guide (
shared/copy-style-guide-checklist.md), checking spelling, capitalisation, product names, punctuation, banned words, tone, and voice
Outputs a structured markdown report organised by check type, with issues cited to specific Figma frames/layers.
Inputs
| Input | Required | Notes |
|---|
| Figma file URL or file key | Yes | Used to fetch content via Figma MCP |
| Markdown copy doc | Optional | Required for the exact match check. Exported or copied from Google Doc into .md or .txt format. |
| Custom UX checklist | Optional | Overrides or supplements the default checklist. User may paste inline or provide a file. |
Step 0 — Confirm inputs
-
Check what the user has provided:
- Figma file URL/key — required for both checks. If missing, ask before proceeding.
- Markdown copy doc — if provided, run the exact match check. If not, skip Check 1 and run Check 2 only.
- Custom checklist — if provided, use instead of or alongside the default. If not, fetch the checklist from the designops source of truth:
https://raw.githubusercontent.com/Sophie-32/sites-designops/master/checklists/figma-review.md. If the fetch fails (network error, 404, etc.), fall back to the local copy at references/default-checklist.md.
-
Tell the user which checks will be run based on what was provided.
Step 1 — Extract content from Figma via MCP
Use the Figma MCP to retrieve:
- All text nodes across all frames/pages — labels, button text, headings, placeholders, error messages, tooltips, alt text annotations, etc.
- Frame and component names — to map content back to screens
- Layer names — where they hint at role (e.g. "error-message", "cta-button", "placeholder")
- Annotations and comments — designer notes left on frames or layers
Organise extracted content by screen/frame
Page: [Page Name]
Frame: [Frame Name]
- [layer role if inferable]: "[text content]"
- ...
Annotations/comments:
- "[annotation text]"
Process all pages. Note while extracting:
- Text nodes that are empty or whitespace-only (potential missing copy)
- Icon/image layers with no associated text label (potential accessibility gap)
- Duplicate text strings that appear with slight variations (potential consistency issue)
Step 2 — Check 1: Exact copy match (only if copy doc provided)
Compare the extracted Figma text strings against the markdown copy doc.
How to match
- Work through the copy doc section by section
- For each string in the copy doc, find the corresponding text in the Figma extraction
- For each text node in Figma, check it exists in the copy doc
Issue types and severity
| Type | Severity | Description |
|---|
| Wording difference | 🔴 Critical | The text exists in both but the words differ meaningfully |
| Missing from Figma | 🔴 Critical | Copy doc has text that does not appear in the Figma file |
| Extra in Figma | 🟡 Needs work | Figma has text that does not appear in the copy doc |
| Minor difference | 🔵 Minor | Same wording but differs in punctuation, capitalisation, spacing, or trailing characters |
Always flag minor differences — do not silently ignore them.
Step 3 — Check 2: UX quality check
Work through each section of the checklist (default or custom). For each item:
- Check the extracted content to determine: pass / fail / needs review / not applicable
- Cite the specific frame and text or missing element as evidence
- Assign severity:
- 🔴 Critical — functional or accessibility blocker (missing label, silent error, etc.)
- 🟡 Needs work — vague copy, missing best practice, inconsistency
- 🔵 Minor — small wording or pattern improvement
Severity overrides
The following should always be treated as 🔵 Minor, regardless of what the default rules would suggest:
- Logo alt text — missing or generic alt text on logos (e.g. company logos in partner sections). These are cosmetic, not functional accessibility gaps.
- "Learn more" links with an ARIA label — if a "Learn more" link has an
aria-label that provides context, the accessibility requirement is technically met. Flag as minor for copy improvement, not as a standard accessibility issue.
Checklist sections (from designops checklist)
- Structure & Hierarchy
- CTAs
- Links
- Forms & Inputs
- Accessibility
- Navigation
- Mobile Considerations
- Designer Annotations
Step 4 — Check 3: Brand & style compliance
Load shared/copy-style-guide-checklist.md and run it against all extracted text content from the Figma file. This checks the reviewed content (not the report itself) against the Canonical copy style guide.
- Run Part A (deterministic checks) — flag every match. These include: US spelling, "open source" formatting, product names, capitalisation, units, dates, numbers, punctuation, apostrophes, acronyms, link/CTA text, hyphens, banned words/phrases, consistency spellings, formatting conventions.
- Run Part B (judgment checks) — apply with examples given. These include: brand voice, tone, sentence length, readability, active voice, security/absolute claims, superlatives, inclusive language, commonly confused words, plain language.
Report findings under a separate Brand & style compliance heading in the report (see report template below). Use the severity scale from the style guide checklist:
- 🔴 Critical — legal, compliance, or brand-integrity risk (unprovable claims, wrong product names)
- 🟡 Needs work — banned words/phrases, wrong capitalisation, voice/tone misses
- 🔵 Minor — punctuation, units, number/date formatting, dash style
Do not double-count: If an issue is already flagged by the UX quality check (e.g. non-descriptive link text), report it only once under whichever check is more specific.
Step 5 — Write the audit report
Report ordering: For Check 2 (UX quality), organise issues by frame/section in the order they appear in the Figma flow (top to bottom, left to right), not by check category. Tag each issue with its check category in brackets (e.g. [CTAs], [Accessibility]) so the category is still visible. This lets a reviewer read the report alongside the Figma file without jumping around.
Passing checks: All checks that pass should go at the bottom of the report in the "✅ What Looks Good" section, not interleaved with issues.
The report itself must follow the Canonical copy style guide (shared/copy-style-guide-checklist.md). Key rules for report output:
- Use en dashes with spaces ( – ) for sentence breaks, not em dashes (—) or hyphens (-).
- Use US English spelling.
- Spell out single-figure numbers (one–nine); use digits from 10 up.
- No gendered pronouns – use they/them.
Output a structured markdown report using the template in references/report-template.md. Fill in every section based on findings from the checks above.
Step 6 — Deliver the report
- Output the report inline in chat as markdown
- Offer to generate a
.md file download if the user wants to save or share it
- Offer to dive deeper into any specific frame, section, or issue
Edge cases
| Situation | How to handle |
|---|
| Figma MCP not connected | Tell the user the Figma MCP needs to be active in VS Code. Do not proceed without it. |
| No copy doc provided | Skip Check 1, run Check 2 only. Note this clearly at the top of the report. |
| Figma file has no text nodes | Warn the user — file may be image-only or the file key may be incorrect. |
| Very large file (100+ frames) | Ask the user if they want all pages audited or specific ones. Default to all. |
| Designer annotations reference people by name | Treat them as open questions to be addressed, surfaced neutrally in the report. |
References
- Source of truth:
https://raw.githubusercontent.com/Sophie-32/sites-designops/master/checklists/figma-review.md — Full default UX content checklist, hosted in the sites-designops repo
references/default-checklist.md — Local fallback copy of the checklist (used if GitHub fetch fails)
