How to create a login form in Adobe XD

In this UI design tutorial I’ll show you how to design and animate a login screen in Adobe XD. Download design file here: | Subscribe:

In this video we’re really using the component states to create a flow that the user would follow as they enter their details to login to a website or app. Adobe XD makes it really easy to link together effectively a sequence of states to show how a component or screen can evolve as a user interacts with it.

This design is a little cheeky as its omitting any ‘forgotten details’ button, so you’ve got me if you noticed that. As a UI designer I think it’s really good to spend time creating things from a purely aesthetic perspective, because ultimately it’s our job to make things look as good as possible. That being said, you should NEVER forget the usability of something, so you’d never take a design like this into production.

I hope you enjoyed this tutorial, stay tuned for more Adobe XD and UI design content!

Duration: 00:27:05