Support
VUD supports the following export methods from Figma
- Figma variables (native)
- Token Studio (external)
Sync options
- Enable 💠 Global to access colour, spacing, dimension and density tokens
- Enable 💠 Chart to access chart tokens
- Enable 💠 [component] to access a specific VUD component
- Enable 💠 Typography to access adaptive font sizes and weights.
Install and run the plugin
- Go to Tokens Studio plugin and click on the button that says "Try it out"
Create a GitHub account
- Go to https://github.com/signup and create an account
- Go to the Personal Access Tokens and generate a personal access token.
-
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”.
- Determine the expiration date.
Add a new sync provider
- Open TS plugin
- Click the empty file
- Go to the Settings
- Click on the GitHub
Edit the credentials
- Name: Your choice
- Personal Access Token: Copy and paste your token
- Repository (owner/repo): Visma-Unified-Design/vud-tokens
- Branch: main
- 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. |
|
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. |
Related content