Guides on how to setup VUD tokens


VUD supports the following export methods from Figma

  1. Figma variables (native)
  2. Token Studio (external)




Sync options

  1. Enable VUD 💠 global to access colour, spacing, dimension and density tokens
  2. Enable VUD 💠 chart to access chart tokens
  3. Enable VUD 💠 [component] to access a specific VUD component

Install and run the plugin

  1. Go to Tokens Studio plugin and click on the button that says "Try it out"


Create a GitHub account

  1. Go to and create an account
  2. Go to the Personal Access Tokens and generate a personal access token.
  3. Choose either Classic or Fine-grained tokens

    Classis: Generate a new token and select the scope repo.
    Fine-grained tokens: Choose the repos for access and ensure that Contents has Read and Write selected under “Repository permissions”.
  4. Determine the expiration date.


Add a new sync provider

  1. Open TS plugin
  2. Click the empty file
  3. Go to the Settings
  4. Click on the GitHub


Edit the credentials

  1. Name: Your choice
  2. Personal Access Token: Copy and paste your token
  3. Repository (owner/repo): Visma-Unified-Design/vud-tokens
  4. Branch: main
  5. File Path (e.g. tokens.json) or Folder Path (e.g. tokens): Tokens

And you are all set!




Figma variables

Figma variables are still in open beta and are expected to follow more changes. Tokens that yet are supported in Figma:

Available token



VUD is currently using hard values in Figma as a fallback.


VUD is currently using the text style in Figma as a fallback.


VUD is currently using effect styles in Figma as a fallback




Token Studio

Available tokens








VUD uses solid, gradient and TS modifiers (Pro) colour tokens.

border radius


border width






font family


font weights


font size


text decoration



VUD uses “other” to define a scale base.