Create floating action menu with smart animate in Figma

Figma is free to use. Sign up here: https://www.figma.com Today we’re going to show you how to make floating action menu in Figma. - Start with 3 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! #Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #shorts #tips #tutorial #design Music copyright: Cinema · FASSounds