SY Practical No. 10 Design a Quiz for Given User Interface Using Figma

Practical No. 10

Design a Quiz for Given User Interface Using Figma

1. Start a New Design File

1. Open Figma.

2. Click New Design File.

3. Rename the file as Quiz_UI_Practical_10.

4. Select Frame Tool (F) from the toolbar.

5. Choose a Mobile Frame (Android / iPhone size).

Recommended size:

• Width: 360 px

• Height: 640 px

Create 3 frames side-by-side:

• Frame 1 → Low Fidelity

• Frame 2 → Mid Fidelity

• Frame 3 → High Fidelity

Rename frames from the Layers panel.

---

Part A — Low Fidelity Wireframe (Basic Structure)

Low fidelity shows layout only without colors or styling.

Step-by-Step

1. Select Frame 1 (Low Fidelity).

2. Create Header

   • Use Rectangle Tool (R).

   • Draw a rectangle at top.

   • Add text:

     QUIZ USING FIGMA
     

3. Add Score Section
   Insert text:

   Total Score: 20
   Your Score: 0
   

4. Create Question Card
   Draw a rectangle placeholder.

   Inside add text:

   Q1. What is 2 + 2?
   

5. Create Options
   Add 4 small circles or boxes.

   Example:

   A  3
   B  4
   C  5
   D  6
   

6. Duplicate Question Block

   Press CTRL + D three times to create:

   • Q1

   • Q2

   • Q3

   • Q4

7. Create Buttons

   At bottom draw two rectangles:

   Button 1

   Try Again
   

   Button 2

   Result
   

8. Do NOT add colors or images in this stage.

Low fidelity only shows layout planning.

---

Part B — Mid Fidelity Wireframe (Structured UI)

Mid fidelity includes spacing, alignment and readable layout.

Steps

1. Copy Low Fidelity Frame
   Paste into Frame 2.

2. Improve Layout
   Use Auto Layout.

   Select question cards
   Press:

   Shift + A
   

3. Design Question Cards

   Set properties:

   Width: 160 px
   Height: 120 px
   Corner Radius: 10 px

4. Arrange Cards

   Layout example:

   Q1   Q2
   Q3   Q4
   

5. Improve Typography

   Header:

   Font Size: 18
   Font Weight: Bold
   

   Question text:

   Font Size: 14
   

6. Add Radio Buttons

   For options create circles + text.

Example:

○ 3
○ 4
○ 5
○ 6

7. Align everything using:

Align Center
Distribute Spacing

This stage should look like a structured application UI.

---

Part C — High Fidelity Wireframe (Final Design)

High fidelity represents the final visual design.

Steps

1. Copy Mid Fidelity Frame
   Paste into Frame 3.

2. Add Colors

Header:

Gradient Blue
#2FB8C6 → #1A7F8A

Cards:

Light Gray #F3F3F3

Buttons:

Try Again → Teal
Result → Dark Teal

3. Style Question Cards

Properties:

Corner Radius: 12
Shadow: 0 4 10 rgba(0,0,0,0.1)

4. Add Option Buttons

Make circular buttons.

Example style:

Fill: #2FB8C6
Text Color: White

5. Improve Buttons

Try Again

Width: 120
Height: 40
Radius: 10
Color: #2FB8C6

Result

Width: 120
Height: 40
Color: #1F6D74

6. Add Padding

Spacing between cards:

16 px

---

Part D — Create Prototype Navigation

1. Click Prototype Tab (right panel).

2. Select Try Again Button

Set interaction:

On Click
→ Navigate to same frame

3. Select Result Button

Create a new frame:

Result Screen

Text example:

Your Score: 15 / 20

Prototype setting:

On Click → Navigate to Result Screen

4. Click Present (Play Button) to test.

---

Final Layer Structure

Quiz_UI_Practical_10
│
├── Low Fidelity
│   ├── Header
│   ├── Score Text
│   ├── Question Cards
│   └── Buttons
│
├── Mid Fidelity
│   ├── Header
│   ├── Score Section
│   ├── Card Layout
│   └── Buttons
│
└── High Fidelity
    ├── Header
    ├── Quiz Cards
    ├── Options
    └── Try Again / Result

---

Expected Output

Your Figma file should contain:

1️⃣ Low Fidelity Wireframe (layout sketch)
2️⃣ Mid Fidelity Wireframe (structured UI)
3️⃣ High Fidelity Wireframe (colored realistic design)
4️⃣ Prototype Navigation

---

Viva Questions 

1. What is wireframing?
Wireframing is a visual blueprint of a user interface that defines layout, structure, and functionality before final design.

2. Types of wireframes?

1. Low Fidelity

2. Mid Fidelity

3. High Fidelity

3. Why wireframing is important?

• Improves user experience

• Detects design issues early

• Saves development time

4. What is prototyping?

Prototyping creates an interactive simulation of the UI for testing user flow..