kosukek

figma tokensのjsonはエイリアスが含まれているのでtoken-transformerを介す必要がある。
Figma Tokens(json)→token-transformer→Style Dictionary

$ npm install token-transformer

kosukek

Figma Tokens Export
exportしたtokens.jsonをpackage.jsonと同階層(root直下)に配置
output.jsonに変換
$ ./node_modules/.bin/token-transformer tokens.json output.json

kosukek

$ npm install -D style-dictionary

kosukek

下記コマンドでjsonから任意のfileを生成する(要:config.json)

$ style-dictionary build --config style-dictionary.config.json

config.jsonの例

style-dictionary.config.json

{
  "source": ["output.json"],
  "platforms": {
    "scss": {
      "buildPath": "src/assets/variables/",
      "transformGroup": "scss",
      "files": [{
        "destination": "_tokens.scss",
        "format": "scss/map-deep",
        "mapName":"hoge-tokens",
        "options": {
          "outputReferences": true
        }
      }]
    }
  }
}

上記config.jsonの場合に生成されるscss

output.json

{
  "spacing": {
    "4": {
      "value": 4,
      "type": "spacing"
    },
    "8": {
      "value": 8,
      "type": "spacing"
    },
    "16": {
      "value": 16,
      "type": "spacing"
    }
  },
  "refs": {
    "palette": {
      "red": {
        "100": {
          "value": "#24120C",
          "type": "color"
        },
        "090": {
          "value": "#4F150F",
          "type": "color"
        },
        "080": {
          "value": "#75160C",
          "type": "color"
        },
        "070": {
          "value": "#A1160A",
          "type": "color"
        },
        "060": {
          "value": "#D91F11",
          "type": "color"
        },
        "050": {
          "value": "#FA5343",
          "type": "color"
        },
        "040": {
          "value": "#FC9086",
          "type": "color"
        },
        "030": {
          "value": "#FABBB4",
          "type": "color"
        },
        "020": {
          "value": "#FADCD9",
          "type": "color"
        },
        "010": {
          "value": "#FCF3F2",
          "type": "color"
        }
      },
      "orange": {
        "100": {
          "value": "#1F1410",
          "type": "color"
        },
        "090": {
          "value": "#402117",
          "type": "color"
        },
        "080": {
          "value": "#632B17",
          "type": "color"
        },
        "070": {
          "value": "#8F3415",
          "type": "color"
        },
        "060": {
          "value": "#BF4815",
          "type": "color"
        },
        "050": {
          "value": "#E86427",
          "type": "color"
        },
        "040": {
          "value": "#FC9162",
          "type": "color"
        },
        "030": {
          "value": "#FCBC97",
          "type": "color"
        },
        "020": {
          "value": "#FCDDC7",
          "type": "color"
        },
        "010": {
          "value": "#FCF2EB",
          "type": "color"
        }
      },
      "yellow": {
        "100": {
          "value": "#1C1613",
          "type": "color"
        },
        "090": {
          "value": "#38251B",
          "type": "color"
        },
        "080": {
          "value": "#54341F",
          "type": "color"
        },
        "070": {
          "value": "#70491C",
          "type": "color"
        },
        "060": {
          "value": "#946613",
          "type": "color"
        },
        "050": {
          "value": "#B3870E",
          "type": "color"
        },
        "040": {
          "value": "#D9A514",
          "type": "color"
        },
        "030": {
          "value": "#F5C518",
          "type": "color"
        },
        "020": {
          "value": "#F7E379",
          "type": "color"
        },
        "010": {
          "value": "#FAF6CF",
          "type": "color"
        }
      },
      "green": {
        "100": {
          "value": "#081A15",
          "type": "color"
        },
        "090": {
          "value": "#092E25",
          "type": "color"
        },
        "080": {
          "value": "#094536",
          "type": "color"
        },
        "070": {
          "value": "#075E45",
          "type": "color"
        },
        "060": {
          "value": "#077D55",
          "type": "color"
        },
        "050": {
          "value": "#16A163",
          "type": "color"
        },
        "040": {
          "value": "#43C478",
          "type": "color"
        },
        "030": {
          "value": "#88DBA8",
          "type": "color"
        },
        "020": {
          "value": "#C7EBD1",
          "type": "color"
        },
        "010": {
          "value": "#EBF7ED",
          "type": "color"
        }
      },
      "blue": {
        "100": {
          "value": "#0D1826",
          "type": "color"
        },
        "090": {
          "value": "#11294D",
          "type": "color"
        },
        "080": {
          "value": "#103A75",
          "type": "color"
        },
        "070": {
          "value": "#0D4EA6",
          "type": "color"
        },
        "060": {
          "value": "#186ADE",
          "type": "color"
        },
        "050": {
          "value": "#3D8DF5",
          "type": "color"
        },
        "040": {
          "value": "#75B1FF",
          "type": "color"
        },
        "030": {
          "value": "#ADCCF7",
          "type": "color"
        },
        "020": {
          "value": "#D4E4FA",
          "type": "color"
        },
        "010": {
          "value": "#F0F4FA",
          "type": "color"
        }
      }
    },
    "button": {
      "primary": {
        "value": "#186ADE",
        "type": "color"
      },
      "destructive": {
        "value": "#D91F11",
        "type": "color"
      }
    }
  }
}

