Open7
デザインシステムを作りたい

下準備
github

Fimga Tokenを元にいいかんじにページを自動生成したい
Figma Tokenでデザイントークンを作成して、Githubにプッシュ。
この時デザイントークンを元に、そのドキュメントが生成されるようにしたい。
{
"global": {
"primitiveColor": {
"black": {
"value": "#000",
"type": "color"
},
"white": {
"value": "#fff",
"type": "color"
}
},
"m": {
"value": "16px",
"type": "sizing"
}
},
"$themes": [],
"$metadata": {
"tokenSetOrder": [
"global"
]
}
}
...
interface Colors {
[key: string]: {
value : string
type : string
}
}
...
const colors: Colors = Token.global.primitiveColor
...
<tbody>
{Object.keys(colors).map((key) => (
<tr>
<td>{key}</td>
<td>{colors[key].value}</td>
<td><ColorPreview color={colors[key].value} /></td>
</tr>
))}
</tbody>
いい感じになった

Color ページ