Skip to main content

🔗 Connect Tokens Studio to GitHub

Connect the plugin to our GitHub repo to pull/push token changes.

1) Request access​

  • Request org + repo access following your local process.
  • Confirm 2FA is enabled on your GitHub account.
note

If access differs per brand/BU, check your onboarding doc or ask in #design-system.

2) Authenticate in Tokens Studio​

  • Open Tokens Studio in Figma → Settings → Git.
  • Choose Provider: GitHub → Sign in and authorize the app.

3) Select the repo & path​

  • Pick the correct repository and tokens directory (e.g., /tokens).
  • Confirm the default branch (main) and syncing strategy.
  • Pull tokens once.
  • Check the console for errors; if you see permission issues, re-auth with correct scope.

Troubleshooting​

  • Permission denied → confirm you’re in the right GitHub org & repo.
  • 2FA required → enable 2FA.
  • Repo not listed → ask a maintainer to grant you access.

Next​

Figma + Tokens Studio Set up

Intro​

Storing tokens on GitHub makes a lot of sense. It's version controlled, allows us to work in different branches (think of a brand refresh that lives on a different branch than the current live version) and gives us varying access levels such as Read or Write access. Also, we can integrate GitHub Actions which will allow you to create a token pipeline with Style Dictionary or other tools.

How to set up GitHub + Tokens Plugin​

To setup Github on Figma Tokens follow this steps:

Step 1: Request Access​

NOTE: SBG staff access

⚠️ At present UK&I SBG & PPB processes are different. For SBG how to get access to documented on this SBG confluence page.

  1. Create a personal GitHub account using your __.__@flutteruki e-mail address (you can pick free plan)

  2. as username try to use something similar to your LDAP username (this will be the name showing in the commit message)

  3. Enable 2FA on your Github account

  4. Fill this ticket, requesting access to GitHub yourusername Access: Github After a few hours, you should have GitHub on the MyApps Okta page:

  5. Access Github from the MyApps portal – this will link the personal account with the UKI identity and it will grant access to UKI-Internal You can check which organisations you are part of by accessing this link. If this link is not working, it might mean that you are not part of any organisation PPB-internal should appear on the list

  6. After about 30 min there is an automation that will invite all users from ppb-internal to Flutter-Global, the invitation will be sent to the email address set on the GitHub account. The pending invitation can also be seen here as a banner, in about 30 min after joining the ppb-internal org. The user will have to accept the invitation for access to be granted on Flutter-Global

(NOTE: After all these steps, make sure you're logged out from Github before you access it through MyApps; If you're logged in before you can experience some permission errors.)

Step 2: Plugin Sync​

!Create your Personal Access Token Go to the Personal Access Tokens section by clicking here, or click on your Avatar in the top right, go to Settings > scroll down to Developer Settings > Personal Access Tokens and generate a new token and select scope repo, decide for yourself when that token should expire. Scroll down and click Generate token.

Copy that token, you'll need it in a second and won't see it again if you close the page.

Also, never share this token with anyone who shouldn't have access to your repository. The token I shared in the video above was deleted already, treat it like your personal password.abac

On Figma Tokens, open Settings and click on Github

Click on 'Add new credentials'

Fill the fields with this data: Name: Anything you want, it's just visual info Personal Access Token: (the one you generated earlier) Repository: Flutter-Global/the-wall Default Branch: main File Path: packages/the-wall-design-tokens/data/tokens

Regaining Expired Access​

Regain Revoked Access After 12 months of inactive edit activity your accesss will be revoked. To regain access follow instructions on Step 1 again.

Error 500 If you're faced with an error 500 code on GitHub, clear cookies and cache or use a private browsing window.

Slack Support Channels​