Home > User Experience > Figma step by step tutorial part 1 – Building a Login/Sign Up Screen | by Jeffrey Lee | Jul, 2021

Figma step by step tutorial part 1 – Building a Login/Sign Up Screen | by Jeffrey Lee | Jul, 2021

Figma step by step tutorial part 1 – Building a Login/Sign Up Screen | by Jeffrey Lee | Jul, 2021


Beginner friendly tutorial teaching you how to design the Login/Sign Up screen and the design thinking behind

Hi! I am Jeffrey, a product designer in 🇭🇰Hong Kong working in Fintech startup. I see a strong demand in Figma tutorial recently and therefore I am writing a Figma tutorial series here sharing my knowledge of using Figma as a design tool. Hope this helps 😄

Tool should always comes in second when it comes to design, your design thinking is what matter most 💪💪💪

Words to beginners, don’t worry if you have never used Figma before, this tutorial is absolutely beginner friendly 🤝.

To start off, let’s sign up an account on Figma! If you’re Mac user, I would suggest you to download the Figma Desktop app from the App Store as it is faster from my personal experience.

Create a new Design file by clicking the + button next to the draft button on the left panel. Once you have created and opened the design file, this is when you see the UI for the first time.I know at this point you might be confused by different panels in the screen but we’ll learn more along the way.

Before we start designing the UI, it is very important that we are clear about what we are designing and why we are doing it. This rule applies to every design you do in the future.

We are going to design the Login/Sign Up screens for a fitness activity tracking app. (Not all apps have the Login/Sign up screen at the start screen. In fact, most apps tend to ask user to Login/Sign Up at the right touch point to smoothen the experience) Some examples we see daily are e.g. Transport apps ask for Login/Sign Up when you want to bookmark your favourite route, eCommerce sites ask you to Login/Sign Up when you checkout etc.

There are also some apps that requires you to Login/Sign Up first before you can start using the app such as Banking Apps, Music Services, Social Networks etc. Make sure you consider what’s the product you’re designing and who you are serving before you start.

Why we are doing it?

The reason why we need users to Login/Sign Up before using the app is because of personal privacy and data storage. The system require users to set up an account in order to store their information and fitness data. It would also be useful for ranking, user communication etc.

How should we do it

There are few typical Login/Sign up methods commonly used these days and each have their advantage.

  • ✉️ Email (Good for user communication but user may create different accounts to earn referral reward)
  • 📞 Phone Number (Good security but user may have difficulty receiving their OTP if travelling using another phone number)
  • 👨‍👩‍👧‍👦 Social Account (Quick and Easy but may not suitable some apps which requires extra security)

For this fitness tracking app, we are going to provide email and social accounts as the Login/Sign Up method since it doesn’t have high security requirement and to also cater middle aged users who don’t have social accounts.

At this point, as we are pretty clear about what we are designing and how we want to do it. It’s time to visualise the design with wireframe.

Let’s build a frame in Figma by pressing A or the # button on the tool menu (top left). Depends on which size you want to use (ask your engineer or check the device stat of your target audience), choose the screen size from the right sidebar. In this case, I’ll go for the iPhone X (375×812).

Here’s your very first canvas, TA-DA✨!

Next, before we add visual elements to the frame, let’s add the iPhone elements to it first incase the core buttons/control overlaps with those elements. You don’t want the button overlaps with the home button and make it unusable, isn’t it?

Luckily, we don’t have to draw it ourself. One of the good thing about Figma is its big community where people shares their work/resources for free. You can simply copy & paste the element to your file.

Simply copy the navigation and home tab should be good to go. Next, we set some basic guideline in the frame to make sure our design is neat and tidy.

Drag the ruler directly to create 4 guides. 44px for the top, 34px for the bottom and 24px safe area from the left and right.

Next, it’s time to thinking about what we want to present in the start screen (login/sign up screen). In the login/start screen, I am going to include the followings:

  • The Logo
  • The tag line explaining the company’s/app’s value proposition
  • Hero image to make your user feel related
  • Language switcher (to accommodate people who don’t understand the language, can ignore that if you’re only targeting local users)
  • Login/Sign Up buttons (to separate new/existing users as they will go through different flow)

Now, let’s create a wireframe to get a look & feel of the app! 🔥🔥🔥

First of all, add background colour to the frame by clicking it and add a colour from the Fill section in the right panel.

Then, add the Sign Up and Login button by pressing T or click the text icon. Click on where you want to add the button and type the button name.

I have create two buttons. First one, the Get Started button as the 1️⃣primary button. The second one is the 2️⃣Already have an account? Log In button as the secondary button.

Right now, they are just two lines of text only. To make it a button, right click on the text layer and click Auto Layout. Then, simply add a colour in the fill section on the right and add extra paddings by dragging the item or enter the padding from the Auto Layout session from the right.

To tidy up the buttons, add an extra auto layout by selecting both buttons and add another auto layout again (same trick as above). Fill it with a white background which you’ll find it useful later when we add the background image. By now your later should look like this.

To make it a complete UI, we are going to drag and drop the logo, background image and touch up the colours and fonts.

Last by not least, we add a little bit of corner radius to make the buttons less edgy. You can do that by controlling the value in the top session on the right.

For the image, you can use Unsplash to download the royalty free images. There is a built-in plugin for you to download in Figma too.

What you’ve learnt today

Congratulations! You just completed your very first UI. Here is a quick recap of what you’ve learn today:

  • Create a design file (click + / New in the draft tab)
  • Create a frame (click A / # button from the top left)
  • Adding elements to your design file from Figma Community
  • Set Guides (drag to create guide directly from the ruler)
  • Create Text (click T / Text button from the top left)
  • Create Buttons (Right-click > Create auto layout > Fill)
  • Basic Styling (Corner radius, changing colour and fonts from the right hand side panel)
  • Add image (Drag and drop)

Resources

Feel free to download my tutorial file from the link below.😀

What’s next

For the upcoming part 2 tutorial, I am going to share the screens after user click either login/sign up. It includes input fields, social buttons, user flow switch etc.

I’ll consider adding some prototyping tutorial in part 2 as well, stay tuned📺! If you find this tutorial helpful, don’t forget to clap and share this article for me! Thanks All!!!



Source link