4.1 Sign Up

In the Figmaster - Lessons Figma file, open the 4.1 Sign Up page.

Introduction

In this chapter, you will learn how to use the components and styles we created to design a simple sign up page. We'll use auto layout for the entire page so it will stretch accordingly while the page width will be resized. You'll also learn how to work with background images.

Step 1. Page

  1. Open the frame tool (F).
  2. Create a frame with Macbook Pro size, 1440x900 px (Desktop > Mackbook Pro - in the Frame panel on the right).
  3. Rename the frame to Sign Up.
  4. Set the page's Fill to Neutral/10.

Step 2. Image Background

Part 1. Background

  1. In the Image Background frame I've prepared for you, select the Image layer inside.
  2. In the Fill panel, click on a plus icon to add fill. The linear gradient will appear above the Image in the Fill panel.
  3. Click to open the Linear gradient settings.
  4. In the top right corner of the Linear gradient settings, click on the Linear dropdown.
  5. Select Solid and close the color settings.
  6. Change the color to #000000 65%.

Part 2. Logo

  1. Select the Figmaster DS logo instance I've prepared for you.
  2. Move it inside the Image Background frame.
  3. Press ALT + H to align it horizontally.
  4. Press ALT + V to align it vertically.
  5. Having the logo selected, in the Constraints panel on the right, set width and height property to Center - Center.

Part 3. Adding it to the page

  1. Move the Image Background frame to the Sign Up frame on the right.
  2. Press ALT + A to align it to the right.
  3. Press ALT + V to align it vertically.

Step 3. Form

Part 1. Title

  1. On the canvas, create a text layer with Welcome to Figmaster text inside.
  2. Set its text style to Heading/M.
  3. Set its color to Neutral/100.
  4. Press CTRL + ALT + T to align the text to the center.
  5. Duplicate the text layer 16 px to the bottom.
  6. Change the text to Register your account.
  7. Change the new copy's text style to Text L/Medium.
  8. Change its color to Neutral/90.
  9. Select both text layers and group them (SHIFT + A).
  10. Rename the group to Title.
  11. In the auto layout settings, set the alignment to Top - Center.
  12. Press Enter to select the text layers inside.
  13. Change their Resizing (width) property to Fill container.

Part 2. Inputs

  1. Grab the Input component from the Assets panel and drop it on the canvas 32 px below the Title group.
  2. CTRL + click on the Input helper text inside the Input instance.
  3. Press CTRL + SHIFT + H to hide the layer.
  4. Select the Input instance and duplicate it 16 px to the bottom two times, so there are three Inputs in total.
  5. In the first Input at the top, change its label to Full name and Placeholder to John Doe.
  6. In the second Input, label to Email and placeholder to john@doe.com.
  7. In the third Input, change the label and placeholder to Password.
  8. Select all inputs and group them with auto layout (SHIFT + A).
  9. Rename the group to Inputs.
  10. Press Enter to select all Inputs inside.
  11. Set their Resizing (width) to Fill container.

Part 3. Buttons

  1. Grab the Button component from the Assets panel and drop it on the canvas 24 px below Inputs group.
  2. Duplicate it 32 px to the bottom.
  3. Grab the Dropdown Menu Separator from the Assets panel and drop it between buttons.
  4. Select both Buttons and a Separator.
  5. Group them with Auto Layout (SHIFT + A).
  6. Rename the group to Buttons.
  7. Press Enter to select all elements inside.
  8. Set their Resizing (width) property to Fill container.
  9. Resize the group to 248 px in width.
  10. Change the top button's text to Create Account.
  11. Select the second button and change its instance properties:
  12. Content to Icon Text.
  13. Type to Outlined.
  14. Change its text to Continue with Google.
  15. Change its icon to Icon / GoogleLogo.

Part 4. Log in text

  1. Create a text layer 32 px below the Buttons group with Already have an account? Log in text inside.
  2. Apply the following properties to the text layer:
  3. Text style to Text M/Medium.
  4. Text align to Center.
  5. Already have an account? text color to Neutral/90.
  6. Log in text color to Primary/Main.

Part 5. Grouping it all together

  1. Select Title, Inputs, Buttons and the text layer.
  2. Group it by applying auto layout SHIFT + A.
  3. Rename the group to Form.
  4. Press Enter to select all elements inside.
  5. Set their Resizing (width) property to Fill container.
  6. Resize the Form group to 320 px in width.

Step 4. Finishing touches

Part 1. Wrapper

  1. Select the Form group and group it.
  2. Apply the auto layout.
  3. Rename the group to Wrapper.
  4. In the auto layout settings, change the alignment to Center - Center.

Part 2. Adding it to a page

  1. Move the Wrapper group inside the Sign Up page on the right.
  2. Press ALT + V to align it vertically.
  3. Resize the Wrapper group to cover the entire white space on the right.
  4. Select the Sign Up page and add an auto layout.
  5. Press Enter to select both elements inside.
  6. Set their Resizing properties to both Fill container.
  7. Resize the page's height to be 900 px again.

Great job! Now you can test the layout and resize the page in width and height. You can also select the Image background group and press Arrow Right to switch its places with the Wrapper group if you prefer to have the form on your left. You can also enable the helper text for the Password input to see that the form will stay in the center of the Wrapper without resizing the page.

Do you see how now nice and responsive it is?

Let's practice it in the next lesson.

PreviousNext