Scribd
Upload
74 views4 pages

Figma Design for Login & Sign-Up Pages

The document outlines an experiment for Advanced Mobile Application Development, focusing on creating a Figma design for login and sign-up pages. It details the objectives, steps for designing the pages, and the learning outcomes achieved through the process. Additionally, it includes an evaluation grid for assessing performance and understanding of the task.

Uploaded by

milankhandelwal001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
74 views4 pages

Figma Design for Login & Sign-Up Pages

The document outlines an experiment for Advanced Mobile Application Development, focusing on creating a Figma design for login and sign-up pages. It details the objectives, steps for designing the pages, and the learning outcomes achieved through the process. Additionally, it includes an evaluation grid for assessing performance and understanding of the task.

Uploaded by

milankhandelwal001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

ADVANCED MOBILE APPLICATION DEVELOPMENT

Student Name: Milan Khandelwal Date of Performance: __ / __ / 2025


UID: 24MCA20375 Subject Code: 24CAP-705
Branch: MCA Subject Name: Advanced Mobile
Section/Group: 5-B Application Development
Semester: 3rd Semester Submitted to: Ms. Winky Bhatia (E18463)

EXPERIMENT- 01

AIM :- To Create A Figma Design For A Login And Sign-up Page.

Objective :- To create simple yet effective Login and Sign-up page designs using
Figma, primarily utilizing basic design tools such as the Rectangle, Text, and Button
widgets. The focus is on understanding the fundamentals of UI layout, alignment,
spacing, and visual hierarchy to design clean and functional user authentication
interfaces.

Step 1: Open [Link] and then click on Design.


↳ Then click on frame and make a frame of IOS 16 mobile and set upto 464 x 871 and
take a rectangle and give color to yellow and rotate It -48% and than take a circle in
right of that using upsplash put image of app logo.
↳ now you need to create the login and the Sign up structures.

Step 2: Make the Structure of the Login page.

↳ Then a text Login page.

Put a line below that text.

1
↳ Then create a small rectangle and write username in it , then go to upsplash and take a
logo Of that and put a line below that and do same for password also.

↳ Than add text ‘forgot password’ of font size 13 And at last a Button Widget for the login
button.

Android compact – 1 (Login Page) :

2
Step 3: Make the Structure of the Sign Up page.

↳ Add a circle and put body image using upslash on the top right.
↳ Then a text Sign Up Page and put line below it and colour it yellow.
↳ Then create a rectangle where you will ask the user for the username and
Password and confirm password and put logo using upslash for the Sign Up.
↳ Then a Checkbox Widget which will make sure the user agrees to the terms
and conditions.
↳ And at last a Button Widget for the Sign Up button.

Android compact – 2 (Sign Up Page) :

3
Learning outcomes (What I have learned):

• Understood the use of basic Figma tools like Rectangle, Text, Checkbox and
Button for UI design.

• Developed skills in creating structured and visually balanced login and sign-up
interfaces.

• Learned to simulate screen navigation using Figma’s prototyping features.

• Gained hands-on experience in designing interactive and user-friendly


authentication screens.

Evaluation Grid:

Sr. No. Parameters Marks Obtained Maximum Marks


1. Demonstration and Performance 12
2. Worksheet 08
3. Viva 10
Total 30

You might also like