Zeroheightというデザインツールを知ったので調べてみた
みたところデザインシステムのための「共通言語」を作成するWEBサービスみたい
デザインが作成したものを一覧化するツールは他にもZeplinやAbstractなどがあるが、Zeroheightはかなりドキュメント(読ませるもの)として特化している印象
プロジェクトつくったらデフォルトで下のようなページができあがっている
見出しや背景などは画面の操作で簡単に変えることができた
FigmaやSketchのデザイントークンやコンポーネントを簡単に取り込むことができるらしい
試しにFigmaのサンプルライブラリを取り込んでみた
これでページの好きなところにコンポーネントを挿入することができる
colorを取り込んでみた
Storybookの連携
エンジニアとして嬉しいのはStorybookと連携できること
よくデザイナーが管理するスタイルガイドとエンジニアが管理するStorybookのズレが問題になるが、それを解決するにはどちらの立場も両方を目にする機会を増やすのがよいと考えていた
それをZeroheightが叶えてくれる
上のキャプチャにあるように、コードを書いておくこともできるが、StorybookのURLを貼り付けるとプレビューしていくれる
Storybookのアドオンも含めて表示することができるので、実際の動きも確認できるのはアツい
ツールが増えるのは避けたいが、Zeroheightは導入してもよいかも