Designing Accessible Components In Figma
1h 12mIntermediate2022-11-18
Authors

Tetiana Gulei
UX Designer | Teaching Figma and UX Design
Course details
From toggles to tabs, accessible components need to work across multiple devices and for a wide variety of users, including ones with disabilities. Good UX designs can help users navigate more comfortably and get more value out of apps and websites. In this course, expert Tetiana Gulei guides you through why accessibility matters and how you can design accessible components in Figma. Learn how to use the pre-created color and font styles, then create your first component. Explore creating accessible buttons, icons, radio buttons, checkboxes, and image cards. Then dive into making more advanced components accessible, like header menus and footers. Find out how to use Figma plugins for accessibility and practice what you’ve learned with a simple website that uses accessible components. Plus, get Tetiana’s practical advice on growing your knowledge of Figma components and applying what you’ve learned in this course to your own design projects.
Skills covered
AccessibilityFigmaInteraction DesignDiversity, Equity, and Inclusion (DEI)User ExperienceProject
Concepts
0. Introduction
- 01 - Why does accessibility matter in Figma
- 02 - What are accessible components
1. Accessible Components
- 03 - Style your components
- 04 - Create your first component in Figma
- 05 - Create accessible buttons
- 06 - Create accessible icons
- 07 - Accessible radio buttons and checkboxes
- 08 - Creating an accessible image card
- 09 - Challenge - Create accessible input fields
- 10 - Solution - Create accessible input fields
2. Advanced Components
- 11 - Accessible header menus
- 12 - Accessible footers
- 13 - Figma plugins for accessibility
- 14 - Create a simple web page with Figma components
- 15 - Challenge - Design a contact page
- 16 - Solution - Design a contact page
Conclusion
- 17 - Continue designing accessible components