scss

src/assets/variables/_tokens.scss


/**
 * Do not edit directly
 * Generated on Mon, 04 Apr 2022 07:35:39 GMT
 */

$refs-button-destructive: #D91F11 !default;
$refs-button-primary: #186ADE !default;
$refs-palette-blue-010: #F0F4FA !default;
$refs-palette-blue-020: #D4E4FA !default;
$refs-palette-blue-030: #ADCCF7 !default;
$refs-palette-blue-040: #75B1FF !default;
$refs-palette-blue-050: #3D8DF5 !default;
$refs-palette-blue-060: #186ADE !default;
$refs-palette-blue-070: #0D4EA6 !default;
$refs-palette-blue-080: #103A75 !default;
$refs-palette-blue-090: #11294D !default;
$refs-palette-blue-100: #0D1826 !default;
$refs-palette-green-010: #EBF7ED !default;
$refs-palette-green-020: #C7EBD1 !default;
$refs-palette-green-030: #88DBA8 !default;
$refs-palette-green-040: #43C478 !default;
$refs-palette-green-050: #16A163 !default;
$refs-palette-green-060: #077D55 !default;
$refs-palette-green-070: #075E45 !default;
$refs-palette-green-080: #094536 !default;
$refs-palette-green-090: #092E25 !default;
$refs-palette-green-100: #081A15 !default;
$refs-palette-yellow-010: #FAF6CF !default;
$refs-palette-yellow-020: #F7E379 !default;
$refs-palette-yellow-030: #F5C518 !default;
$refs-palette-yellow-040: #D9A514 !default;
$refs-palette-yellow-050: #B3870E !default;
$refs-palette-yellow-060: #946613 !default;
$refs-palette-yellow-070: #70491C !default;
$refs-palette-yellow-080: #54341F !default;
$refs-palette-yellow-090: #38251B !default;
$refs-palette-yellow-100: #1C1613 !default;
$refs-palette-orange-010: #FCF2EB !default;
$refs-palette-orange-020: #FCDDC7 !default;
$refs-palette-orange-030: #FCBC97 !default;
$refs-palette-orange-040: #FC9162 !default;
$refs-palette-orange-050: #E86427 !default;
$refs-palette-orange-060: #BF4815 !default;
$refs-palette-orange-070: #8F3415 !default;
$refs-palette-orange-080: #632B17 !default;
$refs-palette-orange-090: #402117 !default;
$refs-palette-orange-100: #1F1410 !default;
$refs-palette-red-010: #FCF3F2 !default;
$refs-palette-red-020: #FADCD9 !default;
$refs-palette-red-030: #FABBB4 !default;
$refs-palette-red-040: #FC9086 !default;
$refs-palette-red-050: #FA5343 !default;
$refs-palette-red-060: #D91F11 !default;
$refs-palette-red-070: #A1160A !default;
$refs-palette-red-080: #75160C !default;
$refs-palette-red-090: #4F150F !default;
$refs-palette-red-100: #24120C !default;
$spacing-16: 16 !default;
$spacing-8: 8 !default;
$spacing-4: 4 !default;

