Adobe XD CC Tutorial

Login Screen

In our last article, we learned about How to create a Login Screen using Adobe XD for our Application? In this article, we are going to create Login Screen for our Application. Following is the final image of what we are going to create in this article.

On our login screen, we have our logo on top. Then a rectangular bar for login. Next, we have 4 Social Login Button. Just below the Social login buttons we have "or" shape. Then we have two textboxes 1 for email and another for a password. Last we have Sign In button, and some TextView for opening Reset Password, Activate Account and Sign Up page.

For this article, we are going to use Adobe XD document which we created in our last article. Following is the download link for Adobe XD document.

Dealsatoxyz_Splash_Screen.xdLogin to Download

For our login screen let's first add a new artboard. Rename it to Login. On our login screen let's first add our app logo align it to horizontally center. Now use rectangle tool and add a rectangle just below the logo. Ensure the new rectangle width is equals to the width of the artboard and height is roughly to a text box. For rectangle properties change the fill color to white with no border and shadow. Now we need to add a "Login" text. Select the text tool and add a Login text. For arranging the "Login" text on the top of the rectangle first move Login text with the mouse on the top of the rectangle. Now you can use align tool. Finally, select rectangle and text and create a group. We can add multiple elements in a group so we can move all the elements as a group. For creating a group of selected elements right click and select Group (keyboard shortcut Command + G). Following is the screen image of the current progress.

Now we need to create a Social Login button for this again use a rectangle tool and create a square.  For square properties set the fill color to white and a black border with shadow. Now we are going to use Repeat Grid tool. It is one of the great tool provided by Adobe XD for the prototype.

Repeat Grid helps you to repeat element in a vertical and or horizontal direction. To use it first select your element which you want to repeat and then press Repeat Grid from the property. When you press Repeat Grid then following handles were active for the selected elements.

Now if you want to repeat elements in horizontal direction then use the right handle. Similarly, if you want to repeat elements in the vertical direction the use vertical handle. For us, we want four social square button so we are going to extend right handle until we see four squares.

If you need to change the spacing between elements you can move your mouse over the spacing between elements. The spacing between elements turns to pink. Press left mouse button and adjust the spacing between the repeating elements.

Once you are done with repeat grid then unselect the square. But we are not going to unselect rectangle, Why? Because we want all the four squares as a separate element. For this select your squares and select ungroup grid option from the property.

Now we need to icons for the social square button. For this visit and search for required social icons. Download all the icons and place the icons in the center of each square.

Finally, create a group for all buttons and icons. Why? Because we need to use it on Registration or Sign Up Screen. Now we need to create our "OR" element. Our or element is a combination of two rectangles, text and a circle. For this, we are first adding a circle in the center. Then create two rectangles and arrange as shown in the following image.

In last add a text element in the center of the circle.  Our or element is done, create a group for it. Next, we need to create two text boxes and buttons. Which are very simple and straightforward. Select rectangle tool a create rectangle with width roughly 90% to 80% the width of the artboard and height approx to a textbox. Our first rectangle is ready for email or username. Next, duplicate it for the password. Finally, add some cool icons for email and password. Now we are going to create a black rectangle with the black border and a shadow for Sign In. Arrange as you like and finally add a text for it. Don't forget to convert it into a group. Now add three text items for "Reset Password", "Activate Existing Account" and "New Here? Create Account". Arrange it as shown in the following image. 

Now we are almost done with the Login Screen. Next, we are going to add a background. For the background image download Background of colorful sale labels Free Vector from Following is the vector download page. From this vector file, we are interested in the background. Edit it and grab the background image and use it for the background. We are using a smaller image show we can use a repeater grid. Following is the image which we are using and the final output for our for Login Screen.

In the last article, we showed you how to arrange different element. Now in this article, we are going to arrange elements using Layer panel. In the above image Repeat Grid 1 on the top. It is the background it must be at the bottom, so select it and place it on the bottom. Finally, rename all the elements. It is a best practice to rename everything. Following is the final image for our Login Screen.

Following is the download link for this document.

Dealsatoxyz_Login_Screen.xdLogin to Download

In our next article, we are going to learn How to create a Sign Up Screen using Adobe XD? Also, we are going to reuse some of the elements which we used in Login Screen.

Leave A Comment

Please login to post your valuable comments.