Create a CONFIRMATION BUTTON in Figma (Tutorial)
ฝัง
- เผยแพร่เมื่อ 20 ต.ค. 2024
- Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
Get the SOURCE FILES for this project ($1.99): payhip.com/b/0...
In this Figma interactive prototyping tutorial, we'll take a look at creating an interactive animated "confirm" / "confirm action" button with four states:
Default
Hover
In progress
Finished
The "in progress" state contains an animated spinning loading wheel (that we'll also create) and the finished state contains a checkmark along with a text that says "confirmed". You'll also be able to set up button text using component properties. This button will help make your Figma prototypes more interactive and improve your project's UX. I will explain everything step by step, which means this tutorial is good for beginners.
Topics: Figma prototyping, interactive animated prototype, figma button, figma animation
---------
© 2022 Mavi Design
Hey people here are tips: Rotate: You have to layer Ellipse rotate, not component and 1. wheel 0º (black gradient on 12:00PM), 2 wheel 90º (black gradient on 3:00PM), 3. 270º (black gradient on 6:00PM), 4. wheel 90º (black gradient on 9:00PM). Prototyping: 1. wheel to 2, 2 to 3 and 4 to 1. everywhere after delay 1ms, smart animate linear and 500ms less or more...
My loading wheel is not rotating when I test in in prototype.. any help?
Bad ass, I wish they taught me that when I took the UX Design online course. I'm totally going to do this on my next project
Hi, the loading wheel isn't playing the animation I present it in prototype mode, I've dragged it from the local components into the test frame I made but instead of it working (spinning), it's just a static picture of the wheel. Any help?
hello I followed each step and the circle does not turn
I think I have to buy the loading spin file...I cant do the spin black-white mixing....it's been 4 hours....I am duck....🥵
What do you mean by black-white mixing?
My loading wheel does not spin.
Same problem here. Not sure what's the problem
@@j.trulyrandom I've solved the problem. You can't select the Component. you should select the layer on layer panel and turn it, like him did on video.
@@JamiltonMacedo Thank you for replying. It did helped but only one time, so weird! It worked once and now stopped working 🤷
@@j.trulyrandom I have same problem. To solve this: when in present mode, press "R" to start the animation
@@xuancuongo9670 thank you! That's definitely solves the problem but wonder why it doesn't work continuously. Probably a bug.
Based on the video tutorial you miss led the viewers. It doesn’t animate like that. Get the facts straight and recreate another video.
I believe you are mistaken, I don’t see how this video is misleading in any way. You do not provide any detail therefore I’m unable to help you. But you can try again using a question and dropping your assumptions - we’re here to learn.
Ok the error is in circle 4 you must place 90 degrees. I did it and it worked