Case 02 of 06
Twenty day seasons, one live board.
A trading competition platform where traders race through twenty day seasons and brokers, prop firms or other partners fund the prizes.
This is the real Figma prototype, running live. Join a season, watch the board move and check where you stand, the way traders do.
Things to try
These are the real Figma prototypes, embedded live, so they need a stable connection and can still feel slow or skip a step. For the full picture, open the Figma file. Every screen, state, the design system and the components are there.
01Overview
FX League runs seasonal forex trading competitions. Traders connect a broker account, compete on percentage gain under risk rules and climb a live leaderboard toward a prize pool. The first version was designed by someone else and was mostly captured web pages. I took it from there and rebuilt it as one system covering web, mobile and email, in light and dark.
02The problem
Before designing anything I measured every layer in the file, so the plan rested on findings, not opinion. Onboarding, broker connection, the host side and every empty and error state were missing entirely.
03Who it’s for
Each side of the league needed its own space, but all of them had to feel like the same product and share the same parts.
Join a season, connect a broker account, see rank and rule limits at a glance, log trades and claim prizes.
Create competitions in a guided wizard, review entries and rule breaches, then release prizes.
Share tracking links, follow referred traders and export results for payouts.
04How it came together
Each phase had an exit rule, so nothing moved forward on hardcoded values. Every screen was checked for overlaps, clipped text, unbound fills and contrast in both themes before the next one started.
Measured every layer, font, colour and effect
Colour, type, spacing, radius and elevation, light and dark
78 components and variant sets with states
Rebuilt line by line, then three client review rounds
05Key decisions
Only 5 of 65 screens had a dark theme, and each one was a separate, hand-made copy.
38 semantic tokens with Light and Dark modes. A screen switches theme by changing one mode on its frame.
Traders need to know where they stand in a second, not after scrolling a table.
A podium for the top three, then dense rows with tabular figures, your own row pinned and rule status beside every name.
06In numbers
07What I learned
The scan turned a vague sense of mess into numbers the client could agree with.
One set of frames to maintain, and both themes stayed in sync.
Empty and error states surfaced missing product decisions before development.
Figma variables for semantic colour in light and dark modes, plus the type scale and the components behind the web and mobile apps.
Every screen and state, the components and the design system, in the file I designed it in.
Next project, 03 of 06
Applizy