Floating Action Button (FAB) | Figma Interactive Components
Вставка
- Опубліковано 27 лип 2024
- In this tutorial, I will show you how to make a Animated Floating Action Button (FAB) in Figma with Interactive Components. Also, you will learn how to use Groups, Components, Variants, Prototype and Smart Animate.
In this video I show you:
00:00 FAB UI Design
05:46 Create Group
06:21 Create Component
07:47 Create Variants
08:32 Prototype
======
Watch my others Interactive Components Figma tutorials:
Interactive Hamburger Menu: • Hamburger Menu Animati...
Interactive Button: • Figma Interactive Butt...
Radio Buttons: • Figma Interactive Comp...
Checkbox: • Checkbox | Figma Inter...
Dropdown Menu: • Figma Dropdown Menu Tu...
Input Fields: • Figma Interactive Comp...
Progress Bar: • Figma Progress Bar Tut...
Toggle Switch Button: • Figma Toggle Switch Bu...
======
Don't forget to like, subscribe and turn on notifications to watch new design videos and tutorials - Наука та технологія
I'm enjoying watching your tutorials. Looking forward to more to come! Thank you!
Hi!😃 I’m glad to hear that, feedback like this makes me motivated to keep making more videos🤩 Thank you so much🙏 Did you like the latest video? Which tutorial do you want to see here on the channel?😀 Have a great week!
Thank you! Very helpful! :)
Hi!😃 I’m glad to help! Thank you so much for the feedback! Have a great weekend!
I’ve been looking for a video like this for over a month - none have been so straightforward as this one seems so I’ve spent valuable hours trying and still I didn’t manage to create an animated FAB, unfortunately. Because I’m still learning Figma in other videos there was a lot of steps they missed out on or assumed one would know so it was challenging. I’ve only just watched this one but I have a feeling that when I go to apply this in my prototype it’ll work bc you make every step so clear. Thank you in advance! I think I’ll cry of excitement and relief once I’ve got my animated FAB ! 🙈😅✨💗
Hi! 😅 I’m glad to hear that, feedback like this makes me motivated to keep making more Figma tutorials.😍 Let me know if your prototype worked.🤩 Have a great weekend!
@@ChinskDesign I did it today and it worked (!!!!) I held my breath and it was beautiful 😍So grateful for your tutorial! Enjoy your weekend!
Very good! 🤩 What do you want to see more on the channel?
Thank you so much🔥
Hi!😃 I’m glad to help! Thank you so much for the feedback! Have a great week!
THANK YOUUUUUUUUUUUUUUUUUUUU
Glad to help!🤩 Thank you so much for watching! Have a great week!
Thanks. Great job. But, in component 1 You can hide circles with "eye" instrument)
Thanks for the feedback and tip! Have a nice week!
I tried this with an element in my prototype but when the state changes the variant shows far from original place of the variant one, why is this happening and how to fix it?
Hi there, thank you so much for this tutorial! but can we actually click the individual floating buttons because on the page it seems to be transparent until we click prototype. Please help me out :(((
Awesome tutorial! Where is the chill music from?
Hi!😃 The songs are from UA-cam, their names you can find in the description of the videos 😉 Watch the other videos on the channel for more tutorials and cool songs 😃 Thank you very much!🙏🤩
Is it automatic when the mouse leaves when you choose to move from the top right to the back of the pen
Hi!😃 Sorry I did not understand. What do you need to do?
I don't know why but it doesn't work here. :(
Hi! 😀 Which step didn’t work?
Hi Gabriele! Did it work? Do you need help?
Hi Gabriele Alves 🙂 Did it work?
@@ChinskDesign you are really responsible!
Thank you for the feedback!🤩 Are you enjoying the content of our channel?