---
name: figma-audit
description: Audit Figma file for design system consistency, accessibility, token adoption, Code Connect coverage
user-invocable: true
model: opus
effort: high
context:
  - skills/FIGMA_USE.md
---

# /figma-audit — Design System Audit & Quality Check

> Audit a Figma file for design system consistency, accessibility compliance, token adoption, and Code Connect coverage. Produces actionable findings. Requires /figma-use.

## Freedom Level: Read-Only + Report

Audit skills read and analyze but do not modify the canvas. Output is a structured report with severity levels.

## When to Use
- Before a design handoff to development
- After pulling a design system (`memi pull`)
- Periodic design system health checks
- When components look inconsistent or broken
- Before establishing Code Connect mappings

## Audit Checklist

### 1. Token Adoption
```
figma_get_variables → list all defined tokens
get_design_context for each page → check usage

Report:
  ✓ Bound to variable: colors/primary/500
  ✗ Raw hex: #3b82f6 (should be colors/primary/500)
  ✗ Magic number: 16px padding (should be spacing/4)

Metric: % of visual properties bound to variables
Target: 90%+
```

### 2. Component Consistency
```
figma_search_components → list all components
figma_get_component_details for each → check structure

Report:
  ✓ Auto Layout applied
  ✓ Properties documented
  ✓ Variants complete (default, hover, active, disabled, focused)
  ✗ Missing state: Button has no "loading" variant
  ✗ Inconsistent padding: Card uses 16px, CardHeader uses 12px

Metric: % of components with all required states
Target: 100% for atoms, 90% for molecules
```

### 3. Atomic Design Compliance
```
Check each component's classification:
  ✓ Atom: no nested component instances (correct)
  ✗ Atom: Button contains Icon instance (should be molecule or use instance swap)
  ✓ Molecule: FormField composes Label + Input + HelpText
  ✗ Organism: LoginForm classified as molecule (too complex)

Metric: % of components correctly classified
Target: 95%+
```

### 4. Accessibility
```
For each component:
  ✓ Contrast ratio: text on background meets WCAG AA (4.5:1)
  ✗ Touch target: Button is 32px tall (needs 44px minimum)
  ✓ Focus indicator: visible focus ring
  ✗ Missing: no aria-label on icon-only button

For each page:
  ✓ Heading hierarchy: h1 → h2 → h3 (no skips)
  ✗ Missing landmark: no main content area defined
  ✓ Color not sole indicator: error states use icon + color

Metric: WCAG violations per page
Target: 0 critical, <5 minor
```

### 5. Code Connect Coverage
```
get_code_connect_map → current mappings

Report:
  ✓ Mapped: Button → src/components/ui/button.tsx
  ✓ Mapped: Card → src/components/ui/card.tsx
  ✗ Unmapped: MetricCard (no code counterpart)
  ✗ Stale: FormField maps to deleted file

Metric: % of components with valid Code Connect
Target: 80%+ for atoms, 60%+ for molecules
```

### 6. Naming Conventions
```
Check against naming rules:
  ✓ PascalCase: MetricCard, LoginForm
  ✗ Wrong case: metric-card (should be MetricCard)
  ✗ Vague name: "Frame 47" (rename to meaningful name)
  ✓ Token path: colors/primary/500

Metric: % of elements following naming conventions
Target: 100%
```

### 7. Auto Layout Health
```
For each container:
  ✓ Has Auto Layout
  ✗ Uses absolute positioning (should be Auto Layout)
  ✓ Sizing: fill container (correct for content area)
  ✗ Sizing: hug contents (should be fill for responsive element)
  ✓ Spacing uses token values

Metric: % of containers using Auto Layout
Target: 95%+
```

## Output Format
```
╔══════════════════════════════════════╗
║     Design System Audit Report       ║
╚══════════════════════════════════════╝

Score: 82/100

Token Adoption:      87% ✓
Component Quality:   79% ⚠
Atomic Compliance:   95% ✓
Accessibility:       74% ⚠
Code Connect:        65% ✗
Naming:             92% ✓
Auto Layout:         89% ✓

Critical Issues (fix immediately):
  1. Button has no focus indicator
  2. 23 raw hex values should be variables
  3. FormField Code Connect points to deleted file

Warnings (fix soon):
  1. MetricCard missing "loading" variant
  2. 5 components have inconsistent padding

Recommendations:
  1. Run: memi tokens → re-export and bind
  2. Run: add_code_connect_map for 12 unmapped components
  3. Add missing variant states to 8 components
```

## Integration
- Save audit results to `.memoire/audit.json` for tracking over time
- Compare against previous audits to show improvement
- Block `memi sync` if critical issues exceed threshold