DO4 — Design Review Checklist (Design-Ops Edition)
Scope: The per-screen, per-flow checklist that designers complete before handing off to engineering. This complements docs/standards/DESIGN_REVIEW_CHECKLIST.md (the process-level checklist); this document is the detailed, Figma-focused design QA tool.
When to use: Before any screen or user-flow is marked "ready for dev" in Jira (DoR gate for design).
Section A — Figma file hygiene
| # | Check | Method |
|---|
| A1 | All frames use Auto Layout (not absolute positioning) | Inspect layers panel |
| A2 | All colors reference design tokens (no hex literals in fills) | Inspect → Color tokens |
| A3 | All spacing uses spacing tokens (no arbitrary values) | Inspect → Spacing |
| A4 | Typography uses text styles (no manual font properties) | Inspect → Text styles |
| A5 | No "detached" components (all instances link to main component) | Layers panel: no broken link icons |
| A6 | Component properties used (not duplicate frames per variant) | Check component properties panel |
| A7 | Frame named correctly: [ComponentName] / [Variant] / [State] | Layers panel |
| A8 | No lorem ipsum in final handoff frames (real or representative copy) | Visual review |
| # | Check | Method |
|---|
| B1 | Mobile breakpoint frame exists (375 px wide minimum) | Figma frame |
| B2 | Desktop breakpoint frame exists (1280 px minimum for web; 1440 for desktop app) | Figma frame |
| B3 | Tablet breakpoint frame (768 px) — for tablet front-desk and kiosk surfaces | Figma frame |
| B4 | Auto Layout resizes correctly at each breakpoint (no overlapping text, no clipped content) | Resize frame in Figma |
| B5 | Touch target minimum 44×44 px on mobile, 60×60 px on kiosk | Measure tool |
| B6 | Horizontal scroll not present on any mobile frame (unless intentionally a carousel) | Resize frame |
Section C — States coverage
For every interactive element in the design, verify these states exist as separate Figma frames or Component property states:
| # | State | Required for |
|---|
| C1 | Default | All |
| C2 | Hover | Web + Desktop |
| C3 | Focus (keyboard) | All |
| C4 | Active / Pressed | All |
| C5 | Disabled | Any element that can be disabled |
| C6 | Loading (skeleton or spinner) | Data-driven elements |
| C7 | Empty state | Lists, grids, search results |
| C8 | Error state | Forms, API-dependent sections |
| C9 | Success state | Forms, transactions |
Section D — Content and copy
| # | Check | Method |
|---|
| D1 | All copy reviewed by copywriter or lead designer (no draft / placeholder labels) | Jira: copy sign-off comment |
| D2 | Error messages follow C2-error-to-ui-matrix.md patterns | Cross-reference |
| D3 | Truncation handled: long strings tested (e.g., 60-char property name, 30-char guest name) | Resize text in Figma |
| D4 | Dates use format consistent with 09-non-functional-requirements.md §3 (locale-aware) | Visual review |
| D5 | Currency amounts use Latin numerals (finance audit invariant — F4) | Visual review |
| D6 | Pashto / Dari copy provided if screen is used in ps or dr locale | Check locale switcher frame |
Section E — RTL coverage
| # | Check | Method |
|---|
| E1 | RTL frame exists for every mobile and web screen | Figma frame with RTL property toggle |
| E2 | Layout mirrors correctly (icon + text swap sides, chevrons flip, progress steps read right-to-left) | Visual review of RTL frame |
| E3 | RTL icons use mirrored variants for directional icons (back arrow, forward arrow, chevron, pagination) | Cross-reference Icons file RTL Mirrored page |
| E4 | Text alignment is start-aligned (not left) in all frames | Inspect → Text align |
| E5 | No hardcoded margin-left / padding-right in annotations — use inline-start / inline-end | Annotation review |
Section F — Accessibility annotations
| # | Check | Method |
|---|
| F1 | Focus order numbers annotated for all interactive elements | Figma annotation layer [A11y Focus Order] |
| F2 | aria-label / aria-labelledby values specified for icon-only buttons, images, inputs | Figma annotation layer [A11y Labels] |
| F3 | Contrast ratio ≥ 4.5:1 for all text (3:1 for large text ≥ 18 pt or bold ≥ 14 pt) | Figma A11y plugin or manual check |
| F4 | Non-text UI elements (icons, borders conveying state) ≥ 3:1 contrast | Figma A11y plugin |
| F5 | Error state does not rely on color alone (includes icon + text, not just red border) | Visual review |
| F6 | Form fields have visible labels (not placeholder-as-label) | Visual review |
| F7 | Skip link annotated for web screens (Skip to main content) | Annotation |
| F8 | ARIA landmark roles annotated (header, main, nav, aside, footer) for web/desktop | Annotation |
| F9 | Reduced-motion variant noted where animations are present | Design note |
Section G — Motion and interaction
| # | Check | Method |
|---|
| G1 | Transition duration uses motion token values (fast: 150ms, base: 300ms, slow: 500ms) | Design note / annotation |
| G2 | Easing curve specified for each transition (from motion.easing.* token) | Design note |
| G3 | Reduced-motion alternative documented ("If prefers-reduced-motion, fade only — no translate") | Design note |
| G4 | Loading animations do not loop indefinitely without user control (SC 2.2.2) | Design note |
Section H — Telemetry annotations
| # | Check | Method |
|---|
| H1 | Key user actions annotated with telemetry event names (from C1-telemetry-event-dictionary.md) | Figma annotation layer [Telemetry] |
| H2 | Impression events noted for above-fold content blocks | Annotation |
| H3 | Funnel steps annotated with step number (for conversion tracking) | Annotation |
Web
| # | Check |
|---|
| I1 | SEO: <h1> level annotated per page (only one H1) |
| I2 | OpenGraph image frame provided (1200×630px og variant) |
| I3 | Favicon / PWA icon variants provided (if new surface) |
Mobile
| # | Check |
|---|
| I4 | Safe-area insets respected (iPhone notch / Dynamic Island; Android status bar) |
| I5 | Keyboard avoidance behaviour noted (does the layout scroll or shift when keyboard appears?) |
| I6 | Swipe gesture conflicts noted (horizontal swipe carousel inside vertical scroll) |
Kiosk
| # | Check |
|---|
| I7 | Touch target minimum 60×60 px verified |
| I8 | Idle reset screen included in flow |
| I9 | Low-literacy mode variant provided (icon-first, simple language) |
Desktop
| # | Check |
|---|
| I10 | Minimum window size (1024×768) tested without overflow |
| I11 | Keyboard shortcut annotations provided (if new shortcut introduced) |
Section J — Sign-off
| Role | Sign-off method | Required before |
|---|
| Designer (author) | Self-review; check all sections above; add ✅ Design ready comment in Jira | Moving ticket to "In Dev" |
| Design guild lead | Review and comment ✅ Design reviewed in Figma branch | Merge Figma branch to main |
| Copywriter | Add ✅ Copy approved in Jira | If ticket has new strings |
| Accessibility reviewer | Add ✅ A11y annotated in Jira | If new interactive component or new screen |
Failure modes
If a check fails during engineering review, the engineer should:
- Comment in Jira:
🚫 Design gap: [check ID] — [description]
- Assign back to designer
- Designer fixes in Figma branch, re-requests sign-off
Design gaps found in code review or QA (after engineering started) incur tech debt and must be tracked in a follow-up ticket.
References