Arrange hues
<p>Arrange color hues on a hue ramp and see which hues are used a lot and where there are gaps. Originally created to compare competitor brand colors and discover opportunities.</p><p><br></p><p><strong>How to use:</strong></p><ol><li>Select layers of colors you want to arrange.</li><li>Run the plugin.</li></ol><p><br></p><p><strong>Limitations:</strong></p><ul><li>Can't select more than 50 layers. You will have to split it into two runs if you have more colors to arrange.</li><li>Works only with rectangles, ellipses, polygons, stars and vectors.</li><li>Won't work on layers with gradients or multiple fills in it.</li><li>If a selection has some non-compatible layer types, the plugin will just ignore those layers and still arrange the compatible ones.</li></ul><p><br></p><p><strong>Future release ideas:</strong></p><ul><li>Arrange colors based on saturation levels too.</li><li>Probably a UI to control the size of the swatches.</li><li>Show count of color swatches with same hue value (it's overlapped in the current version).</li></ul><p><br></p><p>---</p><p><strong>Credits:</strong></p><p>Used <a href="https://stackoverflow.com/a/6179495" rel="noreferrer noopener nofollow ugc" target="_blank">Marco Demaio's rgb2hsb function</a> to get hue values from Figma object RGB values.</p><p><br></p><p><strong>Got more ideas or doubts?</strong></p><p>Connect with me on <a href="https://twitter.com/anveshdunna" rel="noreferrer noopener nofollow ugc" target="_blank">twitter.com/anveshdunna</a></p>
Plugin Preview
About this plugin
Arrange color hues on a hue ramp and see which hues are used a lot and where there are gaps. Originally created to compare competitor brand colors and discover opportunities.
How to use:
- Select layers of colors you want to arrange.
- Run the plugin.
Limitations:
- Can't select more than 50 layers. You will have to split it into two runs if you have more colors to arrange.
- Works only with rectangles, ellipses, polygons, stars and vectors.
- Won't work on layers with gradients or multiple fills in it.
- If a selection has some non-compatible layer types, the plugin will just ignore those layers and still arrange the compatible ones.
Future release ideas:
- Arrange colors based on saturation levels too.
- Probably a UI to control the size of the swatches.
- Show count of color swatches with same hue value (it's overlapped in the current version).
---
Credits:
Used Marco Demaio's rgb2hsb function to get hue values from Figma object RGB values.
Got more ideas or doubts?
Connect with me on twitter.com/anveshdunna
Plugin Details
Version | 1 |
---|---|
Created | July 27, 2022 |
Last Updated | August 5, 2022 |
Category | shapes-colors |
Creator | Anvesh Dunna |
Stats | 159 installs, 11 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Editor Types:figma
More Like This
Discover other plugins in the shapes-colors category.