Figma Variables — Process Flow

Goal: Understand where variables fit into our daily workflow and how they connect Tokens Studio, Figma, and code.

1. End-to-End Flow

The process follows a linear path, connecting design decisions to production.

Jira Ticket → Tokens Studio (TS) → Figma Variables → Components → QA → Library Publish → PR → Code

Step	What You Do	Output / Example
1. Start with Jira ticket	Read requirements and scope: brand, product, platform, and mode.	Example: New Betfair button component.
2. Work in Tokens Studio (TS)	Create or edit tokens at the right layer: primitives, brand, or semantic.	gb.colours.blue.40 = #185FD8
3. Validate tokens	Check for correct naming, fallbacks, and alias chains.	sm.border-radius.medium → gb.border-radius.4
4. Export to Figma Variables	Export tokens → Figma collections and modes.	brand.color.action.bg → {gb.colours.blue.40}
5. Bind variables in components	Replace raw values in your Figma designs with variables.	Button background → {brand.color.action.bg}
6. Test across brands and modes	Switch modes: Light/Dark, Betfair/Sky, etc.	Light mode uses gb.colours.grey.5 → Dark uses gb.colours.grey.110
7. QA checklist	Validate against our QA steps.	Confirm correct binding and fallbacks.
8. Publish libraries	Publish updated libraries in Figma.	Library change log shows new variables.
9. Submit PR	Push the updated TS JSON and changelog to the tokens repo.	Example PR with 00-global/betfair updates.

---

2. Workflow Diagram

---

3. Practical Example

Scenario: A new Betfair button needs to support Light/Dark and multiple brands.

Stage	Example Action	Real Token
Tokens Studio	Add a primitive blue color.	gb.colours.blue.40 = #185FD8
Brand Layer	Alias Betfair button background to primitive.	betfair.gb.colours.button.bg → gb.colours.blue.40
Export	Export Betfair brand tokens → Figma variables.	Figma variable: brand.color.action.bg
Component Binding	Assign button background fill to variable.	Button.bg = {brand.color.action.bg}
Testing	Switch Light/Dark mode and brands.	Grey values: gb.colours.grey.5 → gb.colours.grey.110
QA & Publish	Confirm variable chains, publish library.	Changelog: Added button.bg alias for Betfair.
PR Submission	Push updates to repo.	00-global/betfair JSON file updated.

---

4. Layer Mapping

Your tokens map to real collections and modes during export.

Tokens Studio Layer	Figma Collection	Example Tokens
00-global (primitives)	00-Primitives	gb.spacing.16 = 16 gb.border-radius.8 = 8
Brand (Betfair, Sky, etc.)	10-Brand	betfair.gb.font-family.font-primary = Noto Sans
Semantic (meaningful tokens)	40-Semantic	sm.border-radius.medium → gb.border-radius.4

---

5. QA Checklist

Before publishing, always check:

Bindings

• ⬜ All fills+strokes reference variables (no hard-coded values).
• ⬜ Spacing, sizing, radii use number variables.
• ⬜ Typography binds to font-size, line-height, letter-spacing variables.

Modes & Brands

• ⬜ Light/Dark switch works as expected.
• ⬜ Brand switching updates correctly (Betfair, Sky, Paddy Power).
• ⬜ Missing values fallback to primitives automatically.

Structure

• ⬜ Variables live in the correct collection (Primitives, Brand, Semantic).
• ⬜ Aliases point downstream → upstream (brand → primitive).
• ⬜ No orphaned or duplicate variables.

---

6. Export Order

To keep alias chains clean, always export in this order:

1. Primitives (agnostic base tokens)
2. Brand tokens (e.g., Betfair, Sky)
3. Semantic or product overrides

Example: Export gb.colours.blue.40 before betfair.gb.colours.button.bg

---

7. Output Example

When done correctly, your library and repo will contain:

• Figma Variables: 00-Primitives/gb.colours.blue.40 10-Brand/betfair.gb.colours.button.bg

• Tokens Repo JSON (PR):

  "betfair": {
  "gb": {
      "colours": {
      "button": {
          "bg": {
          "value": "{gb.colours.blue.40}",
          "type": "color"
          }
      }
      }
  }
  }

---

8. Summary

• Tokens are created and managed in Tokens Studio.
• Figma Variables make those tokens usable in design files.
• Brand and mode switching are powered by collections and aliases.
• Clean exports and QA ensure a reliable connection from design → code.
• The better the process is followed, the faster we can ship multi-brand, multi-platform designs with consistency and speed.