Detailed guides on how to get VUD tokens to your enviroment

Before you begin

  1. Get familiar with our tokens
  2. Understand the logic
  3. Get access to our component and VUD tokens




Get read-only access

You are not limited to the components we provide, you can also create your own custom components. You can apply VUD tokens through:

  1. Figma variables
  2. Token Studio plugin (Optional).




Get started


  1. Enable VUD 💠 variables style library to access our VUD tokens
  2. Enable VUD 💠 components to access our VUD components


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 scope repo.
    Fine-grained tokens: Choose the repos for access and make sure 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!










Have a question, comment or idea?

Join our internal Slack channels to share your thoughts!