Applying Color Adjustment Figma Plugin to Optimize the Design Performance
The plugin helps me save up to 80% of the time compared to manual methods. Optimize the design process on Figma by using the Perceptual Color Adjustment plugin.
Context of approach
Here, I need to design a badge system to use on the Discord server for the dev team at the company (mainly for fun to beautify our internal chat channel). Each badge will have its own unique image along with distinctive colors and effects.
Briefly, the structure of each badge usually includes color-filled shape layers and applies a blur effect to create an overall lighting effect. Additionally, I also use color effects to highlight the main image.
In total, there will be about 8 different color positions
Issue
To do it quickly, I can copy the style of one shape and paste the effect uniformly onto other shapes to avoid the hassle of creating the effect from scratch for each shape. However, since each badge will have its own color, I still need to adjust the color accordingly for each badge.
If done manually, I will have to change the color in 8 positions for each badge. With 35 badges, that’s a total of 280 color changes! Just hearing that already sounds time-consuming, right?
After copying the style from one design and quickly pasting it onto other designs
Solution
Initially, I thought I could do it quickly by copying the style from a sample badge and pasting it onto other badges. But since each badge has its own colors, I still had to adjust the colors to fit each design.
Find a way to change colors in bulk faster
Introduction Plugin
To solve this problem, I discovered an extremely useful plugin called “Perceptual Color Adjustment” (author Jeremy Knudsen). This plugin has the feature to help users change HUE, SATURATION, AND BRIGHTNESS in bulk on all colors present in the selection. The special thing is that the plugin supports color changes for :
- Fill color ✅,
- Stroke color ✅,
- Color effect ✅.
Plugin Figma: Perceptual Color Adjustment
The way I use this
- Step 1: I choose the main frame that contains the entire design of a badge.
- Step 2: Open the Perceptual Color Adjustment plugin from the Plugins menu in Figma.
- Step 3: Then, I adjust the Hue, Saturation, and Brightness parameters to achieve the desired color.
Just pull until it looks good to you, and you’re done.
With this method, I only need to adjust once instead of having to manually adjust each color position.
The method above has helped me optimize about 80% of the design speed compared to the initial method!
Other applications
During the photo editing process, I also use other plugins like Photopea to help me edit photos directly in Figma. It saves me time as I don’t need to switch to other external software.
Plugin: Photopea
Above are the experiences I have applied to optimize the design process on Figma. I hope these shares will be helpful to you in your daily work.
If you find it useful, try this plugin right away and share your experience! If you have any questions or suggestions, feel free to leave a comment! I look forward to hearing everyone's opinions.
Summary of resources available in the article
You might also like


The Importance of Creativity in the Design Process


Master Auto Layout in Figma with This Tutorial

