What this means
A designer can drop one component into a screen and change its state from the right panel.
Figma documentation
One reusable component, not dozens of loose screens
FS_Indicator was my working name for the Free Spins component. I used Figma variants so the team could switch between states, views and markets from one component, instead of maintaining lots of separate frames.
Why it matters
It keeps the experience consistent and makes future updates easier.
How I explain it
The component behaves like a small product system, not a static piece of UI.
01 · Component set
How I structured the component
A component set is a group of related versions of the same component. In this case, the Free Spins component can change depending on what the player is doing, how much information needs to be shown and which market the product is in.
FS_Indicator
Free Spins component
8 states × 2 views × 2 menu behaviours
8 states
Available, ready, active, paused, error, complete, expiring and multi-game.
2 views
Expanded and minimised.
2 menu behaviours
Stable menu or state-aware menu.
This does not mean I designed 32 disconnected screens. It means one component can flex across 32 real product situations.
FS_TopNavReward
Gift icon in the top navigation
2 menu behaviours × 7 reward statuses
2 menu behaviours
Stable or state-aware.
7 statuses
Available, active, paused, expiring, error, complete and hidden.
The 14 variants explain how the gift icon behaves when the reward status changes.
How I would explain this in an interview
I was not trying to create a huge Figma file. I was trying to make the component easier to understand, test and maintain. The variants are there because the reward can be in different states, not because I wanted to overcomplicate the design.
FS_Indicator
Ava
Rea
Act
Pau
Err
Com
Exp
Mul
8 states shown as one component family
02 · Properties
The controls behind the component
I thought of these properties as simple controls. Some change the structure, like state or view. Others change the content, like the number of spins, timer value or CTA label. This keeps the component flexible without forcing designers to detach it.
PropertyTypeValuesPlain meaning
StateVariantAvailable · Ready · Active · Paused · Error · Complete · Expiring · MultipleChanges the situation the player is in.
ViewVariantExpanded · MinimisedSwitches between compact and detailed views.
MenuLogicVariantStable · StateAwareControls whether the top gift icon stays quiet or reflects the reward status.
LocaleVariantUK · BR · FIChecks how the component behaves across markets and languages.
show_timerBooleantrue · falseShows or hides the timer when expiry matters.
balance_currentText22Lets the team update the current spin count.
balance_totalText30Lets the team update the total number of spins.
timer_valueText02:45:10 · 14 minKeeps expiry content flexible.
winningsText$50.24Lets the completed state show the player’s result.
cta_labelTextStart · Resume · Adjust · Use now · Choose game · DoneKeeps the action label editable without detaching the component.
status_iconInstanceGift · Play · Pause · AlertTriangle · CheckCircle · Clock · GridSwaps the status icon while keeping the same layout.
cta_iconInstanceArrowRight · SlidersHorizontal · Play · CheckCircleLets the CTA icon change with the action.
03 · Variant grid
What the team would see in Figma
This grid shows the main Free Spins states as part of the same component family. A designer would not need to copy and paste screens. They would use one component and switch the state from the Figma properties panel.
FS_Indicator / View=Expanded
8 core statesAvailable
30/30 · £0.10
State=Available
Free Spins
Available
Spins
30
of 30
Bet
£0.10
Expires
2h 14m
from now
Use on Big Bass Bonanza. Max bet £2.00. Winnings credit as cash.
State=Ready
Free Spins
Active
Spins remaining17/30
Winnings so far£3.40
State=Active
Free Spins
Paused
You paused with 13 remaining. They'll be kept for 24 hours.
State=Paused
Free Spins
Action needed
Your bet is too high
Adjust your bet to £2.00 or less to use Free Spins.
State=Error
Free Spins
Done
You won
£12.40
Credited as cash · No wagering left
State=Complete
Free Spins
Expiring soon
Heads up, 12 ending soon. No rush, only use them if you want to.
State=Expiring
Free Spins
Multiple games
Free Spins are ready in two games. Pick one to start.
Pirots 4
30 · £0.10
Gates of Olympus
20 · £0.10
State=Multiple
04 · Auto Layout
How the component adapts
Auto Layout is what makes the component behave properly when the content changes. This matters because Portuguese and Finnish labels can be much longer than English, and currency formatting also changes by market.
▾ FS_Indicator
▾ Header row
□ Balance card
▾ Info column
T Main message
T Supporting copy
◇ Timer pill
◇ Status or CTA
▾ Body row
T Rules text
◇ Secondary action
Layout rules in plain English
Outer frameThe component has safe padding and can fill the available width.
Header rowThe main content stays aligned in one row when space allows.
Balance cardThe spin counter keeps a stable size.
Info columnText can wrap without breaking the layout.
Status / CTAThe action area keeps its own space.
Timer pillOnly appears when expiry matters.
Body rowOnly appears when the component is expanded.
Minimised viewKeeps only the essential information visible.
05 · Design tokens
Shared colours, not one-off styling
I used design tokens so colour decisions stay consistent across the component. This is especially important for states like active, warning, error and completed, where colour needs to support meaning rather than decorate the UI.
color/bg/canvas
Main dark background
color/bg/surface
Component container
color/bg/surface-2
Inner cards and balance areas
color/gold/primary
Brand accent and gift icon
color/gold/soft
Soft highlight background
color/state/active
Available or active reward
color/state/warning
Expiry and paused attention states
color/state/error
Blocked or action required
color/state/info
Supporting information
color/text/primary
Primary text on dark
color/text/muted
Secondary copy