jaclyntan / figma-color-compass

Choose colors quickly and easily in Figma.

Try it out

Note: This plugin is now a paid resource and closed source on Figma. No further code updates will be made on this repository, however you may still download the existing files to learn and use for your personal development.

---

⭐️ Quickly navigate the colour spectrum with designer-focused accuracy

Instead of eyeballing and colour picking randomly from the entire spectrum, simply feed a base colour to this plugin to generate tints, shades, tones, and complementary colours.

Increase or decrease the step value to hone in on the exact shade you want.

Experiment with different swatches and update elements on the fly directly from the plugin.

---

⭐️ To Use

• Run the plugin from Figma
• Select an element containing a fill, background, or stroke (note groups are not supported)
• Click on the 'Update' button to update the palettes
• Click on a plugin swatch while an element is selected to update a selected element with change a pre-existing fill, background, or stroke.
• Click on the clipboard icon to copy the current colour's hex code
• Update the step value to generate more shades in the palettes

---

⭐️ Notes

• You can now copy the hex code from the plugin by clicking on the clipboard icon
• You can now type in custom hex codes instead of updating through an element on the canvas if no element is currently selected. Note that if an element is selected on the canvas and the hex code is updated manually thereafter, the plugin will default to selecting the colour from the selected element first meaning any manual input will be ignored.
• You can keep clicking on 'Update' to generate random colour palettes based on your previous selection.
• Click on the plus button next to the palette label to add the swatches to your document.
• This plugin will work on any element that is able to display a solid fill, stroke, or background

♡ If you run into any bugs or have any feature requests please submit an issue on Github.

figma-color-compass's Issues

Confusing buttons

In case someone else is confused:

• "Update" button is "Get color from selection".
• To add to swatch Library use Star button. I was clicking (+) button next to swatch library. That + button is for adding colour swatch to Figma design, as other (+) buttons.

I'd suggest to change buttons and texts to avoid such confusion. Good example is Supa Palette plugin , uses clear indicative naming and arrows that indicate export from plugin:

Generate lighter shades

Is there a way to generate even lighter colours? e.g I have a dark base grey #24292E and the lightest generated colour is #E9EAEA, without anything in the #fXXXXX range.

For the moment I take the #E9EAEA value and run the plugin to generate additional shades to achieve the lighter shades.

Investigate ways to preserve a previously selected element's color if no element is selected

If no element is selected, is there a way to default to the previous color used by the plugin?
Current status after digging round a bit: not likely but maybe I'm just missing something.

Clean up code

• Restructure the colorObject so the palettes can be iterated over easily (current ui.html is a mess)
• Tweak calculations of the random palette generator
• Check var declarations
• Comment where necessary
• Use template literals so its easier to read

Consolidate use of the word 'color'

Since we use color it makes sense to change every instance of colour to color.

Add documentation

more sparkles etc.

Allow users to generate palette elements from the UI

Feature idea: make the palette labels buttons so people can click on them to quickly generate an editable palette within the artboard

Investigate ways to fill elements without a pre-selected fill or background

(this may just be a limitation of Figma's plugin api - if so let them know about it)

Add base colour to controls

Currently there is no base colour shown in the palette.

Add it somewhere visible as a swatch.