Figma Sorting Hat Quiz Game Design

Diana Fabianczuk

Figma Sorting Hat Quiz (Playful Game Project)

Project Overview

The Sorting Hat Quiz is an interactive, playful project designed to explore Figma Make’s capabilities. The goal was to experiment with motion, micro-interactions, and conditional logic while creating a fully gamified experience. This project demonstrates how Figma can be used not just for static design but for engaging, interactive prototypes.

My Role

UX/UI Design
Prototyping and Interactive Components
Animations and Micro-Interactions
Quiz Logic & Conditional Outcomes

Audience & Use Case

Target Users: Fans of Figma, Harry Potter, design community, students, or anyone interested in playful interactive experiences.
User Experience: Users answer questions and get sorted into different Hogwarts/Figma houses. The experience provides a lighthearted “magical” moment and encourages exploration of the interface.

User Flow

Flow Overview:
Welcome page/Start the sorting
Question 1 → Conditional outcome
Question 2 → Conditional outcome
Question 3 → Conditional outcome
Question 4 → Conditional outcome
Sorting Result Screen (House revealed)
Option to restart or share
Logic Details: Each answer is tied to a specific house point system. Points accumulate to determine the final sorting result.

UI

Design Choices:
Colors inspired by Hogwarts houses (red, green, blue, yellow)
Typography: Mix of whimsical and readable fonts for headings and quiz text
Animations enhance personality and engagement without overwhelming the user
Reasoning: Style reinforces magical, playful tone and aligns with target audience expectations

Next Steps

Mobile version for cross-device access
Integration with a real backend to save results and user profiles
Adding sound effects and richer animations
Assigning colors to each of the four houses
Applying gamified interactions to client projects (onboarding flows, playful surveys, engagement tools)
Leaderboard
Leaderboard

Reflection

The Sorting Hat Quiz was a passion project that allowed me to explore creativity, micro-interactions, and playful UX in Figma. While it’s just a game, it demonstrates my approach to designing engaging, interactive experiences that delight users.
Like this project

Posted Sep 11, 2025

Built a Sorting Hat Quiz purely for entertainment, highlighting advanced prototyping and gamification techniques to create a magical, interactive user journey.

Likes

0

Views

2

Timeline

Sep 10, 2025 - Sep 11, 2025

From Outdated to Conversion-Ready: B2B SaaS Website Redesign
Landing Page UX/UI & Webflow Implementation
Landing Page UX/UI & Webflow Implementation
Lead Magnet Campaign & Funnel Design - Aftersell
Lead Magnet Campaign & Funnel Design - Aftersell

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc