Skip to main content
This topic has been closed for replies.
tank666
tank666Solution
March 31, 2023

I suggest that you change the structure of the component to remove the boolean operation from it, because smart animation may not behave as intended.

This is what the component should look like:

Button // (auto layout frame)
    Overlay // (an absolutely positioned frame with the Clip content property checked)
        Text // (with the component's text property applied)
    Text // (with the component's text property applied)

At the Button level, add the background color that should be on hover. Also add a fill to the text that will be visible on hover.
At the Overlay level, add a color that overlays the background (i.e. visible on the button at rest). Add a fill to the text inside the overlay that will be visible at rest.

Now you can add a variant to the component set that will only need to change the height of the Overlay layer. Add an interaction and set your desired animation.

You can see an example file here:

Figma – 31 Mar 23
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
View in thread

7 replies

RizePoint_Product
RizePoint_Product
March 30, 2023

Unfortunately there’s no way to do that with Figma. Assuming that you’ve created the button as a component set, the only option you have for transitioning between states is Smart Animate, and you can only control its easing, not its start/end positions.

If you’re mocking this up for devs, a solution might be to make the animation a gif and embed that in the file for their reference. Or just straight up say “I want this to animate up from the bottom at X speed with Y easing.”

Techlord
TechlordAuthor
March 30, 2023

Well My intention wasn’t about mocking this to devs but actually asking the question on how to do this.

Is there any other way to animate such things?

I sent it as link because I can’t upload files since I am new to forums.

RizePoint_Product
RizePoint_Product
March 30, 2023

In Figma, no.

    tank666
    tank666
    March 30, 2023

    What specifically are you having difficulty with?

    UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
    Techlord
    TechlordAuthor
    March 31, 2023

    Animating ease from Bottom to Top.

    Techlord
    TechlordAuthor
    March 31, 2023

    Ok, Thanks for your help.

    tank666
    tank666Solution
    March 31, 2023

    I suggest that you change the structure of the component to remove the boolean operation from it, because smart animation may not behave as intended.

    This is what the component should look like:

    Button // (auto layout frame)
    Overlay // (an absolutely positioned frame with the Clip content property checked)
        Text // (with the component's text property applied)
    Text // (with the component's text property applied)

    At the Button level, add the background color that should be on hover. Also add a fill to the text that will be visible on hover.
    At the Overlay level, add a color that overlays the background (i.e. visible on the button at rest). Add a fill to the text inside the overlay that will be visible at rest.

    Now you can add a variant to the component set that will only need to change the height of the Overlay layer. Add an interaction and set your desired animation.

    You can see an example file here:

    Figma – 31 Mar 23
    UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
    Terms & ConditionsAccessibility statement