How to use exported Figma's tokens JSON file in VueJS/NuxtJS project?

[gaisinskii]

Hello!

I've bought a Figma UI Kit license for a designer and he has done his job adjusting it for our needs and exported a JSON file with all the design tokens for a frontend developer. But the docs do not say on how to map this JSON file to PrimeVue's plugin options.

[gaisinskii]

After some more digging I found somewhat possible solution and I hope that the team can confirm that it is the correct way of doing it:

1. In Figma open Plugins window with ⌘ + P and find "Tokens Studio for Figma". In my initial message I used "PrimeUI Theme Generator" plugin for generating JSON file with tokens.

2. Click "Load and export"

3. Click "Export to file/folder"

4. Export as a single file. Here I only checked "All token sets"

5. Import the file into your frontend application and setup PrimeVue plugin

[cagataycivici]

You'd need Designer to convert the json to an actual theme file.

https://primeui.store/designer
https://primeng.org/designer

PrimeUI Theme Generator plugin can connect to Designer APIs to do it from Figma as well.