Create an action menu with smart animate in Figma

Figma is free to use. Sign up here: 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
Back to Top