$hoge-tokens: (
  'spacing': (
    '4': $spacing-4,
    '8': $spacing-8,
    '16': $spacing-16
  ),
  'refs': (
    'palette': (
      'red': (
        '100': $refs-palette-red-100,
        '090': $refs-palette-red-090,
        '080': $refs-palette-red-080,
        '070': $refs-palette-red-070,
        '060': $refs-palette-red-060,
        '050': $refs-palette-red-050,
        '040': $refs-palette-red-040,
        '030': $refs-palette-red-030,
        '020': $refs-palette-red-020,
        '010': $refs-palette-red-010
      ),
      'orange': (
        '100': $refs-palette-orange-100,
        '090': $refs-palette-orange-090,
        '080': $refs-palette-orange-080,
        '070': $refs-palette-orange-070,
        '060': $refs-palette-orange-060,
        '050': $refs-palette-orange-050,
        '040': $refs-palette-orange-040,
        '030': $refs-palette-orange-030,
        '020': $refs-palette-orange-020,
        '010': $refs-palette-orange-010
      ),
      'yellow': (
        '100': $refs-palette-yellow-100,
        '090': $refs-palette-yellow-090,
        '080': $refs-palette-yellow-080,
        '070': $refs-palette-yellow-070,
        '060': $refs-palette-yellow-060,
        '050': $refs-palette-yellow-050,
        '040': $refs-palette-yellow-040,
        '030': $refs-palette-yellow-030,
        '020': $refs-palette-yellow-020,
        '010': $refs-palette-yellow-010
      ),
      'green': (
        '100': $refs-palette-green-100,
        '090': $refs-palette-green-090,
        '080': $refs-palette-green-080,
        '070': $refs-palette-green-070,
        '060': $refs-palette-green-060,
        '050': $refs-palette-green-050,
        '040': $refs-palette-green-040,
        '030': $refs-palette-green-030,
        '020': $refs-palette-green-020,
        '010': $refs-palette-green-010
      ),
      'blue': (
        '100': $refs-palette-blue-100,
        '090': $refs-palette-blue-090,
        '080': $refs-palette-blue-080,
        '070': $refs-palette-blue-070,
        '060': $refs-palette-blue-060,
        '050': $refs-palette-blue-050,
        '040': $refs-palette-blue-040,
        '030': $refs-palette-blue-030,
        '020': $refs-palette-blue-020,
        '010': $refs-palette-blue-010
      )
    ),
    'button': (
      'primary': $refs-button-primary,
      'destructive': $refs-button-destructive
    )
  )
);

kosukek

typescript/module-declarations

config.json

style-dictionary.config.json

{
  "source": ["output.json"],
  "platforms": {
    ...
    "ts": {
      "buildPath": "src/assets/variables/",
      "transformGroup": "js",
      "files": [
        {
          "format": "javascript/module",
          "destination": "colors.js"
        },
        {
          "format": "typescript/module-declarations",
          "destination": "colors.d.ts"
        }
      ]
    }
  }
}

colors.d.ts

/**
 * Do not edit directly
 * Generated on Mon, 04 Apr 2022 08:17:51 GMT
 */

export default tokens;

declare interface DesignToken {
  value: any;
  name?: string;
  comment?: string;
  themeable?: boolean;
  attributes?: {
    category?: string;
    type?: string;
    item?: string;
    subitem?: string;
    state?: string;
    [key: string]: any;
  };
  [key: string]: any;
}

declare const tokens: {
  "spacing": {
    "4": DesignToken,
    "8": DesignToken,
    "16": DesignToken
  },
  "refs": {
    "palette": {
      "red": {
        "100": DesignToken,
        "090": DesignToken,
        "080": DesignToken,
        "070": DesignToken,
        "060": DesignToken,
        "050": DesignToken,
        "040": DesignToken,
        "030": DesignToken,
        "020": DesignToken,
        "010": DesignToken
      },
      "orange": {
        "100": DesignToken,
        "090": DesignToken,
        "080": DesignToken,
        "070": DesignToken,
        "060": DesignToken,
        "050": DesignToken,
        "040": DesignToken,
        "030": DesignToken,
        "020": DesignToken,
        "010": DesignToken
      },
      "yellow": {
        "100": DesignToken,
        "090": DesignToken,
        "080": DesignToken,
        "070": DesignToken,
        "060": DesignToken,
        "050": DesignToken,
        "040": DesignToken,
        "030": DesignToken,
        "020": DesignToken,
        "010": DesignToken
      },
      "green": {
        "100": DesignToken,
        "090": DesignToken,
        "080": DesignToken,
        "070": DesignToken,
        "060": DesignToken,
        "050": DesignToken,
        "040": DesignToken,
        "030": DesignToken,
        "020": DesignToken,
        "010": DesignToken
      },
      "blue": {
        "100": DesignToken,
        "090": DesignToken,
        "080": DesignToken,
        "070": DesignToken,
        "060": DesignToken,
        "050": DesignToken,
        "040": DesignToken,
        "030": DesignToken,
        "020": DesignToken,
        "010": DesignToken
      }
    },
    "button": {
      "primary": DesignToken,
      "destructive": DesignToken
    }
  }
}

