Skip to main content

🎯 Apply Tokens in Figma

1) Select the right theme​

  • In Tokens Studio, choose Agnostic Light first (default/base).
  • Then validate Agnostic Dark and target brands:
    • Betfair / Sky Bet / Sky Vegas / Sky Casino / Sky Bingo
    • Paddy Power Sports / Paddy Power Games
    • Poker Stars

2) Apply semantic tokens​

  • Bind tokens like color.text.primary, color.bg.surface, color.border.focus.
  • Avoid raw hex or detached local styles.

3) Typography & spacing​

  • Use font.size.*, font.weight.*, line.height.*; and spacing.* tokens.

4) Validate across brands & modes​

  • Switch to at least one other brand and Dark mode.
  • Fix contrast, focus rings, and any layout shifts.

✅ Do’s & Don’ts​

  • ✅ Semantic tokens everywhere
  • ✅ Cross-theme validation
  • ❌ Raw values in layers
  • ❌ Detaching DS components

🎯 Apply Tokens in Figma

Use tokens to keep designs consistent, themable, and accessible.

1) Select the right theme​

2) Apply semantic tokens​

  • Select a layer/component part (e.g., button background).
  • Bind semantic tokens (e.g., color.bg.primary, color.text.primary).
  • Avoid raw hex, local fills, or detached styles.

3) Typography & spacing​

  • Typography → use tokens like font.size.md, font.weight.semibold, line.height.default.
  • Spacing → use spacing.xs/sm/md/lg and grid constraints.

4) Validate across themes​

  • Switch to at least one more brand and one more mode (e.g., Paddy Power Light, Betfair Dark).
  • Fix any contrast or layout issues revealed by theme changes.

✅ Do’s & Don’ts​

  • ✅ Use semantic tokens first; primitives only inside token definitions.
  • ✅ Keep components linked, not detached.
  • ❌ Don’t paste raw values (hex, px) into layers.
  • ❌ Don’t override tokens locally unless approved.

How to Apply Tokens

1. Apply Tokens to Components on Libraries v1.2​

Pre-requirements: Have the Figma Tokens Studio connected with the The Wall tokens repository.

Go to “Betfair Design System > Release Candidates” project, and open the desired library file by order

Order: Core Components / Sports Components / Gaming X-Sell Components

Ask for edit access on that file if you don’t have it

Check Airtable “Apply Tokens” view to see what components are ready for tokenizing. Only apply tokens to these.

Open the Figma Tokens Studio plug-in while in the library file.

Pull tokens from "main" branch

Select the "Components" tab on the left plugin widget area

On the plugin search field, type the name of the component of the token you want to apply

From the results, find the token from the desired token type (border, spacing etc…) that you are applying.

Track your progress:

Once a token is applied to a component, update the component/token type status on Airtable to Applied in figma

If a component doesn’t use a specific token type, update the component/token type status to n/a

To apply a token to a component, select the property on the Figma component you want to tokenize (a shape, a text etc...) and select the matching token on the Plug-in.

If:

You spot any missing tokens

You spot an unused token

You spot a token with a wrong value

Report to the Betfair Design System Slack channel

Apply Tokens to Components on Libraries v1.1

Apply Tokens to Components on Libraries v1.0

2. Ask Development Team to update a Component​

2.1. Design System CI (Continuous Improvement) workstream If there is a Component update on Design that needs to be propagated to TBDUI and on all dependencies, a CI User-Story needs to be raised by Design or Development on the DS CI board on Target-Process.

Create the User-Story on the "No Team" area

Add "DS Prioritize" tag

Add "Must have", "Shoud have" or "Nice to have" tags to pre-prioritize the US.

What

Description

Link

Design System CI Backlog

The backlog for DS CI Development Tickets that are created

Target Process DS CI Board

3. Ask Design Team to update a Component or Pattern​

3.1. Design CI (Continuous Improvement) workstream If there is a Pattern update on Design that needs to be executed, a CI User-Story needs to be raised by Design or Development on the Design Board on Target-Process.

Create the User-Story on the "Backlog" area

What

Description

Link

Design Backlog

The backlog for Design Tickets that are created

Target Process Design Board

Design CI Process

Visual diagram with the current Design CI Process

Figjam

4. Refactoring Libraries​

4.1. Refactor a component Check in Airtable “Needs Refactor” page what components need refactoring.

Go to “Cactus Design System > Components” project, and open the desired library file.

On Airtable, assign yourself to the component you are working on the “Refactored by” column.

On Figma, simplify the component

Remove redundant frames

Remove unnecessary variants through the use of booleans

On Figma Tokens Studio

Make sure you have access to Tokens Studio (steps here)

Make sure you have the tabs: core, light, mobile, and components selected

Apply all available tokens (Opacity, Border, Border-Radius, Sizings, Typography)

If you are creating colour component tokens make sure you create a new branch from the main. The branch name should be feat/you-name_componentname-tokens

Make sure you are inside the tab components to create component tokens.

On the bottom of the plugin there’s an arrow that push the tokens to github. Click on that

Designers push the change to Github (https://github.com/Flutter-Global/the-wall-design-tokensConnect your Github account )

Regarding this push, designers should take into account the type of change that they are adding and should add a specific commit message according to that (Conventional Commits ). For instance:

Add a new token - feat: add a new token for Quicklink background

Update a token - fix: updated token --neutrals-border-elevation2 with new color

Delete a token - feat!: add a new token for Quicklink background or feat: delete the --neutrals-border-elevation2 token BREAKING CHANGE: use instead --neutrals-border-elevation1

Designers open a pull request (PR) on Github with the change(s)

After creating the pull request, go styles and variables and select create styles

After that apply the tokens to your layers (You migh need to unlink and link again to make sure the right style is applied)

On Figma, name layers accordingly

Text layer names must match the typography-token name.

If in doubt, check the Typography terminology chart

Icon and asset names must match the sizing tokens

Every time there is more than one element of a group (three text elements: title, subtitle, label) the rule should be text.title, text,subtitle and text.label

Update Airtable

After following all previous steps, fill the Aitable token type columns with one of the following:

Check “Ready for review”

Label token status:

n/a This component doesn’t need this token type

applied in figma Token was applied to Figma

Check / Review You think a token might me missing or has wrong value