Closed7
Figma Tokens & Style Dictionary
kosukekfigma 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
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
)
)
);
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
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
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
kosukektypescript/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;
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にクローズされました