https://zenn.dev/stmn_inc/articles/fb0f03d239e5f4
エンジニアとしてデザインシステムを立ち上げてバージョン1を作る機会があったので、そのときに学んだTipsを共有します。
そもそもデザインシステムは「生産性を上げる」ことと「統一的なUI/UXを提供する」ことが目的ですが、このTipsの内容もいずれもその目的のためのものです。
Zenn
定義する面でのTips
- コンポーネントのレベル分けを定義する：レベル分けしてコンポーネントそれぞれがどのレベルに属するのかを定義することで、これらの情報構造を整理することができる。
- コンポーネントの上下関係を定義する
- コンポーネントの意味を定義する
抽象化の面でのTips
- propsの名称を統一する：同じ作用をもたらすpropsの名称と値をコンポーネントをまたいで統一する。
- デザインシステム以外の文脈の用語を使わない
- 過度に抽象化しない
コンポーネントを作るときのTips
- リセットCSSを作る
- Textコンポーネントを作る：テキストを受け取って、フォントサイズや色などを調整したテキストを表示するコンポーネント Text を作っておくと便利。
- ページ内での制約を考慮する：ページ内での制約を受けていて自由に使うことができないコンポーネントは、可能ならその制約を実装に入れてしまうと不適切な使い方を防止できる。