Figma Support Forum

Scale effect has bugs when using Variants' Interactions

While trying to create a scale effect when a button is pressed, multiple limitations were discovered.

Please refer to this Figma demo outlining each issue

Having a simple color affect when pressed worked fine, as the height and width of the button does not change.

However, if you scale the button (even if you try to keep the container the same size through padding) there are several issues that occur. Please refer to the Figma interactive example above for a demonstration for each of the examples listed here

Example 1: This is an example of a button that only changes the color when pressed.
image

Example 2: This button tries to change the scale (and color) when pressed.
However, the text doesn’t transition smoothly as the button container does.
Also, the button doesn’t stay centered and instead is anchored left during the transition.
image

Example 3: This button also tries to change the scale (and color) when pressed but through an alternative method.
It’s done through a hack, where you instead change the padding and font size proportionately to mimic a scale without actually scaling.
It looks better than the one above (though the text still doesn’t look exactly right), but it is not a true scale and it also has the anchored left issue during the transition.
image

Example 4: This button takes out the auto-layout factor entirely by using a fixed width button inside of a fixed with frame.
This allows for the scaling effect to work, but still shows how the text scaling ignores the smart-animate smooth transition, instead acting as a dissolve.
image

Also, here is a link to view the Figma project file - Figma

Anyone else having this issue or know a workaround for this? Welcoming all input! Thanks!

Has anyone else run into this issue or have suggestions?

Would welcome a Figma support dev to weigh in!