SY Practical No. 11 — Create Two Gamification Effects in Figma
Practical No. 11 — Create Two Gamification Effects in Figma
Scenario: Educational Language Learning Application
1. Objective
Design two gamification effects in a user interface using Figma for an educational language learning application.
Selected Gamification Effects:
Points + Progress Bar System (Increased Engagement)
Leaderboard + Badge Reward System (Skill Development & Competition)
PART 1 — Preparation in Figma
Step 1: Open Figma
Open browser
Go to https://figma.com
Login to your account.
Click New Design File
Rename file:
Gamification_UI_Practical_11
Step 2: Create Mobile Frame
Gamified learning apps are usually mobile-first.
Press F (Frame Tool)
In right panel select:
Phone → Android Large (360 × 800)
Rename Frame:
Language Learning App
Step 3: Create Basic UI Layout
Add basic structure before adding gamification.
Header Section
Insert:
Text Tool (T)
Write:
Learn English Challenge
Font Settings:
Font: Inter / Poppins
Size: 22
Weight: Bold
Alignment: Center
User Info Section
Create user block.
Insert rectangle:
Width: 320
Height: 70
Corner Radius: 12
Color: #F3F4F6
Add text:
Hello, Student
Level 3 Learner
PART 2 — Gamification Effect 1
Points + Progress Bar (Increased Engagement)
This motivates the user to complete lessons.
Step 4: Add Points System
Insert card.
Rectangle:
Width: 320
Height: 90
Radius: 12
Color: #E0F2FE
Add elements.
Text:
Your Points
Below text:
1250 XP
Add icon:
Figma → Plugins → Iconify
Search:
trophy
Place icon left side.
Step 5: Create Progress Bar
Gamification element showing learning progress.
Insert rectangle:
Background bar:
Width: 280
Height: 12
Color: #D1D5DB
Radius: 6
Above it create filled bar:
Width: 180
Height: 12
Color: #22C55E
Radius: 6
Add text above bar:
Lesson Progress: 65%
Step 6: Add Reward Notification
Add motivational text.
Complete 2 more lessons to reach Level 4!
Add star icon beside text.
This creates engagement and motivation loop.
PART 3 — Gamification Effect 2
Leaderboard + Badge System (Skill Development)
Competition improves learning.
Step 7: Create Leaderboard Section
Insert card.
Rectangle:
Width: 320
Height: 200
Radius: 12
Color: #FEF9C3
Title text:
Top Learners
Step 8: Create Ranking List
Create 3 rows.
Each row contains:
Rank Icon
User Name
Points
Example:
Row 1
🥇 Rahul — 1500 XP
Row 2
🥈 Aisha — 1420 XP
Row 3
🥉 Student — 1250 XP
Use Auto Layout for alignment.
Steps:
Select row elements
Press Shift + A
Step 9: Add Badge Reward
Create badge section.
Rectangle:
Width: 150
Height: 80
Radius: 10
Color: #DCFCE7
Add badge icon.
Plugin:
Iconify → medal
Text:
Achievement Unlocked
Vocabulary Master
PART 4 — Interaction Prototype
Now create interaction to simulate gamification.
Step 10: Create Button
Rectangle:
Width: 200
Height: 40
Color: #3B82F6
Radius: 8
Text:
Complete Lesson
Step 11: Create Second Frame
Duplicate frame:
Ctrl + D
Rename:
Lesson Completed
Change:
Points: 1350 XP
Progress: 75%
Add popup:
🎉 Badge Earned!
Step 12: Create Prototype Interaction
Switch to Prototype Tab
Drag arrow from button → second frame.
Settings:
Trigger: On Click
Action: Navigate To
Animation: Smart Animate
Duration: 300ms
PART 5 — Final Screen Layout
Your UI will contain:
Header
User Level Section
Points Card
Progress Bar
Leaderboard
Badge System
Complete Lesson Button
PART 6 — Expected Output (Design Structure)
Effect 1: Points + Progress Bar
Purpose:
Encourages continuous learning.
Provides instant feedback.
Increases engagement.
Effect 2: Leaderboard + Badges
Purpose:
Creates competition.
Improves skill development.
Rewards user achievements.