Accessible Design in Figma: Beyond the Basics
17.5K views · 2025-02-03
UI DesignInteraction & UX
Looking to become an expert UX designer? UI Designer? Product Designer? Then you need to understand what goes into accessible design! This video will go beyond the basics of accessible design in Figma. You'll learn advanced techniques and best practices to create truly inclusive user interfaces that cater to diverse needs.
GENERAL LINKS
NEW - Our Official Design System: https://collectivekit.co/
Ask the community and build a profile: https://uicollective.co/
We build design systems! Work with me: https://designsystemlabs.co/
Connect with me on LinkedIn: https://www.linkedin.com/in/kirk-mcneill-km/
Support UI Collective & buy a laptop sticker: https://store.uicollective.co/
All Resources: https://uicollective.co/designer-tools-and-resources
OTHER LINKS
Build a Design System Episode 1: https://youtu.be/HNJmWKndUA4
Web Accessibility Annotation Kit: https://www.figma.com/community/file/1311421011482282592/web-accessibility-annotation-kit
My favourite Figma kit: Untitled UI: https://www.untitledui.com?aff=bdzGd
Funkify (As seen in the video): https://www.funkify.org/
0:00 An Introduction
1:43 Testing for different disabilities
5:46 Accomodating for different disabilites
9:08 Screenreader demo
13:43 H-tag Annotations
16:27 Reading Order Annotations
19:52 Tab Order Annotations
22:09 Landmark Annotations
#uxdesign #uidesign #figma
GENERAL LINKS
NEW - Our Official Design System: https://collectivekit.co/
Ask the community and build a profile: https://uicollective.co/
We build design systems! Work with me: https://designsystemlabs.co/
Connect with me on LinkedIn: https://www.linkedin.com/in/kirk-mcneill-km/
Support UI Collective & buy a laptop sticker: https://store.uicollective.co/
All Resources: https://uicollective.co/designer-tools-and-resources
OTHER LINKS
Build a Design System Episode 1: https://youtu.be/HNJmWKndUA4
Web Accessibility Annotation Kit: https://www.figma.com/community/file/1311421011482282592/web-accessibility-annotation-kit
My favourite Figma kit: Untitled UI: https://www.untitledui.com?aff=bdzGd
Funkify (As seen in the video): https://www.funkify.org/
0:00 An Introduction
1:43 Testing for different disabilities
5:46 Accomodating for different disabilites
9:08 Screenreader demo
13:43 H-tag Annotations
16:27 Reading Order Annotations
19:52 Tab Order Annotations
22:09 Landmark Annotations
#uxdesign #uidesign #figma