colors.js

/**
 * Do not edit directly
 * Generated on Mon, 04 Apr 2022 08:17:51 GMT
 */

module.exports = {
  "spacing": {
    "4": {
      "value": 4,
      "type": "spacing",
      "filePath": "output.json",
      "isSource": true,
      "original": {
        "value": 4,
        "type": "spacing"
      },
      "name": "Spacing4",
      "attributes": {
        "category": "spacing",
        "type": "4"
      },
      "path": [
        "spacing",
        "4"
      ]
    },
    ...
  },
  "refs": {
    "palette": {
      "blue": {
        "100": {
          "value": "#0D1826",
          "type": "color",
          "filePath": "output.json",
          "isSource": true,
          "original": {
            "value": "#0D1826",
            "type": "color"
          },
          "name": "RefsPaletteBlue100",
          "attributes": {
            "category": "refs",
            "type": "palette",
            "item": "blue",
            "subitem": "100"
          },
          "path": [
            "refs",
            "palette",
            "blue",
            "100"
          ]
        },
      ...
      }
    },
    "button": {
      "primary": {
        "value": "#186ADE",
        "type": "color",
        "filePath": "output.json",
        "isSource": true,
        "original": {
          "value": "#186ADE",
          "type": "color"
        },
        "name": "RefsButtonPrimary",
        "attributes": {
          "category": "refs",
          "type": "button",
          "item": "primary"
        },
        "path": [
          "refs",
          "button",
          "primary"
        ]
      },
      "destructive": {
        "value": "#D91F11",
        "type": "color",
        "filePath": "output.json",
        "isSource": true,
        "original": {
          "value": "#D91F11",
          "type": "color"
        },
        "name": "RefsButtonDestructive",
        "attributes": {
          "category": "refs",
          "type": "button",
          "item": "destructive"
        },
        "path": [
          "refs",
          "button",
          "destructive"
        ]
      }
    }
  }
};

import tokens from '../../../../assets/variables/colors'
{tokens.refs.button.primary.value} // #186ADE

kosukek

typescript/es6-declarations

config.json

    },
    "tsEs6": {
      "buildPath": "src/assets/variables/",
      "transformGroup": "js",
      "files": [
        {
          "format": "javascript/es6",
          "destination": "colors2.js"
        },
        {
          "format": "typescript/es6-declarations",
          "destination": "colors2.d.ts"
        }
      ]
    }
  }
}

colors.js

/**
 * Do not edit directly
 * Generated on Tue, 05 Apr 2022 00:24:09 GMT
 */

export const Spacing4 = 4;
export const Spacing8 = 8;
export const Spacing16 = 16;
export const RefsPaletteRed100 = "#24120C";
export const RefsPaletteRed090 = "#4F150F";
export const RefsPaletteRed080 = "#75160C";
export const RefsPaletteRed070 = "#A1160A";
export const RefsPaletteRed060 = "#D91F11";
export const RefsPaletteRed050 = "#FA5343";
export const RefsPaletteRed040 = "#FC9086";
export const RefsPaletteRed030 = "#FABBB4";
export const RefsPaletteRed020 = "#FADCD9";
export const RefsPaletteRed010 = "#FCF3F2";
export const RefsPaletteOrange100 = "#1F1410";
export const RefsPaletteOrange090 = "#402117";
export const RefsPaletteOrange080 = "#632B17";
export const RefsPaletteOrange070 = "#8F3415";
export const RefsPaletteOrange060 = "#BF4815";
export const RefsPaletteOrange050 = "#E86427";
export const RefsPaletteOrange040 = "#FC9162";
export const RefsPaletteOrange030 = "#FCBC97";
export const RefsPaletteOrange020 = "#FCDDC7";
export const RefsPaletteOrange010 = "#FCF2EB";
export const RefsPaletteYellow100 = "#1C1613";
export const RefsPaletteYellow090 = "#38251B";
export const RefsPaletteYellow080 = "#54341F";
export const RefsPaletteYellow070 = "#70491C";
export const RefsPaletteYellow060 = "#946613";
export const RefsPaletteYellow050 = "#B3870E";
export const RefsPaletteYellow040 = "#D9A514";
export const RefsPaletteYellow030 = "#F5C518";
export const RefsPaletteYellow020 = "#F7E379";
export const RefsPaletteYellow010 = "#FAF6CF";
export const RefsPaletteGreen100 = "#081A15";
export const RefsPaletteGreen090 = "#092E25";
export const RefsPaletteGreen080 = "#094536";
export const RefsPaletteGreen070 = "#075E45";
export const RefsPaletteGreen060 = "#077D55";
export const RefsPaletteGreen050 = "#16A163";
export const RefsPaletteGreen040 = "#43C478";
export const RefsPaletteGreen030 = "#88DBA8";
export const RefsPaletteGreen020 = "#C7EBD1";
export const RefsPaletteGreen010 = "#EBF7ED";
export const RefsPaletteBlue100 = "#0D1826";
export const RefsPaletteBlue090 = "#11294D";
export const RefsPaletteBlue080 = "#103A75";
export const RefsPaletteBlue070 = "#0D4EA6";
export const RefsPaletteBlue060 = "#186ADE";
export const RefsPaletteBlue050 = "#3D8DF5";
export const RefsPaletteBlue040 = "#75B1FF";
export const RefsPaletteBlue030 = "#ADCCF7";
export const RefsPaletteBlue020 = "#D4E4FA";
export const RefsPaletteBlue010 = "#F0F4FA";
export const RefsButtonPrimary = "#186ADE";
export const RefsButtonDestructive = "#D91F11";

colors.d.ts

/**
 * Do not edit directly
 * Generated on Tue, 05 Apr 2022 00:24:09 GMT
 */

export const Spacing4 : number;
export const Spacing8 : number;
export const Spacing16 : number;
export const RefsPaletteRed100 : string;
export const RefsPaletteRed090 : string;
export const RefsPaletteRed080 : string;
export const RefsPaletteRed070 : string;
export const RefsPaletteRed060 : string;
export const RefsPaletteRed050 : string;
export const RefsPaletteRed040 : string;
export const RefsPaletteRed030 : string;
export const RefsPaletteRed020 : string;
export const RefsPaletteRed010 : string;
export const RefsPaletteOrange100 : string;
export const RefsPaletteOrange090 : string;
export const RefsPaletteOrange080 : string;
export const RefsPaletteOrange070 : string;
export const RefsPaletteOrange060 : string;
export const RefsPaletteOrange050 : string;
export const RefsPaletteOrange040 : string;
export const RefsPaletteOrange030 : string;
export const RefsPaletteOrange020 : string;
export const RefsPaletteOrange010 : string;
export const RefsPaletteYellow100 : string;
export const RefsPaletteYellow090 : string;
export const RefsPaletteYellow080 : string;
export const RefsPaletteYellow070 : string;
export const RefsPaletteYellow060 : string;
export const RefsPaletteYellow050 : string;
export const RefsPaletteYellow040 : string;
export const RefsPaletteYellow030 : string;
export const RefsPaletteYellow020 : string;
export const RefsPaletteYellow010 : string;
export const RefsPaletteGreen100 : string;
export const RefsPaletteGreen090 : string;
export const RefsPaletteGreen080 : string;
export const RefsPaletteGreen070 : string;
export const RefsPaletteGreen060 : string;
export const RefsPaletteGreen050 : string;
export const RefsPaletteGreen040 : string;
export const RefsPaletteGreen030 : string;
export const RefsPaletteGreen020 : string;
export const RefsPaletteGreen010 : string;
export const RefsPaletteBlue100 : string;
export const RefsPaletteBlue090 : string;
export const RefsPaletteBlue080 : string;
export const RefsPaletteBlue070 : string;
export const RefsPaletteBlue060 : string;
export const RefsPaletteBlue050 : string;
export const RefsPaletteBlue040 : string;
export const RefsPaletteBlue030 : string;
export const RefsPaletteBlue020 : string;
export const RefsPaletteBlue010 : string;
export const RefsButtonPrimary : string;
export const RefsButtonDestructive : string;

kosukek

install

$ npm install -D token-transformer
$ npm install -D style-dictionary

config.json

style-dictionary.config.json

{
  "source": ["output.json"],
  "platforms": {
    "scss": {
      "buildPath": "src/assets/variables/",
      "transformGroup": "scss",
      "files": [{
        "destination": "_tokens.scss",
        "format": "scss/map-deep",
        "mapName":"hoge-tokens",
        "options": {
          "outputReferences": true
        }
      }]
    }
  }
}

npm script

package.json

  "scripts": {
    ...
    "tokne:genJson": "./node_modules/.bin/token-transformer tokens.json output.json",
    "token:genToken": "style-dictionary build --config style-dictionary.config.json",
    "token": "run-s tokne:genJson token:genToken"
  },

このスクラップは2022/04/05にクローズされました