Great design is accessible to everyone. It’s representative and inclusive for customers who come from different cultures, speak different languages, and have different needs which impact their ability to use your product.
But spend some time talking to people working in accessibility and you’ll quickly realize that the work often falls on engineers’ shoulders. The tricky part? Accessibility is more than a technical hurdle – it’s understanding the complexity and range of disabilities that impact how your customers experience your product.
In this post, we’ll help you understand accessibility and give you some the best tools for designing more accessible products in Figma.
Understanding disability and why accessibility matters
To start, 26% of adults in the United States and 15% of people worldwide have a disability that affects their daily lives. That’s over one billion people, 54% of whom go online.
Nate Whitson, Senior Principal Designer at LinkedIn, reminds us that “disability is very, very diverse and can be permanent, temporary, or situational. The entirety of the user experience includes ways of interacting with a design that many folks don’t think of right off the bat.”
In Rethinking disability, Sara Goering defines disability as a mismatch between a person and the environment that has been designed. There are some more common types of disabilities that fall under several categories, for instance:
- Dexterity and mobility
- Cognitive and neurological
- Vision
- Hearing
- Speech
- Motion
Considering the broad diversity of disabled experiences, people with disabilities might have difficulty interacting with certain content. Some use a wide variety of assistive software and hardware to connect with technology, and some don’t use assistive tech at all.
Ultimately, we’re not our users. This means our content and design should reflect our diverse, international user base to create accessible, inclusive experiences. Designers can and should build an understanding of what accessible and inclusive content design entails, as they are creating the designed experience of real people.
Note: Effecting change starts with accessible and inclusive content guidelines with a set of shared design practices. Having guidelines empowers you and your team to build better products for everyone. The Web Accessibility Initiative has great general guidelines here.
The Figma plugins you’ll need to create accessible and inclusive content
Without further ado, here’s our curated list of the top Figma plugins you’ll need to create accessible products, with contributions from designers at Chime, LinkedIn, Netflix, and more.
1. A11y
You may have seen the term ‘A11y’ floating around the internet. In keeping with how people in the localization industry love to use tons of acronyms and alphanumeric terms, the abbreviation for accessibility is a11y.
Aptly named, the A11y plugin for Figma is one of the most popular plugins. It ensures text is readable for users by adhering to Web Content Accessibility Guidelines (WCAG).
Using the plugin, you can check the contrast ratio of your entire Figma artboard to preview what it will look like on your website or app.
2. Color Blind
Color Blind is a handy tool that allows you to preview color schemes for people with varying degrees of color blindness. By viewing your designs in the 8 different types of color vision deficiency, you can see how each one would change to suit a person with that type of color blindness.
All you need to do is select your design and the plugin will clone it and create versions with the colors changed. Each copy will be contained within a group that is labeled with the color blindness type.
Expert corner: “Most folks over-index on color blindness and contrast because that’s the easiest thing to test from a design point of view using a plugin (and is the thing designers often think they have the most control over).” Nate Whitson, Senior Principal Designer at LinkedIn. Expanding your design toolkit will enable you to create more accessible and inclusive experiences.
3. Text Resizer
Allowing the user to adjust text size is a WCAG requirement and is supported by all OS and browsers if implemented correctly.
Text is commonly adjusted at least a little bit (up or down) by the majority of people regardless of whether they have a visual impairment, so understanding how your design functions when this happens is key, and Text Resizer allows you to do precisely that.
4. A11y Focus Orderer
This plugin allows you to annotate your designs’ focus/tab order flow quickly. It’s crucial for input types that aren’t cursor based, including swipe-to-focus capabilities on Android and iOS, and any keyboard navigation on a computer.
Generally, it’s left to right and top to bottom, but indicating where this standard flow should be adjusted is a common need to make a UI easily operable by someone not using a cursor.
5. Hemingway
Yes, the Hemingway app has a Figma plugin.
“When I’m in the early stages of content design, like brainstorming, I typically work in a Google or Confluence doc and can easily copy/paste my content into a browser-based tool like Readable,” says Jason Fox, Lead Content Designer at Chime.
He adds: “But at later stages when we’re working in Figma, content can change rapidly and it’s a pain in the ass to copy/paste multiple text elements into Readable and then update them in Figma.”
While the Hemingway Figma plugin lacks the detailed analysis of a Readable report, it serves as a rough barometer for knowing if the content is on the right track.
6. SPELLL – Spell checking for Figma & FigJam
This plugin gives Figma and FigJam a spell-checking superpower similar to that of Google Docs. It constantly checks your Figma or FigJam document for any spelling errors and lets you fix them with a single click.
“SPELLL is our day-to-day plugin to check spelling and grammar mistakes, and it saves much time,” says Akash Solanki, a UI/UX designer who previously worked at ProCreator.
He adds: “designers work really hard to create the perfect UI, don’t let a typo in the live app or website ruin it!”
7. Lokalise
“Lokalise is a plugin that translates for Figma seamlessly,” says Akash Solanki.
Because design-stage localization has become so important, we developed the Lokalise plugin for Figma which, shortly after launch, became our most installed plugin. There’s a good reason for that.
For instance, Withings, a connected health pioneer, managed to achieve a 90% faster feature rollout and make its app available in 190 countries and 11 languages – all thanks to the power combo of Lokalise and Figma.
Note: Make sure to download our complete guide to design-stage localization, where we walk you through exactly how you can use it to build a better experience for a global audience.
The best Figma plugins to help you navigate, organize, and search files
While the plugins in this section aren’t specific to accessibility, they are a great addition to your basic Figma tool set.
We spoke with Adam Glynn-Finnegan, currently a Product Design Lead at Netflix, who shared two Figma plugins he considers essential to his workflow:
“I rely on them nearly as much as the basic Figma tool set. They are all utilities that help navigate, organize, and search your Figma files.”
8. Frame Cards
Frame Cards is a plugin that Adam created last year. It’s a simple tool to help you organize your frames for yourself and give context on your work when sharing with teammates.
9. Super Tidy
Super Tidy is a nifty tool for finding individual elements inside your file. It helps you keep your design tidy by easily aligning, renaming, and reordering your frames based on their canvas position.
Plus, it renames your frames and reorders them in the layers list by their position in the canvas.
10. Mapsicle
Mapsicle is one of the first public plugins, created by one of Adam’s former colleagues at Airbnb.
It’s a neat little tool that allows you to place maps into your mockups directly from Mapbox, with customization options.
Bonus resource: Inclusive Design Illustrations by Microsoft
This resource contains character sticker sheets and illustrations from the Microsoft Inclusive Design toolkit. They are commonly used when referencing Microsoft’s Inclusive Design methodology and the diversity of human abilities and preferences.
Putting together your design toolkit to create accessible products
All the tools listed in this article represent a small sliver of the accessibility work to be done in content design.
Ultimately, this is just about the tools – it can take time to get the details right, so start now and put together a toolkit that will enable you to create customer experiences that foster accessibility and connections.
Further reading
- The magic of Figma: use cases you wouldn’t expect
- Design-stage localization: 3 reasons why it’s the solution for fast-growing, agile companies
- Design-stage localization: The top challenges for localization teams
- Lokalise + Figma – start translating at the design stage and significantly shorten your time to market
- How to shorten your time to market, ensure higher quality translations and decrease the costs of l10n bug fixes by up to 10x with Figma + Lokalise
- Lokalise + Figma integration demo
