How do you enforce WCAG touch target minimums in Figma?
Tests WCAG 2.2 SC 2.5.8 and design-system governance. A strong answer cites the 24x24 CSS pixel minimum and spacing exception, then covers Figma component constraints and linting. A red flag is dumping accessibility on developers without design guardrails.
WHAT THIS TESTS: The interviewer wants to see if you know the specific WCAG 2.2 Level AA requirement for pointer targets and whether you can translate that legal standard into repeatable design-system behavior. They care about governance, not just memorization. Can you build guardrails that make the right thing easy and the wrong thing hard?
A GOOD ANSWER COVERS: First, cite the rule correctly. SC 2.5.8 Target Size Minimum requires targets to be at least 24 by 24 CSS pixels unless one of five exceptions applies. The most relevant exception for designers is spacing: an undersized target is allowed only if a 24 CSS pixel diameter circle centered on its bounding box does not intersect another target. Second, explain Figma component architecture. Use base components with enforced minimum width and height of 24px. Use auto-layout with minimum padding so that adjacent buttons cannot be placed too close together. Third, mention tokens and styles. Store touch-target values as sizing or spacing tokens so the minimum propagates across variants. Fourth, describe quality assurance. Use Figma plugins like Stark, A11y Annotation, or custom design-linting setups to flag layers below 24px. Fifth, note process. Add target-size checks to design critiques and require annotations on any exception such as inline links.
COMMON WRONG ANSWERS: Guessing 44 by 44 pixels, which is the older iOS HIG recommendation, not the WCAG AA standard. Saying designers should just remember to check manually, which does not scale. Claiming Figma cannot enforce this, when auto-layout constraints and component properties absolutely can. Suggesting developers will fix it in code, which misses the question entirely. Ignoring the spacing exception and insisting every element must be 24 by 24 pixels regardless of context.
LIKELY FOLLOW-UPS: How would you handle dense data tables where 24px rows feel too large? What is your process when a product manager insists on a smaller icon button? How do you account for device pixel ratio versus CSS pixels in your Figma file? Have you ever written a custom Figma plugin or used variables to enforce spacing rules? How do you document exceptions for inline text links?
ONE CONCRETE EXAMPLE: At a previous company I rebuilt the icon-button component to have a 24 by 24 pixel hit area even when the visible icon was only 16 pixels. I wrapped the icon in an auto-layout frame with padding that always produced a 24px bounding box. I then published the component to the team library and added a layer name convention that a custom plugin scanned to highlight any icon button frame smaller than 24px. Within two sprints, target-size violations in our design files dropped by roughly 80 percent.
Read the original → w3.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.