A simple design token storage server for Figma Token Studio

Using json-server as an easy way to store and serve design token files

Prerequisites

You must have Node installed.

We’re going to be installing and running json-server as a simple token storage server for the Token Studio plugin for Figma

https://www.npmjs.com/package/json-server

Instructions

Create a folder and start a terminal in it:

Run the following:

npm install json-server

Create a file in the folder called tokens.json

Paste the following into the file (you can add as many ID rows as you like. Each one can be used as a separate tokens store for different projects. These can still be added later too)

{
  "tokens": [
      { "id": "1"},
      { "id": "2"}
    ]
}

Back in the terminal run the following (feel free to change the port number)

npx json-server tokens.json --port 4949

Check it works by going to a browser and entering http://localhost:4949/tokens/1

In Token Studio create a Add New Sync Provider and choose Generic Versioned

Give it a name and then use http://localhost:4949/tokens/1 as the url (change 1 to 2, etc depending on how many entries you put in the tokens.json file and which one you want to target. Set the flow type to Read/Write

If you create some tokens and sync, you will see the tokens.json file storing the tokens: