SY Practical No. 12 — Create Gamification for Task Completion (Figma)
Practical No. 12 — Create Gamification for Task Completion (Figma)
1. Objective
Design gamification for task completion in a Banking Website UI using Figma.
The design will include the following gamification elements:
Points System
Progress Bar
Achievement Badge
Task Completion Popup Effect
Balloon Celebration Animation Concept
These elements motivate users to complete banking tasks such as paying bills, saving money, or transferring funds.
PART 1 — Preparing the Figma Workspace
Step 1: Open Figma
Open browser.
Go to https://figma.com
Click New Design File.
Rename file:
Practical_12_Gamification_Banking_UI
Step 2: Create Website Frame
Since the task is for website UI, create a desktop layout.
Press F (Frame Tool)
Select:
Desktop → 1440 × 1024
Rename frame:
SmartBank Dashboard
PART 2 — Create Banking Dashboard Layout
Step 3: Create Navigation Bar
Insert Rectangle
Width: 1440
Height: 70
Color: #1E3A8A
Add text:
SmartBank
Font:
Font: Inter
Size: 26
Color: White
Weight: Bold
Right side menu:
Dashboard
Transactions
Rewards
Profile
PART 3 — Create Task List Section
Step 4: Create Banking Task Card
Insert rectangle:
Width: 420
Height: 240
Corner Radius: 14
Color: #F8FAFC
Shadow: 10% blur
Add title:
Today's Banking Tasks
Add tasks list:
✓ Pay Electricity Bill
✓ Transfer Money
✓ Add Savings Goal
✓ Complete KYC
Use checkbox icons from Figma plugin Iconify.
PART 4 — Gamification Element 1
Points Reward System
Step 5: Create Points Card
Insert rectangle:
Width: 350
Height: 120
Color: #DBEAFE
Corner Radius: 12
Add icon:
Search trophy in Iconify.
Text:
Reward Points
Below text:
2450 Points
Description:
Earn points for completing banking tasks
PART 5 — Gamification Element 2
Progress Tracking Bar
Step 6: Create Progress Section
Insert rectangle:
Width: 350
Height: 140
Color: #ECFDF5
Radius: 12
Add text:
Savings Challenge
Create progress bar.
Background bar:
Width: 280
Height: 14
Color: #D1D5DB
Radius: 8
Fill bar:
Width: 190
Height: 14
Color: #22C55E
Radius: 8
Text:
Progress: 70%
Goal: Save ₹10,000
PART 6 — Gamification Element 3
Achievement Badge
Step 7: Create Badge Section
Insert rectangle:
Width: 350
Height: 110
Color: #FEF3C7
Radius: 12
Add badge icon.
Iconify search:
medal
Text:
Achievement Unlocked
Smart Saver Badge
PART 7 — Gamification Element 4
Task Completion Popup Effect
Step 8: Create Popup Frame
Insert rectangle:
Width: 400
Height: 220
Color: White
Radius: 14
Shadow: Large
Text:
Task Completed!
+100 Points Earned
Add icon:
confetti
Button:
Continue
Color:
#3B82F6
PART 8 — Gamification Element 5
Balloon Celebration Effect
Step 9: Design Balloons
Create balloon shapes.
Insert Ellipse
Width: 40
Height: 55
Color: Red / Blue / Yellow
Add string using Line Tool.
Duplicate balloons:
5 balloons
Arrange above popup.
This represents celebration animation when task is completed.
PART 9 — Create Prototype Interaction
Step 10: Create Button for Task Completion
Add button under task list.
Rectangle:
Width: 200
Height: 44
Color: #2563EB
Radius: 10
Text:
Complete Task
Step 11: Create Second Frame
Duplicate frame.
Rename:
Task Completed Screen
Add:
Popup
Balloons
Updated Points
Step 12: Add Interaction
Open Prototype Mode
Drag arrow from button → completion frame.
Settings:
Trigger: On Click
Action: Navigate To
Animation: Smart Animate
Duration: 400ms
PART 10 — Final UI Layout Structure
------------------------------------------------
SmartBank Dashboard
Today's Banking Tasks
☑ Pay Electricity Bill
☐ Transfer Money
☐ Add Savings Goal
Reward Points
2450 Points
Savings Challenge
Progress 70%
Achievement
Smart Saver Badge
[ Complete Task ]
Popup
Task Completed!
+100 Points
🎈 Balloon Celebration
------------------------------------------------
Expected Output (Concept)
Your final Figma design should contain:
Banking Dashboard
Task Completion System
Points Reward Card
Savings Progress Bar
Achievement Badge
Popup Completion Animation
Balloon Celebration Effect
