How to create a floating action button (FAB) in Adobe XD

In this UI design tutorial I’ll show you how to create and animate a floating action button in Adobe XD.
Subscribe –

The floating action button or FAB for short is a very common Android component, so learning to design this component should be really useful for future Android projects. There is a fair bit of subtlety in the way that this component animates, each of the actions move up, scale and fade in. We’ll achieve all of this by making use of component states and the auto animate features in Adobe XD.

FABs can be used for a variety of functions and they don’t always behave like the one we’re creating in this tutorial. Learn more about the floating action button on Googles material guidelines

The images used in this tutorial were provided by these incredible photographers, check them out on! Thank you folks ❤️
Photo by João Silas
Photo by Cynthia Young
Photo by Adrien Olichon
Photo by Nick Nice
Photo by David Jorre

Duration: 00:14:07