Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
Designing Accessible Components In Figma

Designing Accessible Components In Figma

1h 12mIntermediate2022-11-18

Authors

Tetiana Gulei

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

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
Zarinpal
Zibal