By on

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


TIP: The output of your interface largely depends on your creativity and what you feel about the designs. Try to explore the menus in the Figma environment. Remember, that it might look difficult at the beginning, but it will be become easy as you progress and at the end. All the best!

PHASE 3 Start your first project (Login Page using Figma)

We will focus on web application using mobile frame

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

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



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.

How to save figma file as pdf

tip: This will enable your share your UX/UI design with your client
Simply select the mobile frame title, scroll to the bottom of the Properties Panel on the right side, pick the new PDF option, click export login, choose a location and click the save button. Double click on it, to open it

To access your file
Anytime you open figma, since you log in with your email, all your works are automatically saved on the cloud.
TIP: Remember the email you log in with

Comments

Post a Comment

Popular posts from this blog

By on
Image
   DATA STRUCTURE WITH C++ PROGRAMMING USING STACK PREREQUISITES TO IMPLEMENTING STACK IN C++ We will need to understand how to use some of the constructs in C++ that makes up the implementation of stack in C++ against. And this concepts will also help you in developing other codes and to debug or understand the C++ codes in a company's code bank or to interpret a boiler plate code (a ready made code). Some of these constructs or concepts are: 1. sizeof() 2. Function 3. Pointer 4. Function Pointer 5. Arrow operator 6. malloc() 7. typedef 8. struct PHASE 1: sizeof() It is used to determine the size of variables used in a program, it can determine the size of primitive (or predefined) datatype too and for any user-defined datatypes. It is an inbuilt keyword and a compile-time operator. syntax-1 using variable sizeof(variableName); syntax-2 using primitive datatype sizeof(datatype); //code implementation #include<iostream> using namespace std; int main(){ //declare v...
Read more
By on
Image
 ADDING FILES TO YOUR GITHUB ACCOUNT & Inspect Element & Export SQL file from XAMPP sign into your github account create a new repository give it a name of your choice click create repository ensure you are in the project folder directory for quick access; copy the folder on the desktop open git bash terminal cd desktop cd folder-name (cd whitepace-academy) HANDLE few git commands type:: git init (a git folder is created in your project folder) type:: git add . (add the period sign) type:: git config --global user.email "ajalabamise@gmail.com" type:: git config --global user.name "ajalabamise" type:: git commit -m "initial commit"  (it shows all your folder files) CONNECT your local github folder in your github repository copy and paste the code below from your github repo into your git terminal and press enter key git remote add origin https://github.com/ajalabamise/my-web-dev-tutorial.git UPLOAD the files to github repo git push -u or...
Read more
By on
Image
 CGPA CALCULATOR & BASIC HTML WEB DEV PROJECT Introduction: In this cgpa calculator, user will enter the gp for each semester, then click on the submit button to see the cgpa user can also click the reset button to begin a new input for calculation In this mini project we will be using HTML CSS JAVASCRIPT to develop a cgpa calculator NB:   With a querySelector statement, you can select an element based on a CSS selector. This means you can select elements by ID, class, or any other type of selector. Using the getElementById method, you can only select an element by its ID. Generally, you should opt for the selector that most clearly gets the job done. PHASE 1a:  PROTOTYPE (final product) PHASE 1b:  PROTOTYPE (rought sketch) Let's sketch with our hand how the cgpa calculator will look like PHASE 2: Html (for structuring the webpage content) Shortcut for div and class for css: type dot followed by the name you want e.g .cgpatitle Shortcut for div and id f...
Read more