UNIT 1
How to use Figma to create User Interface for a Web Developer or Software Engineer to use as a prototype in building Software Application Project.
Activities:
You will follow nine (9) steps to create a login page using Figma Tool.
Phase 1: how to download Figma
Phase 2: basic interface of Figma
Phase 3: Your first project
PHASE 1 How To download figma (file size: 98MB)
Type figma download on google
Click the link www.figma.com
Under desktop app category, select the app for your operating system, I am using windows, so I will click (Desktop app for Windows),
Open the folder where the figma setup resides, double click it and select run
Possibility 1 (launching Figma for the first time)
After installation, it ask you to login with a browser, I select google chrome, sign in with your email.
After successful login, click open the desktop app, a dialog shows, click open figma
A dialog shows, Click do this later
Click I choose free version, click blank canvas
PHASE 2 Basic interface of Figma
Figma user interface when editing a file contains four (4) basic sections: Canvas, Toolbar, Layers panel, Properties panel.
Canvas is the main area, located in the center of the screen. This is the space where you will work.
Toolbar is the bar located at the top of the screen. Here you will find the necessary tools and functions you need to design interfaces.
The layers panel is the area on the left side of the screen. Here all components and layers of the file will be displayed while working on a project.
Properties panel is the area on the right side of the screen, which consists of three (3) tabs: Design, Prototype, Inspect.
Design – here you can view and adjust the properties of all layers: frames, shapes and texts. Prototype – here you will find the settings of the prototype and connections between elements in the file. Inspect – in this tab you can see how to put the individual objects of your project in code. The available formats are: CSS, Android and iOS.
Output of the LOGIN PAGE interface design
PHASE 3 Start your first project (Login Page using Figma)
Requirements (Controls needed to design the interface)
text: login
text: please enter your details
text: username
text: password
text: ********
text: show password
text: sign up
text: forget password?
text: login
rectangle for user name, password, show password, login button
Possibility 2 (if you are already in the environment of Figma)
Click the main menu (the “F” symbol in the toolbar),
Click file -> New design file
Assuming you are in the Figma workspace
Let's us start putting each control in the workspace or canvas
TIP: for now, I will advise you don’t duplicate your
controls, each control you need, select them one by one.
TIP: I love to drop my control on the workspace / canvas,
before dragging it on the frame (although you can drop your control on the
frame directly if you want)
STEP 1: Control: frame
Click region tools (the “#” symbol in the toolbar)
Select frame
Go to properties panel (we have categories like phone,
tablet, desktop,), you can collapse and expand each category
Click phone, select iPhone 14 (click to reduce the size, if you
want)
Double click the label iPhone 14 – 1 at the top and name it
loginPage, press enter key
How to rename the untitled figma file
STEP 2: Control: Login
Click the text tool, (the “T” symbol in the toolbar) type
login
Go to properties panel, in text option, click regular drop
down, select bold, change font size to 24,
To give the text color, ensure you click the text, go to fill
category, click the color box, select the color you want in the slider, click
the color coordinate in the big box, the color selected will be applied.
STEP 3: Control: Please enter your details
Click the text tool, type please enter your details below
Go to properties panel, in text option, click regular drop
down, select regular, change font size to 14
To give the text color, ensure you click the text, go to fill
category, click the color box FFFFFF, to reuse the color in control login,
under document colors, you will see the previous color, click it, the color selected
will be applied also.
STEP 4: Control: Username
Click the text tool, (the “T” symbol in the toolbar), type Username
Go to properties panel, in text option, click regular drop
down, select bold, change font size to 16
To give the text color, ensure you click the text, go to fill
category, click the color box FFFFFF, to reuse the color in control login,
under document colors, you will see the previous color, click it, the color selected
will be applied also.
STEP 5: Control: Username input field
Click the shape tool, (the “rectangle” symbol in the toolbar),
select rectangle
Click the rectangle, on the right, you will see W and H, give
it 295 and 40 (although you can also resize manually, but if you specify the
size, it will make your uniform)
To make the border purple, under stroke option, click the
word stroke or the four dots box, select the previous color we are using. To make
the borders thicker, under stroke, you will see three horizontal lines, type 1,
press enter key.
To make the inside box white, under fill option, click the four
dots box, select white color, the top color of the color box will give you
white
In the layer panel, we can rename the default name of the input
field for username from rectangle1 to txtuser, double click rectangle1 and type
txtuser
To put a placeholder inside the rectangle, use text tool,
type email, drag and drop it inside. Regular, 12
Instead of manually dragging the controls, you can automatically
close the gap between username label and textbox, click each control, hold down
shift key and click the next control, on the right hand side, under mixed, you
will see a gap icon with a number, change the number and see the effect
To make the box have round corners, under Y, H, you will see
a curve icon with a number 0, click the box and type 20 (TIP: place your
pointer on the icon, to see corner radius)
STEP 6: Control: Password input field
Click the shape tool, (the “rectangle” symbol in the toolbar),
select rectangle
Click the rectangle, on the right, you will see W and H, give
it 295 and 40 (although you can also resize manually, but if you specify the
size, it will make your uniform)
To make the border purple, under stroke option, click the
word stroke or the four dots box, select the previous color we are using. To make
the borders thicker, under stroke, you will see three horizontal lines, type 1,
press enter key.
To make the inside box white, under fill option, click the four
dots box, select white color, the top color of the color box will give you
white
In the layer panel, we can rename the default name of the input
field for username from rectangle1 to txtpass, double click rectangle1 and type
txtpass
To put a placeholder inside the rectangle, use text tool,
type email, drag and drop it inside. Regular, 12
Instead of manually dragging the controls, you can automatically
close the gap between password label and textbox, click each control, hold down
shift key and click the next control, on the right hand side, under mixed, you
will see a gap icon with a number, change the number and see the effect
To make the box have round corners, under Y, H, you will see
a curve icon with a number 0, click the box and type 20 (TIP: place your
pointer on the icon, to see corner radius)
STEP 7: Control: Check box
Click the shape tool, (the “rectangle” symbol in the toolbar),
select rectangle
Resize it and give it border purple and fill it with white
color
STEP 8: Control: Sign up
Click the text tool, (the “T” symbol in the toolbar), type
sign up, bold 12, fill it with purple color
Control: Forgot Password
Click the text tool, (the “T” symbol in the toolbar), type Forgot
password?, press ctrl + u on windows, (option + u in mac), bold 12, fill it
with purple color
STEP 9: Control: Login button
Click the shape tool, (the “rectangle” symbol in the toolbar),
select rectangle
Click the rectangle, on the right, you will see W and H, give
it 295 and 40 (although you can also resize manually, but if you specify the
size, it will make your uniform)
To make the border purple, under stroke option, click the word
stroke or the four dots box, select the previous color we are using. To make
the borders thicker, under stroke, you will see three horizontal lines, type 1,
press enter key.
To make the inside box purple, under fill option, click the
four dots box, select purple color
In the layer panel, we can rename the default name of the input
field for username from rectangle1 to btnlogin, double click rectangle1 and
type btnlogin
To put a placeholder inside the rectangle, use text tool,
type Login, drag and drop it inside. Bold, 18
To make the box have round corners, under Y, H, you will see a curve icon with a number 0, click the box and type 20 (TIP: place your pointer on the icon, to see corner radius)
Overall output with the renamed controls
How to save file on figma
Select
File > Save local copy. Figma will download a copy of the file to your
downloads folder.
Comments
Post a Comment