Create an action menu with smart animate in Figma
Вставка
- Опубліковано 29 сер 2022
- Figma is free to use. Sign up here: bit.ly/3msp0OV
Today we’re going to show you how to make an action menu in Figma.
- Start with 4 buttons (56p x 56p). Change the color of the add-new button and rotate the plus icon 45 degree
- Select all buttons and apply auto layout (Shift + A)
- Set spacing between items to 24 and rename the auto layout frame to “action-menu”
- Turn the frame into a component
- Add new variant, and rename variants to “active” and “default” respectively, “property 1” to “state”
- Select the add-new button of the default variant, and change its color back to yellow and set the plus icon rotation back to 0 degree
- Update the spacing between items so the buttons overlap (since each button are 56p tall, set the spacing between items to -56 will them overlap one another perfectly)
- Select the add-video, add-photo and add-post buttons in the default variant, and set pass through to 0%
- Switch to prototype mode
- Connect the default variant to the active variant, and set the animation type to “smart animate”. Adjust the easing to “Ease out back” and set the animation duration to “300ms”
- Connect the active variant back to the default variant, set the animation type to “smart animate”. Adjust the easing to “Ease in back’ and set the animation duration “300ms”
- Duplicate an instance and place it in your design, set constraints to right and bottom
- Click the present button and try it out!
____________________________________________________
Find us on ⬇️
Twitter: / figmadesign
Instagram: / figma
LinkedIn: / figma
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #shorts #tips #tutorial #design - Наука та технологія
Use this community file to follow along: bit.ly/3NQj2sf
We need more shorts like that
Make more of these vedios. They are quite informative
nice but background music in some moments sounds like air alarm, which made me jump up )
A designer's dream is a developer's nightmare
🤣🤣🤣🤣
This is pretty "moderate", the worst part is animation, but nothing outerworldly.
U guys dont need to spam this shjt everywhere
awesome, thank you Figma 💕💕
You're welcome 😊
Please more of these! This was so freaking helpful!!!
More animations with ua-cam.com/video/aMFUuGZ9LEs/v-deo.html
This is fantastic!
I LOVE these
That looks amazing
This is great!
i need full video link pls
More of this please!
One correction I've noticed. Don't make the layer opacity to 0%, instead click the eye icon besides it to unmount it completely. because when you want to make a prototype to one of the buttons inside the floating action button, it will overlap with the (X) button.
just a side note hope it helps someone.
what about just deleted the button we didn't need? Is it will affected the result?
How did it collapse when put in a frame? I can’t seem to collapse after connection
Helpful vdo...thanks
Nice
Nice!
Can we do from right to left ?
How to remove that purple line in present🙂
awesome
Ho do you recorded the prototype preview for this video?
Awesome
How can the icon above be clicked and scrolled?
I tried to recreate this but somehow the animation seems to pop out of the bottom of the screen and not the button itself. Any ideas what i did wrong?
Same here😢
Did you figure it out?
I had the same problem and re-did it from scratch following the video step-by-step. Don't know why but it worked 😂
You have to adjust the constraints of the component inside of the design.
This!!@@daeyx4964
Smooth
can anyone tell me how to connect every buttons there to another page
My button us opening in the bottom side why?
cool
🔥🔥🔥
can’t do this I don’t know why? 😭
There is something wrong with my prototyping- with Smart Animate set to "Ease Out Back", when animating, why is the start location of the animation transitioning from the bottom of the screen as opposed to where the plus sign is placed on the screen?
I don't know what I did differently, but I just redid it on another page and it works now!
I want to add a background blur when the nav menu is open. How do i do that?
You can add a Background Blur Effect to each of those buttons separately. That effect can be found and the bottom of the right Menu
don't see the video captions from laptop, description text overlayer them
oh and from my phone as well
hello i need help in this it says that prototype must have one frame please help me
Hello, you need to put your design into a frame in order to present it in presentation view. Try create a frame using the shortcut F, or right click your design and select "Frame selection".
@@Figma oh thank you :D
👍
I want a link to learn from start to end of figma
I've tried a few times but the animation always opens down and not up. Any guesses where I went wrong?
Hello Johnathon, did you set the constraint to "Right" and "Bottom"?
@@Figma Not John but that helped me, thanks!
Same problem with me 😞
😏
And how do you connect the action buttons to other areas when this is located in a library and you are using an instance of it?
i also wanna know
Too bad this is an un-rewindable short : /
Real question - do developers hate this?
Can u slow down a bit🥲
Hi Palak, sorry about that but we have to go fast because UA-cam Shorts has to be under 60s. Try to re-watch it or check out the written step-by-step guide in the description!
Seriously, for what? I respect the effort for this video, but a developer won't need this for sure. A start frame, an end frame and duration time / curve will be far more than enough.