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:
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.
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.
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.
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!
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.
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:
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.
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!
Learn Figma Fundamentals
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post