UNIT 2

How to use Figma and Auto Layout (Shift + A) to create interface for student module:

Our focus will be:

-       Student result page
-       Using icon8 icons or material design icons (We will use material design icons)
-       Create navigation bar (Hamburger icon and Back icon)
-       Text box using Auto Layout
-       button

TIP: The auto layout does a 2-in-1 job, by creating a frame around your text, which allows designers to create components (like textboxes, buttons, cards, popups etc.)

Ensure you read the previous blog: how to use figma to create user interface for a web developer...

 OUTPUT OF THE STUDENT PAGE INTERFACE

Assuming you are in the Figma workspace

Click the main menu (the “F” symbol in the toolbar),

Click file -> New design file

 

Phase 1 Download icons (you must have internet to do this)

-          Click main menu (the “F” symbol in the toolbar)

-          Select plugins, click find more plugins

-          In the search bar type material design icons

-          Click run (it will download it on your figma workspace)

TIP: If you don’t see the icon you want), you click browse more in the community (it opens a link a new browser for you), click icon button, when you find the one you want, click try it out on the right, it will download on your figma workspace, click run

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)

 

Phase 2 Start the project

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 resultPage, press enter key

How to rename the untitled figma file

Double click untitled in the Toolbar, type resultPage or any name relating to your work

 

STEP 2: Control: Navigation Bar

To insert hamburger icon, click main menu (the “F” symbol in the toolbar), click plugins, Click Material Design Icons, in the search box, type “menu” and press the enter key, it brings the hamburger icon, drag and drop it where you want, click fill, give it color green, click stroke (to color the line), select the previous color (green). Click it, Give W: 44, H: 20

To insert back icon, click main menu (the “F” symbol in the toolbar), plugins, Click Material Design Icons, in the search box, type “back” and press the enter key, it brings the back icon, drag and drop it where you want, click fill, give it color green, click stroke (to color the line), select the previous color (green). Click it, Give W: 44, H: 20

 

TIP: Hamburger icon is a navigational symbol consisting three stacked parallel horizontal lines that appear in the top corner (right or left) of an interface, the main purpose of the hamburger icon is to preserve screen space by hiding navigational elements or links.

TIP: The back page will take the user to the login page

 

STEP 3: Control: Please enter your matric number

Click the text tool, type please enter your matric number

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 section on the right sidebar, click the color box FFFFFF, to reuse the green color, under document colors, you will see the previous color, click it, the color selected will be applied also.

STEP 4: Control: Place holder and Input field using Auto Layout

Click the text tool, type a matric number sample

Click empty space, click the text, press shift + A (it creates an auto layout and change the text to a frame),

To give the box color, click it, click fill, select white

To give the box border color, click it, click stroke, select previous color (green)

Give it round corner radius of 20

To change the placeholder text to green, double click the text, click fill, select green, regular, 12

To add shadow effects to the textbox, select the textbox, Click the Effects section in the right sidebar. The Drop shadow effect is selected by default. To change the direction of the shadow, click the light symbol, you can change the numbers to your taste.

 

STEP 5: Control: Place holder and Button using Auto Layout

Click the text tool, type Submit

Click empty space, click the text, press shift + A (it creates an auto layout and change the text to a frame),

To give the box color, click it, click fill, select previous color (green)

To give the box border color, click it, click stroke, select previous color (green)

Give it round corner radius of 20

To change the placeholder text to white, double click the text, click fill, select white from document region

To change the placeholder text to green, double click the text, click fill, select green, bold, 18

To push submit to the center, in auto layout section on the right sidebar, you will see 9 dotted grid, click the middle dot (others are align right, alight top left etc) (Aliter: click the horizontal three dots, select space between – this can be use if you add icons to your control.