Linear Gradient Percentage Marker

Thought that I’d suggest adding a percentage indicator on the linear gradient colour selector. When I’m adjusting the colours in my linear gradient track, I’d like to know the precise location where my colours are on the track - a feature currently not included.

If the far left of that track is 0, the far right is 100, and I have a colour marker near the middle then I’d like to know if my middle marker is at 50, or 51, or 49. This allows me to be precise with my colours when creating new gradient templates that I can then use throughout my projects.

Thanks

10 Likes

I thought I might add the link to an old Spectrum post from 2017 (yes, two thousand seventeen) also asking about this:
Gradient Fill - Defining location in percentages · Figma (spectrum.chat)

3 Likes

Came here to suggest this same thing. Seems to me a very basic feature that many designers use. I’m hopeful that we’ll see it in a not-so-distant-future release…?

1 Like

YES! please for this feature.
Really irritating you cannot mathematically input the positions for each colour stop in the gradient. With all the other amazing things Figma can do, this seems like an oversight.

1 Like

+1 for this feature, seems basic enough, and still no way to input precise values atm :frowning:

1 Like

+1 for this feature as well. Kinda surprised it’s not here.

1 Like

Hey designers!
I’ve been using Figma for just a few days and it is my new absolute bestie, but there’s one thing that bothers me. When creating a gradient, one of the most basic features is using percentages to place keypoints. In the case of a linear gradient, the beginning would be 0 and the end would be 100. This way you can place keypoints precisely and since I’m a perfectionist I can’t stand having to guess where (for example) 50 is and maybe getting 49 or 51. This is a really basic feature that even Pixlr has (which I recently switched from to Figma) and it’s just a small quality-of-life thing that’s very important. I would like to see this added soon since it would make Figma even closer to perfect!

2 Likes

+1 for sure. This is such a basic feature that I’m surprised it hasn’t been implemented yet.

1 Like

I agree – this feature would be great and prob pretty quick to implement

1 Like

Missing core functionality

This keeps getting missed there are multiple ideas for the same thing with various votes if they were amalgated it would help

shame that this basic functionality is STILL not included. maybe adobe will actually fix it since all we want is the gradient controls from illustrator.

@admin combine some of the sundry posts asking for this feature?

2023 already annnd… nothing. I use the plugin “CSS Gradient for Figma” but It doesn’t work in Stroke, only for Fill.

Displaying gradient percentages is a fundamental function and an essential feature that must be incorporated into Figma.

1 Like

Hi all,

For anyone struggling with this just like myself, take a look at the Precise Gradients plugin.

Hope this helps!

1 Like

Thanks I was thinking there must be a plugin - but it’s annoying the core product relies on the good will of modders for baseline features.

1 Like

Almost 2024 and using Gradients in Figma is still an awful experience.
There’s much room for upgrades like percentage input, stops count, direction change / rotation, using styles and variables etc etc etc.

1 Like

2024 and I cannot reposition a gradient I created because a position adjustment is non-existent.

It appears that the best way to do this is to create it in a 3rd party application and import it, since Figma cannot figure out how to do it.

Hi Bob, the Figma team made some improvements to the gradient tool on February 27, 2024. Here is the link to the details of the improvements: Figma product news & release notes. “Creating beautiful gradients in Figma just got easier. Now you can flip and rotate your gradient with new controls, enjoy smarter defaults, and simply hold Shift to snap.” I hope this helps.

1 Like

thanks. it wasn’t immediate obvious… but the adjustments are not in the gradient control box. they are displayed on the canvas itself when the gradient control box is open.

1 Like