Create a SLIDE TO CONFIRM Button in Figma (Easy to Follow Step-by-Step Explanation)
Visit my STORE: https://bit.ly/mavi-design-store
Explore Mavi Design COURSES : https://bit.ly/mavi-design-courses
Download FIGMA for FREE: https://bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: https://bit.ly/figma-professional-plan
Learn how to create a click & drag confirmation button in Figma – you might have seen this when confirming important actions, like payments or even unlocking phones. This is a narrated tutorial with easy-to-follow step-by-step explanation – I’m going to show you the full process from start to finish. Let me know in the comments below if there’s anything unclear!
Steps:
0:00 — The Result
0:21 — Creating the ellipse / arrow
1:37 — Adding “Slide to confirm”, “Release” and “Confirmed!”
3:19 — Setting up the button container (auto layout, background fill)
4:50 — Defining button states
7:00 — Defining interactions
————
© 2022 Mavi Design
Learn how to create / design / build an interactive click & drag “slide to confirm” (slide to unlock) button slider component in Figma – Easy to follow step-by-step explanation tutorial showing the full process from start to finish – Figma tutorial for beginners
