Web Development: How to Create Onboard and Login Screens for a Dating App Template in Figma

How to Create Onboard and Login Screens for a Dating App Template in Figma

Final product image — What You'll Be Creating

In this Figma tutorial you will learn how to create onboard and login screens for a dating app template. Here’s a quick preview of the template in action!

What You Will Learn in This Dating App Template Tutorial:

How to Set Up a Frame and a Simple Grid in Figma
How to Save a Color Style in Figma
How to Add Auto Layouts in Figma
How to Create Components in Figma
How to Prototype in Figma

For more inspiration on how to adjust or improve your final dating app UI you can find plenty of Figma iOS UI kits at GraphicRiver.

What You Will Need:

You will need the following resources in order to complete this dating app UI (but feel free to use your own alternatives):

Dating social illustration concept
Couples on a date - flat design style characters
Born this Way illustration
Bomber Balloon font

1. How to Set Up a Frame and a Simple Grid

Step 1

Create your new file and select the Frame tool (F) from your toolbar.

Focus on the right sidebar and select the iPhone 11 Pro / X template to create your first frame.

Step 2

Before you start the work on the design, let’s set up a simple grid that will make it easier to align elements.

Focus on the Design panel in the right sidebar and click the Layout Grid section to add a grid to your design.

Click the blue icon to access the grid settings. Select Columns from the drop-down menu and then enter the settings shown in the following image.

2. How to Create Buttons for the Onboard Screen

Step 1

Select the Rectangle tool (R) from your toolbar and create a 70 x 30 px shape. Set the Corner Radius to 5 and then click the Fill color wheel and change it to #F5F5FF.

Switch to the Move tool (V) and move your rounded rectangle as shown in the second image. Alternatively, you can enter 16 in the X box and 742 in the Y box to numerically move your shape in the desired location.

Step 2

Pick the Text tool (T) from your toolbar, click inside your frame and focus on the Text section from the Design panel.

Select the Lato font, set the style to SemiBold and the size to 12. Increase the letter spacing to 10% and change the text color to #32323C, and then type in the "SKIP" piece of text. Press the Esc key to switch to the Move tool and place this text as shown in the second image.

Step 3

Use the Move tool to select your rounded rectangle along with that "SKIP" piece of text. Hold down the Alt key and drag a copy of your selections to the right, as shown in the following image. Also holding down the Shift key while dragging will constrain the movement of the copy to a single direction.

