Open7

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

yukyuyukyu

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>

https://techblg.app/articles/how-to-fix-type-string-cant-be-used-to-index-type-error/

いい感じになった