Creating a Login Screen in Figma
Hi, and welcome to this little course on how to create a login screen in Figma. We’ll start by sketching out an initial idea on an iPad, just to get a first sense of what we’re about to create.
In this course we’ll focus on organising elements with consistent spacing. As well as creating components and variants that you can use to effectively generate content. Another final aspect is that we’ll define constraints to make the design responsive.
Alright, let’s go!
Initial Sketch
Before jumping into Figma, we'll make a sketch of the initial idea.
Welcome Screen
Following the wireframe, the first onboarding screen is created. Here are some of the key points:
- Creating an artboard.
- Following a consistent grid.
- Creating layers.
- Creating and organizing components.
Login Screen
To create the login screen we'll learn how to duplicate elements to work more effectively. We'll also learn:
- Adding components from another file.
- Creating variants.
- Working with constraints to make screens responsive.
