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 – https://tinyurl.com/uxdsubscribe

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 https://material.io/components/buttons-floating-action-button#behavior

The images used in this tutorial were provided by these incredible photographers, check them out on https://unsplash.com/! Thank you folks ❤️
Photo by João Silas https://unsplash.com/@joaosilas
Photo by Cynthia Young https://unsplash.com/@cynthiayoung
Photo by Adrien Olichon https://unsplash.com/@adrienolichon
Photo by Nick Nice https://unsplash.com/@nicknice
Photo by David Jorre https://unsplash.com/@davidjorre

Duration: 00:14:07

source