UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【デザイン】Zeroheightとは

Zeroheightというデザインツールを知ったので調べてみた

zeroheight.com

みたところデザインシステムのための「共通言語」を作成するWEBサービスみたい

デザインが作成したものを一覧化するツールは他にもZeplinやAbstractなどがあるが、Zeroheightはかなりドキュメント(読ませるもの)として特化している印象

プロジェクトつくったらデフォルトで下のようなページができあがっている

見出しや背景などは画面の操作で簡単に変えることができた

f:id:uggds:20210620113518p:plain

FigmaやSketchのデザイントークンやコンポーネントを簡単に取り込むことができるらしい

試しにFigmaのサンプルライブラリを取り込んでみた

f:id:uggds:20210620121020p:plain

これでページの好きなところにコンポーネントを挿入することができる

colorを取り込んでみた f:id:uggds:20210620121135p:plain

Storybookの連携

エンジニアとして嬉しいのはStorybookと連携できること

f:id:uggds:20210620121725p:plain

よくデザイナーが管理するスタイルガイドとエンジニアが管理するStorybookのズレが問題になるが、それを解決するにはどちらの立場も両方を目にする機会を増やすのがよいと考えていた

それをZeroheightが叶えてくれる

上のキャプチャにあるように、コードを書いておくこともできるが、StorybookのURLを貼り付けるとプレビューしていくれる

Storybookのアドオンも含めて表示することができるので、実際の動きも確認できるのはアツい

f:id:uggds:20210620122813p:plain

ツールが増えるのは避けたいが、Zeroheightは導入してもよいかも