Accessibility and Inclusion with Figma

Course details

Figma is a powerful collaborative design tool, but have you ever wondered about your options for supporting more inclusive, accessible design experiences and products? In this course, teacher, author, and professor Tom Green guides you through six different plugins and utilities for Figma that will help your design work be more inclusive and accessible. Deep dive into the Stark plugin, including its contrast checker, typography checker, vision simulator, Sidekick AI assistant, and more. Explore Adee, with its contrast checker, alt text generator, and color blindness simulator, and check out the contrast checker tools Able and Ally. Learn how to use Humaaans for inclusive graphics and Lokalise for supporting additional languages. Plus, go over additional inclusivity sources and examine ways you can take accessibility and inclusivity forward.

Concepts

0. Introduction

01 - Figma accessibility plugins

1. Stark

02 - Accessibility
03 - Installing the Stark plugin for Figma
04 - Using Stark s contrast checker
05 - Using Stark s typography checker
06 - Reviewing alt text
07 - Correct focus order
08 - Using Stark s vision simulator
09 - Touch targets
10 - Adding landmarks
11 - Add Aria notes
12 - Using Sidekick
13 - The Stark accessibility checklist widget

2. Adee

14 - Installing Adee
15 - Using Adee s contrast checker
16 - Using the alt text generator
17 - Using Adee s color blindness simulator
18 - Checking touch sizes

3. Contrast Checkers

19 - Installing Able and Ally
20 - Checking color contrast with Able
21 - Checking color contrast with Ally

4. Humaaans

22 - Inclusion
23 - Using Humaaans with Figma
24 - Create an onboarding frame
25 - Persona

5. Lokalise

26 - An overview of Lokalise
27 - Changing text to French

6. Inclusivity Sources

28 - An overview of inclusive design in Microsoft
29 - Cards for Humanity

Taking Accessibilty and Inclusivity Forward

30 - Next steps for accessible, inclusive design