Create an action menu with smart animate in Figma 

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

Наука