How to animate Twitter's floating action button in Figma?

how to create twitter's floating action button in figma in just three minutes create a circle with a shadow and add a plus icon to it now combine both circle and the icon in one frame now create a smaller blue circle and add the tweet icon to it combine both the icon and the circle in one frame now follow the same step and add two more blue icons for spaces and gif of loading now combine all the icons into one final frame now duplicate our bigger frame and this will become our expanded state and the first one will become our collab state now select all the blue icons that we have scale it down and hide them behind the first white icon that we have rotate the plus icon in the second frame 45 degrees to the left now select both the frames and create component set combine both the frames to each other in prototyping mode add smart animate ease out and 300 millisecond throw in this component on a dummy twitter ui and woohoo that's it

Channel: Akash Yadav

Views: 41,703

Keywords:

Id: 7MQYfqp-Lyw

Length: 0min 59sec (59 seconds)

Published: Wed Mar 02 2022