Figma Slider Animation Tutorial | Interactive Components
32.7K views · 2022-03-28
UI Design
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:
Interactive Hamburger Menu: https://youtu.be/TUy19-AGomc
Interactive Button: https://youtu.be/-BTCL-vHvRA
Radio Buttons: https://youtu.be/k0D1l3lGs_M
Checkbox: https://youtu.be/0jgvOyS3XsQ
Dropdown Menu: https://youtu.be/e3K5ux4hOao
Input Fields: https://youtu.be/wiBarR5SIRA
Progress Bar: https://youtu.be/gIK-07miFOc
Toggle Switch Button: https://youtu.be/N_0X5rb6miY
======
Don't forget to like, subscribe and turn on notifications to watch new design videos and tutorials
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:
Interactive Hamburger Menu: https://youtu.be/TUy19-AGomc
Interactive Button: https://youtu.be/-BTCL-vHvRA
Radio Buttons: https://youtu.be/k0D1l3lGs_M
Checkbox: https://youtu.be/0jgvOyS3XsQ
Dropdown Menu: https://youtu.be/e3K5ux4hOao
Input Fields: https://youtu.be/wiBarR5SIRA
Progress Bar: https://youtu.be/gIK-07miFOc
Toggle Switch Button: https://youtu.be/N_0X5rb6miY
======
Don't forget to like, subscribe and turn on notifications to watch new design videos and tutorials