Skip to main content

🚀 Getting Started

Now that you’ve set up your access and installed Tokens Studio (see the New Joiner Guide), here’s how to get started designing with our Design System.

1. Open a New Design File​

  • Create a new file in the Product → Your Squad Figma project.
  • Enable the Design System libraries under Assets → Library.

2. Insert Components​

  • Use Assets panel → drag and drop a component (e.g., a Button or Input).
  • Do not recreate styles manually (colors, typography). Always start with components.

3. Apply Tokens​

  • Select a layer (e.g., button background).
  • In Tokens Studio, apply the correct token (e.g., color.brand.primary).
  • This ensures your design stays consistent and updates automatically across themes.

4. Switch Themes​

  • Use Tokens Studio → select a Theme (e.g., Betfair Light).
  • Validate your screen in at least two brands before handoff.

5. Learn by Example​

  • Explore the Quick Start file for an example screen using tokens + components.
  • Duplicate it into your playground to experiment.

✅ You’re Ready​

From here you can:

  • Continue to the Foundations to learn about colors, typography, and spacing.