menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Channels
Team

Gradient Fill - Defining location in percentages

September 18, 2017 at 2:14pm
The Figma community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Gradient Fill - Defining location in percentages

September 18, 2017 at 2:14pm
Image Hi,
love Figma so far! I'm running into this issue though that I have to re-create a gradient for a button fill and the handling of the location of the gradient colors isn't really precise enough.
Am I missing something or is there no way currently to change the "location" of where the color changes in the gradient?
Cheers Daniel
Show previous messages

January 17, 2018 at 9:31pm
well I was trying to do it from the color picker window, since it seems to snap a little. Maybe was just an illusion :D
I was thinking the slider was snapping to each 1%
Oh interesting? It must be more fluid then that, huh.
whole percentages make sense. As does having some form of manual control over it
yeah, the gradient options have changed. You definitely could specify the stop position in the past :(
closest I can get to any manual control is to setting the values with the inspector
or maybe I’m just remembering wrong? I’m doubting myself now haha
I just could have sworn I learned that gradient stop trick from Rogie (https://twitter.com/rogie) when he was doing some design stream
I’m fairly confident that specific stop percentages weren’t ever in there.
Darn, well sorry for the misinformation folks! The best I could do is to draw other shapes (¼ or ½ the size) & zoom in to get exact stop values.
like-fill
1
like-fill
2
I've definitely drawn specific shapes to help align stops before, but that's not perfect either.
like-fill
1
regardless, close enough is usually close enough to help engineers make it precise via code
like-fill
1
One of the many, many things I still miss from Fireworks…

October 1, 2019 at 3:30pm
YOOOOOO how has this been an open issue since 2017 lets get some positioning!!!

November 13, 2019 at 9:41am
I just got a message from Figma support that this "isn't going to be available in the near future" and I'm crying. All the Smart Animations, Smart Layouts, Smart Everything can't help when the absolute BASICS are not there. And actually, Figma has most of the basics right and better than ever before. But why this ommision?
You have the values in the code! What's the reason to not make it a user input? Surely it can't a technical or UX problem.
Edited
angle and position. how hard can it be?
like-fill
1

November 15, 2019 at 1:34am
Agree it's still painfully primitive for a baseline feature and yet there are resources to rebrand the product (again).
like-fill
2

December 2, 2020 at 8:59am
No news about this basic features?
like-fill
1
Bump (And whilst reviewing this, add repeat as a gradient option like CSS has had for like... the last 10 years)
Please, add the ability to specify gradient percentages. Would also love the ability to reverse a gradient.
Show more messages