Knowledge Base / Cheat-sheets
Figma Design Testing
Design handoff & Dev Mode inspection, visual/state QA, in-file accessibility checks, prototyping & interaction review, and a dedicated plugin/tools roundup - five sections you can filter and toggle as you verify them. Progress is saved on this device.
What this checklist covers
Design Handoff & Inspect
Verifying the built UI actually matches the spec, not just looks close enough.
- Dev Mode's Inspect panel gives exact spacing, padding, corner radius, and layout values instead of eyeballed measurements.
- Auto layout properties (gap, padding, resizing behavior) are checked in Inspect, since they define how a component should actually respond to content changes.
- Colors, type styles, and spacing in the build map back to named Figma styles/variables, not one-off hex or pixel values copied from Inspect.
- A shared token source (Figma Variables, or a plugin like Tokens Studio) keeps design and code from drifting as the palette or scale evolves.
Visual & Design QA
Side-by-side comparison of the shipped UI against the file of record.
- Every interactive component has default, hover, focus, active, disabled, and error states designed in Figma, not just implied.
- Empty, loading, and error states for data-driven screens exist as real frames, not left to be improvised during development.
- Key breakpoints (mobile, tablet, desktop) are designed as real frames with auto layout, not assumed to 'just scale.'
- Text and container resizing behavior (hug, fill, fixed) is specified per element so engineers don't have to guess reflow rules.
Accessibility Checks in Figma
Catching contrast, sizing, and structure problems before a single line of code exists.
- A contrast-checking plugin (Stark, Contrast, or Able) verifies text-to-background ratios meet at least WCAG AA before build starts.
- A color-blindness simulation pass confirms state or category information isn't conveyed by color alone.
- Reading/focus order is annotated directly on complex layouts so it doesn't get reinvented ad hoc during implementation.
- Touch targets are checked against a minimum size (roughly 44x44px) using frame dimensions, not visual estimation.
Prototyping & Interaction Review
Testing the flow and feel of an experience before it's real, with real reviewers.
- Click-through prototypes cover the primary happy path plus at least one error/edge branch, not only the ideal flow.
- Interactive components (with internal states wired via variants) let reviewers test real component behavior, not just static screens.
- Prototype review sessions capture feedback as pinned comments on the exact frame/element, not a separate untracked doc.
- Motion specs (duration, easing curve) are annotated on transitions that matter, instead of left to engineering's interpretation.
Figma Ecosystem & Tooling
Plugins and integrations that extend Figma into a real design-QA workflow.
- Stark and Able run contrast, color-blindness, and focus-order checks directly inside the Figma file.
- A11y Annotation Kit-style plugins turn accessibility notes into a structured, exportable layer instead of scattered comments.
- Tokens Studio (or native Figma Variables) syncs design tokens with a code repository so both stay on the same source of truth.
- Dev Mode's Storybook/Code Connect integration links a Figma component directly to its real, live-coded implementation.
- Branching lets a design QA pass happen on a copy of the file without blocking or being blocked by ongoing edits.
- Version history pinpoints exactly when a spec changed, which is often faster than asking 'was this always like this?' in chat.
- Content Reel or a similar plugin fills mockups with realistic (long names, missing data, overflow text) content instead of idealized lorem ipsum.
- Testing designs against realistic content early surfaces truncation, wrapping, and overflow bugs before they reach a QA ticket.