Figma Slider Animation Tutorial | Interactive Components

In this tutorial, I will show you how to make a Animated Slider Button in Figma with Interactive Components. Also, you will learn how to use Groups, Components, Variants, Prototype and On Drag Smart Animate.

In this video I show you:

00:00 Slider Button UI Design
04:45 Use as mask
06:25 Create Group
07:04 Create Component
07:18 Create Variants
09:30 Prototype

======

Watch my others Interactive Components Figma tutorials:

======

Don't forget to like, subscribe and turn on notifications to watch new design videos and tutorials

[atolagbejoshua]

How did you make the numbers to scroll up to $900 from the text?

[gilangramadan]

woow thank you this is helpful tutorial!

[dabianshyt]

thanks for the tutorial but better without the background music and have narration

[person]

This is cool but there is no way you can drop the scrubber and have it stick in the middle. It'll snap to either the far left or right of the track

[samihahussein]

hello, i followed the video instruction but i have a problem that when i drag the bullet, the line keep changing the color not only the part before the bullet, so do you know how to fix thie problem? thank you for the video

[azimsarah]

How do you get the slider to stop on a number? When you let go, it defaults back to the beginning or end.

[adied]

Hi great tutorial, please could you share the file ?, so i can practice on it please, thanks

[framerfry]

how to animate this double slider in Figma please