Skip to main content

start designing

Sync design tokens

Our design tokens are stored on GitHub as our single source of truth. We use Tokens Studio (Figma Tokens) to load and publish tokens to GitHub, where they are transformed for Web and Android usage.

Docusaurus themed image Docusaurus themed image

1. Request access to GitHub​

If you don't have a DeliveryHero GitHub account yet, follow this guide to request yours. Once your manager approves your request, you'll receive an invitation email to join DH's organisation on GitHub.

After getting your DH GitHub account, you'll also need to join the Design Chapter team on GitHub. Just send a message on our Slack channel, and we'll take care of it.

2. Generate your Personal Access Token​

On GitHub, 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 then click "Generate new token".

Give your access token a name and an expiration date, and select repo as the scope. Scroll down and click "Generate token".

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

Next, click "Configure SSO", then "Authorize" and follow the authentication steps.

3. Run Tokens Studio​

Open a Figma file and run the Tokens Studio plugin. You can run it directly from Figma: click the "Resources" icon, switch to the "Plugins" tab and search for "Tokens Studio". Once you've found the plugin, click "Run".

Go to the "Settings" tab, select "Add new" and then "GitHub".

Fill in the form:

  • Name: add any name, e.g. Tokens Studio
  • Personal Access Token: the token which you generated in step 2.
  • Repository: deliveryhero/log-vendor-amigo-tokens
  • Branch: tokens-studio
  • File path: figma/tokens.json

And confirm pulling the tokens from GitHub.

4. Enable Amigo's token sets​

Go back to the "Tokens" tab and check all token sets on the plugin's left panel.

5. Applying tokens to designs​

Avoid using Tokens Studio to apply Color, Typography and Elevation tokens, as these are supported natively by Figma as styles. Use Figma's own styles when applying these properties (more here).

But feel free to use the plugin to apply tokens that are not supported natively by Figma (e.g. Spacing, Sizing, Border Width and Border Radius).

To learn more about Tokens Studio, check the plugin's documentation page.