Figma

Guides on how to setup VUD tokens

Support

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 https://github.com/signup 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

Notes

opacity

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

typography

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

shadow

VUD is currently using effect styles in Figma as a fallback

 

 

 

Token Studio

Available tokens

Supported

Notes

sizing

 

spacing

 

color

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

border radius

 

border width

 

opacity

 

typography

 

font family

 

font weights

 

font size

 

text decoration

 

Other

VUD uses “other” to define a scale base.