Skip to main content
Question

Gradient fill angle


Regi

Hi, I’m seeing an angle on gradient fill, even though I should not. Is it something I’m doing wrong or a bug?

Thanks!

13 replies

JanKragh
  • 77 replies
  • May 21, 2022

Hi @Regi ,

Hmm at first I could not recreate your screen, but I found out. I think its a bug, but I am not an expert on fills and gradients.

When first selecting linear fill you get a usercontrol to control the angle, color, etc. but also a control that is used in other fill-modes, but I dont see what to use for in linear:

If I use the handle and drags it towards the start-color nothing happens at first:

…but then if I release it on top of the start-color I get to your example:

From there on it just gets weird, sometimes I cannot get back to the control, and sometimes the colors are rotated:

Seems like a bug to me, but then again: I’m no expert on linear fill, perhaps there is some kind of reason behind this? 🙂


Svarrie
  • 14 replies
  • May 21, 2022

This is a bug that I’ve reported for OVER A YEAR AGO, and which still has not been fixed. It is incredibly annoying that Figma can’t fix such a core bug making angled gradient styles unusable. The bug stems from the aforementioned usercontrol handle which controls the angle not resetting properly with the gradients orientation when applied to a different shape.

To replicate the bug, create a rectangle with angled gradient from one corner to another like below, note the position of the handle circled orange (shape one).

Now copypaste the gradient onto a new shape that is much wider instead (shape two).

You will notice that the circled handle is bugged, retaining its position relative to the shape instead of canvas, making gradient appear like it goes from top to bottom instead of diagonally from corner to corner.

To reset the gradient to its proper look, simply grab the circled handle and nudge it, it will snap to its intended position making gradient look proper (shape three)

This bug makes angled gradient styles unusable as they appear to be completely wrongly oriented.


JanKragh
  • 77 replies
  • May 22, 2022

Thanks for clarifying @Svarrie 👍 , your response finally make me understand the handle for controlling the gradient angle :

I was assuming than the angle for linear gradients was always 90 degrees relative to the startpoint/endpoint vector, but holding down alt you can control the absolute angle.

I learned something new 🙂


Regi
  • Author
  • 19 replies
  • August 2, 2022

Hi, do you have a link to the bug post? I’d try to bump it. It’s really annoying as this forces to disconnect a color style from any object that is of different shape than the linear gradient is defined on.


Svarrie
  • 14 replies
  • August 3, 2022

I think I finally figured out a workaround for this ridiculous bug.

I made a test file to illustrate the problem, which can be found here: https://www.figma.com/file/KNw5bjXLREjNzZILAG1nSG/Gradient-issue?node-id=0%3A1

As you can see, there’s two gradients defined, “Gradient-1” and “Gradient-2”, as well as shapes they were created on under “source”. The issue becomes apparent on “Gradient-1”, which was created on a wide rectangle shape, and looks completely horizontal on the square to its right despite being defined as going from lower left corner to upper right corner. That isn’t right, is it?

When you click on the faulty gradient under “usage”, the issue is that its “handle” that is discussed in the thread is not at 90 degrees on the square, despite it being at 90 degrees when created on the source.

However, if I create the gradient on a perfect square, as on example on the right, the gradient handle retains its 90 degrees orientation on all shapes it is used on.

I have no idea why the handle doesn’t retain its orientation when created on non-perfect squares, but here you go.


Svarrie
  • 14 replies
  • August 3, 2022

Sorry, can’t find it anymore.


Regi
  • Author
  • 19 replies
  • August 4, 2022

Thanks, the problem I’m having is using a gradient in a design system. Any shape that is not the same as a defined gradient shape for a fill style will have this issue with the gradient handle being not 90 degrees.

E.g. if I define my fill style gradient in a square and my button is of rectangular shape (non-square) then the fill for that button using that gradient style will be incorrect, making me detach the style to correct the handle to 90 degrees…

Making the design system useless as I’d have to update every single button.


I have this too.


MiloW
  • New Participant
  • 44 replies
  • May 9, 2024

So do I.
Anyone knows anything about a solution?
I had had a gradient, then turned it into a style - maybe this is the thing - and now when I edit it, it is positioned like it had been…


  • Figmate
  • 1680 replies
  • May 13, 2024

Hi there, Thank you for reaching out and bringing this to our attention. I’m not completely sure, but it sounds like this might be related to a feature limitation that another community member has mentioned before.

Could you please take a look at this post: Gradients angle control after last update
There’s a workaround and insights mentioned in the thread, we hope those comments help your situation in some way.

If it turns out not to be related, would you mind creating a brief video recording that shows the issue and explains what’s happening? This would really help us understand the problem better. Once we have that, we can look into it with our support team to see how we might be able to assist you further.

Thanks so much for your understanding and cooperation!


j.au
  • 7 replies
  • May 28, 2024

I’ve just discovered this bug with gradient in my design system and it’s super annnoyyyingg… 😦


Ian_Grossberg

I’ve recorded a video example, but I am a “new user” and cannot attach files apparently. I’ve uploaded the vid here: https://youtu.be/E7ThbX_F8rM


  • Figmate
  • 1680 replies
  • June 25, 2024

Hello, thank you for sharing the video with us. I’m unsure, but it may be related to our feature limitations. Would you kindly take a look at this post for a workaround?

If this does not align with the post above and you believe the tools are not functioning as expected, it would greatly help if you could fill out a bug report directly from here:https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001744374
Pease remember to include the following information so that we can take a closer look:

  • Use your Figma account Email.
  • Add support-share@figma.com as an Editor to the affected file and any related library files (this will not affect your billing) and provide those direct links.
  • Please share a recording demonstrating the issue you are facing. Make sure to include the whole window, with the properties and layers panels visible. Expand the relevant layer and select the layers you are having trouble with.

Thanks for your understanding and support!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings