Skip to content
Easily add design tokens to layouts
Branch: master
Clone or download
Latest commit 7c5bedc Jul 25, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore adds files Jul 12, 2018 adds design tokens, divides menu Jul 23, 2018


Maps your hardcoded colors values to actual design tokens and adds a label to your layout.

If you work with design tokens in your project, one of the issues you might face is receiving layouts and having to inspecting them to find out which design token corresponds to certain HEX value.

That's time consuming, and would be really good to receive such layouts with some "text labels" indicating which design token applies to certain color.

This plugin comes to make both Designers and Developers's lives easier: you provide a file with your main colors and their variations, and the plugin will take care of mapping those to design tokens.

TLDR;: Designers hands over screens with the design tokens developers should use for certain elements. That means: no more time wasted on inspecting hardcoded values.



  1. Provide a JSON file with your project's decision base colors
// variations are based on the color`s lightness channel
// (E.g color(var(--color-green), lightness(25%)))
  "baseColors": {
    "green": {
      "default": "#00b39e",
      "25": "25%",
      "40": "40%",
      "85": "85%",
      "95": "95%"
    "white": {
      "default": "#ffffff"
    "navy": {
      "default": "#213c45",
      "30": "30%",
      "40": "40%",
      "98": "98%"
  1. Import this file on Plugins > Tokenizer > Import base colors file...

  1. Select an object in the Artboard

  2. Go to Plugins > Tokenizer > Get color variable > Fill Color or Border Color

  3. 🎉 The corresponding design token to that label will be applied to the Artboard

Future updates

  • Implement actual design tokens (not only base colors)
  • Tones for text
You can’t perform that action at this time.