Focus on these copies, select the text and change its color to white (#FFFFFF), and then select the rounded rectangle and change its color to #FF5F5F. Because you’re about to use this pink color a lot of times let’s save it as a color style so you can easily access it later.

Keep focusing on the Fill section and click the quadruple dot icon to open the Color Styles flyout panel. Click the Create Style button (+), name your new color style Pink, and then click the Create style button.

Step 4

Select the Rectangle tool (R) and hold down the Shift key while dragging to easily create a 10 px square. Fill this new shape with #F5F5FF and set the Corner Radius to 1.

Switch to the Move tool (V) and place your rounded square as shown in the second image.

Step 5

Drag two copies of your rounded square as shown in the following images. One to the right and the other to the left. Make sure that you’re leaving a 20 px gap between these shapes.

Select the left rounded square and change its color to that Pink from the Color Styles flyout panel.

3. How to Add Content for the Onboard Screen

Step 1

Select the Text tool (T) and click inside your frame. Change the font style to Bold, increase the size to 20 and lower the letter spacing to 5%, and then type in "MEET NEW PEOPLE".

Step 2

Right click on this new piece of text and go to Add Auto Layout (Shift-A) to add a frame around your text. Focus on the Fill section and add a Pink fill to make the borders of the frame more obvious.

Move to the Auto Layout section, increase the Horizontal Padding to 15 and the Vertical Padding to 13. Set the Corner Radius to 5 and then change that text color to white (#FFFFFF).

Step 3

Select the Text tool (T) and add a new text element. Change the font style to Regular, lower the size to 10 and the letter spacing to 0%, increase the line height to 14, and then add some paragraphs, as shown in the following image. Don’t forget to change the text color to #5A5A64.

Step 4

Download this Dating social illustration concept, scale it and place it as shown in the following image.

4. How to Duplicate Frames

Step 1

Click the name of your first frame to select it, and use the classic Control-C > Control-V keyboard shortcuts to duplicate it.

Focus on the new frame, replace the illustration with this Born this Way Illustration, adjust the text and swap the colors used for the rounded squares, as shown in the second image.

Step 2

Select your second frame and duplicate it (Control-C > Control-V).

Focus on the new frame, replace the illustration with this Couples on a Date Illustration, adjust the text and swap the colors used for the rounded squares, as shown in the second image.

5. How to Create the Register Screen of the Dating App UI

Step 1

Click the name of your third frame to select it. Select the Frame tool (F) from your toolbar and click the iPhone 11 Pro / X template to add a fourth frame, as shown in the following image.

Step 2

Make sure that your fourth frame is selected and simply change the fill color to Pink.

Step 3

Select that heart shape from the Dating social illustration concept, copy it (Control-C) and paste it (Control-V) inside your Figma file. Change its color to white.

Using the Text tool (T), add the "FATED" piece of text and place it as shown in the second image. Use the Bomber Balloon font, set the size to 50 and the letter spacing to 5%.

Step 4

Select the Rectangle tool (R), create a 130 x 30 px shape and place it as shown in the first image (X 48 Y 412). Set the fill color to white (#FFFFFF) and lower the Opacity to 10%, and then increase the Corner Radius to 5.

Using the Text tool (T), add the "LOGIN" piece of text and place it as shown in the second image. Use the Lato font, set the style to ExtraBold and the size to 12, increase the letter spacing to 10% and make sure that the color is set to white.

Step 5

Drag a copy of your rounded rectangle to the right, as shown in the first image. Select it and increase the Opacity to 100%.

Switch to the Text tool (T), add the "REGISTER" piece of text and place it as shown in the second image. Keep the font settings as they are, but change the text color to Pink.

Step 6

Select the Text tool (T) and add a new text element. Change the font style to Regular, increase the size to 15 and the letter spacing to 10%, and then type in "user name". Don’t forget to set the text color to #32323C.

Step 7

Make sure that your text is still selected and Add Auto Layout (Shift-A). Focus on the Fill section, add a fill using that + button and set the color to white.

Move to the Auto Layout section, set the stacking to be Vertical and check the Fixed Width button. With a fixed width the size of the frame will not change when you edit the text inside. Increase the Vertical Padding to 16 and remember to set the Corner Radius to 5. Focus on your text, increase the width of the frame to 280 px and place it as shown in the second image.

Step 8

Drag two copies of that white rounded rectangle and place them as shown in the following image. Double click the text inside these elements and easily adjust it as shown below.

Select the Text tool (T) and add a new text element. Keep the font style set to Regular, lower the size to 10 and the letter spacing to 0%, and then type in "FORGOT PASSWORD?". Set the color of this new text to white and place it as shown below.

Step 9

Add one more copy of that white rounded rectangle and place it as shown in the first image. Select the text, change its color to PINK, set the style to ExtraBold, and then increase the the size to 15 and the letter spacing to 10%.

Select the Text tool (T), add a new text element and follow the text attributes shown in the second image.

Step 10

Select the "LOGIN" text along with the rounded rectangle that lies in the back and click the Create Component button from your toolbar.

Select the "REGISTER" text along with the rounded rectangle that lies in the back and do the same thing.

Focus on the left sidebar and switch to the Assets panel. Here you can find and reuse your saved components.

6. How to Create the Login Screen of the Dating App UI

Step 1

Click the name of your fourth frame to select it and then duplicate it (Control-C > Control-V).

Step 2

Let’s focus on the fifth frame. Right click the LOGIN button and go to Swap Instance > Component 2 to easily replace your LOGIN button with the REGISTER button. Select the text inside this component and replace it with "LOGIN".

Select the REGISTER button and swap it with Component 1. Replace the text inside this component with "REGISTER".

Step 3

Remove the "email" text element. Select the REGISTER button along with the white text, move and adjust these elements as shown in the last two images.

7. How to Prototype Your Mobile Dating App Template

Step 1

Focus on the right sidebar and click the Prototype tab. With the Prototype mode active you can establish connections between frames and elements in your design.

Let’s start with the "SKIP" button from the first frame. Select it, click the plus button and simply drag the wire to the fourth frame. Once the connection is created the Interaction flyout panel will open. Set On Tap as the trigger, select a right to left Slide In animation and set the Easing to In and Out. Once you’re done, you can click that play button from to upper right corner of the screen to visualize your animation.

Step 2

Select the other two "SKIP" buttons and connect them with the fourth frame as you did for the first one. Don’t bother to make any changes to the Interaction settings. By default, Figma applies the Interaction settings used for the last connection.

Step 3

Focus on the pagination buttons from the first frame. Connect second rounded square with the second frame and the third one with the third frame.

Move to the other two frames and connect the rounded squares with their correspondent frames.

Step 4

Focus on the "NEXT" buttons and connect them with their correspondent frames, as shown in the following image.

Step 5

Focus on the last two frames. Select the "LOGIN" button and connect it with the fifth frame. This time, set the animation to Smart Animate and keep the rest of the settings as they are.

Select the "REGISTER" button and connect it with the fourth frame.

Step 6

Select the bottom, white text from the forth frame and connect it with the fifth frame.

Select the bottom, white text from the fifth frame and connect it with the fourth frame.

Finally, click that play button to test your animations.

Congratulations! Your Mobile Dating App Template is Complete!

Here is how your dating app UI should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final design and make it your own. You can find some great Figma iOS UI kits at GraphicRiver, with interesting solutions to improve your mobile dating app template.