Hey everyone,
Creating and maintaining color variables in Figma can get slow very quickly. And don’t get me started on the handover to the developers.
That work is important, but a lot of it still feels more manual than it should be.
So I’ve been working on a Figma plugin called ColoRamp.
ColoRamp starts with a single seed color. From there you can try different harmony modes, adjust things like chroma, lightness, tint and temperature, then generate ramps from the result.
The part I care about most is the design-system workflow after that:
- create ramps for primary, secondary, accent, neutral, success, warning, danger, etc.
- fine-tune each ramp with steps, lightness range, hue shift and saturation shift
- create or update Figma variable collections
- map primitive colors to intent tokens
- add code syntax for variables, like CSS variables or SCSS
- export variables/styles as JSON if needed
So it is not really meant as a “random palette generator”. It is more for getting from a brand color to a structured Figma color system faster, while still letting the designer make the final decisions.
I’d love feedback from people who work with UI kits, design systems or brand palettes in Figma.
A few things I’m wondering:
- Does this workflow match how you think about color systems?
- Would you want to start from a raw hex color, an existing Figma variable, or both?
- Are primitive variables and intent tokens the right split?
- What would be missing before you’d use this in a real file?
Plugin: https://www.figma.com/community/plugin/1591485204476106346
Website: www.coloramp.ch
Thanks.
Any bugs, feature requests or “this makes no sense” feedback would help:
support@coloramp.ch