Figma adds 'Inclusive Variants' to manage accessible state permutations in components

Design · 4 min read

Inclusive Variants lets designers mark variant axes as 'accessibility-critical' and automatically generates a compact view that surfaces only the states required for audits (for example: focus-visible + error + keyboard-only). Designers can attach accessibility annotations—such as recommended ARIA roles, live-region behaviors, and contrast overrides—directly to a variant.

The inspector exports a machine-readable accessibility manifest with each component, which can be consumed by development tools to ensure the same permutations are implemented. Teams using design tokens can bind Inclusive Variant annotations to token values so changing a contrast token automatically updates the manifest and triggers downstream checks.

Figma also added a plugin API hook so accessibility linters and automated testing services can request the manifests and run targeted checks. Early feedback from accessibility leads shows improved communication between designers and engineers when complex interactions like collapsible content and layered overlays are involved.