Figma documentation
One component set, every state, every market
Everything lives inside FS_Indicator. The notes below are what I would leave behind for the next designer or for a dev picking this up cold.
01 · Component set
FS_Indicator
A component set is one master component with multiple variants. Every state, view and market lives inside one node, switchable from the right panel. No more 40 detached frames floating around.
The set has 2 sibling sets:
- 8 × 2 × 2 = 32 variants
FS_Indicator
The reward component itself (state × view × menu logic)
- 2 × 7 = 14 variants
FS_TopNavReward
The gift icon in the top nav (menu logic × reward status)
8 states · 2 views · 2 menu logics
02 · Properties
Component properties panel
These map 1:1 to the Figma right-side properties panel. Variant props lock the visual axis. Text, Boolean and Instance props let the consumer override content without detaching the component.
03 · Variant grid
What you would see in the Figma library
Every cell below is one variant of the same component. In Figma, the consumer drops one instance and switches via the State and View dropdowns. No copy-pasting.
Available
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
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
Frame structure
Auto Layout means a single instance reflows when text expands (BR and FI currencies, longer error copy) without manual resizing. Below is the exact node hierarchy.
▾ FS_Indicator ⟂ vertical · pad 16 · gap 12
▾ Header row ⟷ horizontal · gap 12 · center
□ BalanceCard [fixed 72 × hug]
▾ Info column [fill · min-w 0]
T Headline
T SupportingText
◇ TimerPill [hug · cond: show_timer]
◇ Status / CTA [hug · right]
▾ Body row [visible if View=Expanded]
T RulesText
◇ SecondaryAction [hug]
Rules
05 · Design tokens
Variables, published as a Figma library
Built as Figma variables (mode: dark), so the same tokens drive both the design file and the production CSS.
color/bg/canvas
Page background, top-nav solid bar
color/bg/surface
Component container
color/bg/surface-2
Inner cards (balance)
color/gold/primary
Brand accent, gift icon, hairlines
color/gold/soft
Text on gold, highlights
color/state/active
Active chip, success
color/state/warning
Expiring, soft urgency
color/state/error
Error accent + CTA Adjust
color/state/info
Informational hints
color/text/primary
Headlines on dark
color/text/muted
Helper / supporting copy