Creating gradients based on color styles

Hi @Amir_Binenfeld

Ive noticed this issue has been closed and wondered if there has been a solution or new tool I’m not aware of.

The original issue…

Need:
Figma doesn’t allow to use of color styles for gradients. this is very non-scalable and creates issues when the user wants to bulk change the color of gradients.

Proposal:
Give an option to create a gradient-based on color styles and the option to see and alter the colors from outside of the element your selecting (from the “Selection Colors” section

I would also find this very beneficial .

Continuing the discussion from Create gradients based on color styles:

Hey @Martin_Hill, unfortunately - no solution yet 😢. The only solution is to create a color style from a gradient but that cause a lot of limitations on using the gradients

Thats a shame 😦 Any ideas how we can get this up voted.

@Martin_Hill I think the only way is to post it on different forums

Just, so not closing the circle on a design system

Not only that, but color styles should be nestable. For an example: I can create a color style that uses multiple colors. One base color and one darken color on 20% opacity. That would be wonderful to automatically make darker/lighter shades of my primary color.

Gradients are similar to this since they are colors composed by other colors and I’d love to have a gradient with my primary to secondary for an example.

This would save so much time and should make design systems more complete…

I do think it would be really helpful, as the way we create gradients today is basically using hex-codes from the colors that we already use in our palette. Would also propose to add gradients with more options, that can be used as a style. Would love to enter where color 1, 2, 3 etc. is placed (in % - like illustrator) as well as gradient rotation (in deg).

Using color stops and toggling between hex, HSB, RGB, HSL, etc. is really clunky… it would be so much faster to create gradients if we could use saved color styles. Please make this happen, Figma!

Also it causes messiness when selecting a frame and viewing the “selected colors” panel in the right sidebar. Seeing all of these un-saved colors being used is counter productive to using a design system.

Every few months I come back to the forum hoping there’s been movement on this issue but still nothing. Has there been any official response from a Figma team member? This is a really annoying issue that has such a straight-forward solution, I can’t believe it still hasn’t been resolved.

I’m very surprised too that gradients based on color styles are still not implemented.
Every time we change a style color we have to go through hundreds of gradients manually to change them. This is such a no-go for a professional tool and I really hope this is going to be implemented soon.

Would be great to implement this. It would solve the problem of gradient colors not being able to be editable globally and also make the initial selection much easier

The color picker is in even a worse situation considering this request. The predefined color styles are hidden under the “library” tab with the latest update, and are unavailable when applying a gradient. So, let’s say you want to create a gradient that’s made of two color styles, you first have to create two rectangles filled with the desired colors in your design system and you have to use the color picker on these rectangles to create your gradient.

Since Figma is now focusing on the developers side, I will try to define what’s needed, in terms of CSS (and a little bit of SCSS)

:root {
  --color-1: #ff0000;
  --color-2: #0000ff;
}

Let’s say these are the colors in our design system. everything else will be defined by these variables and will automatically change when these values change.

.foo {
  background: linear-gradient(to bottom, var(--color-1), rgba(var(--color-2), 0.5));
}

Which should look like:

And in the color picker,

• if we want to use a custom color it can be like this:
  

  

• if we want to use a color style from the library, it can be like this:
  

  

Please think about this 🥺

Keeping this alive because I thought this would be a fairly obvious feature.

Any updates regarding this topic from Figma? I agree this is quite hard maintaining for design systems, where you need to create a lot of unnecessary styles just to have them as gradients.

Love the idea @Recep_Kutuk mocked up!

This is a must-have feature. Please implement it.

any updates?

this good. ✋

Hey all what is the status of this? Something like what @Recep_Kutuk suggested back in Jun 21 would be rad.

Yes please add this feature! This is literally a flaw in an otherwise well designed system.

This is one of the most needed features at the moment. It’s hard to believe you added so many nice features like variables support (great!) but there is still no basic thing like this.

Hi, I’m hoping there is a quick solution to this as it seems like a basic requirement. I’ve built a custom gradient and want to save it to my library, Is there a button somewhere that I can press (next to the gradient) allowing me to do this?

Generally the UI seems pretty good but this is a glaring omission IMO!

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

Hi all,

I am new to Figma but I have a question is it possible to creating gradients based on colour styles, so no is it an idea to create this?

You cannot do it with variables, but definitely can with some layers instead.