Token Lab

About this plugin

Convert your Figma variables into Design Tokens, ready for consumption by Style Dictionary.

The plugin requires at least one variable to exist in the Figma document. With that present, pressing the "Export Variables" button will convert the variables table into JSON objects, in the following structure:

// collection-1.json

{

  "collection-1": {

    "my-variable": {

      "value": "#ffffff"

    }

  }

}

If variables are grouped the structure becomes:

// collection-1.json

{

  "collection-1": {

    "group-name": {

      "my-variable": {

        "value": "#ffffff"

      },

      "another-variable": {

        "value": "#000000"

      }

    }

  }

}

If modes are used, those are added like so:

// collection-1-mode-one.json

{

  "collection-1": {

    "group-name": {

      "my-variable": {

        "mode-one": {

          "value": "#ffffff"

        }

      }

    }

  }

}

// collection-1-mode-two.json

{

  "collection-1": {

    "group-name": {

      "my-variable": {

        "mode-two": {

          "value": "#000000"

        }

      }

    }

  }

}

If a description is added to a variable, it will be included as a comment:

// collection-1.json 

{

  "collection-1": {

    "my-variable": {

      "value": "#ffffff",

      "comment": "A Figma description"

    }

  }

}

This plugin has primarily been built and tested for one specific team, your mileage may vary.