Check Designs in Figma: Catch What's Off, Ship What's Right
Figma's new 'Check designs' feature automates the identification and resolution of design system drift, accessibility violations, and component detachments.
Decoder
- Design system: A collection of reusable components, standards, and documentation that ensure consistency across a product's interface.
- WCAG 2.0: Web Content Accessibility Guidelines, which specify requirements to make digital content accessible to people with disabilities.
Original article
Check designs: catch what's off, ship what's right
Check designs compares your designs against your design system, flags what's off, and suggests the correct fix in one click. Catch drift as you work, run a QA pass before handoff, and keep every file aligned to your design system with:
→ Variable and style suggestions flags hard-coded color, text, radius, and spacing values and replaces them with the correct design system token.
→ Accessibility suggestions flags color contrast violations and replaces them with WCAG 2.0 AA or AAA-compliant colors.
→ Library mismatch detection flags tokens and components from unsubscribed libraries.
→ Detached component detection flags components detached from their source library.
Check designs is available on Organization and Enterprise plans.
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi