Week 49 - Accessibility, sound kits and variable guides
This week's five new Figma plugins.
Another week of new plugins, and this issue comes with a nice variety of tools to help you get the most out of Figma…
There’s a Figma plugin to simulate how your designs look for people with color blindness, a library of sounds (like alerts and button clicks) and a super easy way to create style guides directly from your variables.
Keep reading for all the details, plus video tutorials of each plugin!
1. Color Blindness Simulator
Simulate color blindness for your designs.
Accessibility is a huge part of product design (or it should be), and while there are all-in-one plugins that holistically help to design for accessibility, they don’t tend to be free. So plugins like the new Color Blindness Simulator are great, simple tools to test a particular aspect of accessibility - in this case, how your screens will look for people who experience color blindness. This plugin simulates for the 3 main types of color blindness, duplicating your design exactly how it would look.
🎁 FREE
🌈 Simulate designs for main types of color blindness
👯 Duplicates your designs for each type
2. Figma Sound Kit System
Add sound to your designs.
Figma Sound Kit Plugin brings sound to your designs! You can import your own audio or video files directly into your Figma projects, or browse through over a thousand sound files with everything from notification alerts to phone system audio. The plugin’s UI isn’t very intuitive at first, and you have to drag and drop the sound file you want into your canvas (simply clicking on the sound won’t do it). Great for making more realistic prototypes, marketing materials or educational content.
🎁 FREE
🎵 Add sound to your designs
🔊 Instant access to 3 full sound kits, 1000+ sound files
3. Getillustrations
Choose from thousands of illustrations.
Getillustrations is a huge library with over 150 packs of images and illustrations in 9 different drawing styles. All illustrations are fully editable vectors and you can find exactly what you’re looking for via provided keywords, or using the search feature. The free version gives you access to all 150 illustration packs in low-resolution quality, and a limited selection of packs in high-resolution. You can also choose to purchase just one specific pack from $19 and up for unlimited use, or access everything the plugin offers with their $129 yearly subscription.
🎁 FREE for certain collections 💰 $129/y for unlimited access
💟 Mega library of 200,000 illustrations
🔍 Search among different styles and categories
4. MonoMagic
Desaturate frames and vectors.
MonoMagic claims to be the only Figma plugin that offers genuine color desaturation. In contrast to other desaturation plugins, MonoMagic doesn’t just apply a gray overlay to your designs, but actually strips all hues and saturations while retaining their brightness values. This plugin is useful when you need to check your design in true grayscale to ensure elements have the right contrast, converting designs into grayscale wireframes, or simply if you want a monochrome look.
🎁 FREE
🐼 Desaturate your designs for real grey tone
🪄 Supports all hues, saturations and gradients
5. Print Variables
Turn your variables into a visual style guide.
Print Variables is a super easy way to get an instant style guide with all the Figma variables being used by your designs. For this plugin to work, you’ll need to have Figma variables created beforehand in your project. There are tons of videos and tutorials to help you get started if you’re new to variables. Once you’ve created your variables, simply run the plugin and you’ll instantly have a complete and visual style guide of all your design tokens, right in your Figma canvas.
🎁 FREE
🎨 Create style guides of variables
🚀 Super fast and easy to generate
Newsletter brought to you by ‹div›RIOTS.