Open2022/12/18にコメント追加7

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

下準備

github

Storybook

空のプロジェクトではお勧めされていないので、Reactなどのプロジェクトを作る必要がありそう。
以下を参考にStorybookが動くまでをやった

Style Dictionary

npx style-dictionary init basic

公開しておく場所

https://fly-by.netlify.app/
fly byと名付けたので変更

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 ページ