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

September 19, 2017 at 1:18am
oops not that one
like-fill
2
you can set the position of the gradient stops to the right of the hex/rgb/etc values
TIL!
like-fill
1
Also, if you are a Sketch user you can use 1-10 keys to position your gradient stops. Not quite as nice as Figmas exact values.
like-fill
1
Hello again,
Sadly this only changes the alpha value of the color, not the location for me.
Is this a bug?
like-fill
1
The field to the right of the color value is for changing the alpha, not the position. I think that the current UI would need some rearranging if they were to implement positioning for gradient stops. (As it would not be intuitively obvious that the field to the right of the color value is alpha for some color styles, and position for others.)

January 17, 2018 at 7:46pm
🆙 Just started noticing this today :( The CSS that's outputting is getting decimals and off by a few percentage points from what I want it to be. For example:
background: linear-gradient(90deg, rgba(222, 222, 222, 0) 0%, #DEDEDE 52.29%, rgba(222, 222, 222, 0) 100%);
The 50% is 52.9% 😢
how are you trying to position it at 50%?
There's not a way to manually set position is there? It's just estimating right.
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
Show more messages