Web Development: Top 5 Figma Plugins for Color Management

Sunday, September 29, 2019

Top 5 Figma Plugins for Color Management

In this post I’m going to take you through what I think are the top 5 color management plugins for Figma.

I’ve gone through an evaluated every single plugin that Figma currently has to do with color, and these are the ones I think are going to help you out the most in your work. If you haven’t worked with Figma plugins before, take a look at the bottom of this quick tip for instructions on how to install and use them:

UX

6 Figma Plugins to Give You Design Superpowers (and How to Use Them)

Joanna Ngai

Video: 5 Color Management Plugins

In this video I’ll show you each of my 5 top plugin picks, explaining how they’ll make your life easier and demonstrating how to use them.

Here’s a quick run down of the plugins along with brief explanations.

1. uiGradients

Publisher: Kamal Nayan

uiGradients is a brilliant Figma plugin. It makes it really easy to browse through a library of pre-created gradients and apply them to any elements you have in your design.

2. Image Palette

Publisher: Matt DesLauriers

The second Figma plugin on our list is Image Palette. This plugin uses any image that you select and generates a color palette from it. There are actually a few alternatives to Image Palette–other plugins which do the same thing in a slightly different way–but for me Image Palette is the best.

Extra: Unsplash

Publisher: Unsplash

As a little sidenote, the Unsplash Figma plugin is the perfect complement to Image Palette. Use it to grab free images and insert them effortlessly into your designs. Once an image is on your canvas, use Image Palette to extract the colors from it to use in your design!

3. Color Designer

Publisher: Wojciech Banaś

Color Designer is plugin which helps you take a lot of the guesswork out of color management. Select your base color then let Color Designer suggest tints (variants of your color with white added), shades (variants of your color with black added), and other colors which will harmonize with your base according to various types of color theory.

4. Color Contrast Checker

Publisher: Tiffany Chen

This Figma plugin helps you ensure you have enough contrast between your foreground (specifically text) and your background. This is vital for accessibility. Users can experience all manner of visual impairment and without a tool to check your designs it can be difficult to know how they’d fare with your work.

Color Contrast Checker not only warns you of combinations which don’t meet accessibility requirements, but its tools also help you create pairings which do.

For more details on the kinds of visual difficulties users might have with your designs, take a look at this comprehensive guide:

Accessibility

Accessibility Basics: Designing for Visual Impairment

Graeme Fulton

5. Color Blind

Publisher: Sam Mason de Caires

The final color management plugin on our list is Color Blind; a Figma plugin which works very well with the Color Contrast Checker. It takes the colors you’re using in your design and shows you how users with various types of color blindness might experience them.

If you’ll excuse the pun, it can be a real eye-opener to see how your designs might look to others, and it will definitely make you think differently about the color palettes you use.

Conclusion

Figma plugins haven’t been around for very long, but there’s already a huge catalogue of plugins available! I highly recommend you install the color management plugins I’ve shown you here–I look forward to hearing your experiences with them!