Test and fix design components with the Figma plugin

Who can use this feature?

• Available for Accelerate and Enterprise.

Use the Figma plugin to find and fix accessibility issues in the design phase, lowering remediation costs, mitigating legal risk, and saving you time. The Figma plugin tells you exactly what’s wrong with the component and how to fix it, so you can learn accessible design practices along the way.

The Figma plugin matches design components to the design rules library and provides pass / fail results. Each component has an associated check with the design rule library for labels, typography, contrast, and target size. You can test the following component types:

• Buttons
• Links
• Checkboxes
• Radio buttons
• Text input box
• Dropdown box

The Figma plugin can’t currently fix contrast issues for text input, dropdown, checkboxes, and radio buttons. You’ll still receive the results and information to fix the component manually.

Test and fix your components

To test and fix your components:

1. Choose the input control type you want to test.
2. Select Start.
3. Select a component in your Figma design project.
4. In the Level Access Design Tools, choose Select.
5. Review the accessibility results for the:
   • Label
   • Type
   • Contrast
   • Target
6. If the component doesn’t meet accessibility standards, select Apply recommendation to automatically apply the fix.

Continue testing the same type of component

To continue testing the same type of component:

1. Choose Select component to go back to the previous page.
2. Repeat steps 3-6 of Test and fix your components.

Test a different type of component

To test a different type of component:

1. Choose Select component.
2. Select Text and fix components.
3. Repeat steps 1-6 of Test and fix your components.