デザインシステム作成Tips 9つ

はじめに エンジニアとしてデザインシステムを立ち上げてバージョン1を作る機会があったので、そのときに学んだTipsを共有します。 そもそもデザインシステムは「生産性を上げる」ことと「統一的なUI/UXを提供する」ことが目的ですが、このTipsの内容もいずれもその目的のためのものです。 定義する面でのTips 1. コンポーネントのレベル分けを定義する UI上ではある要素を組み合わせて別の要素が作られることがあります。例えばテキストとフレームからボタンが作られたり、ボタンを並べてページネーションを作ったり。 レベル分けしてコンポーネントそれぞれがどのレベルに属するのかを定義することで、これらの情報構造を整理することができます。アトミックデザインがその代表例ですね。 例えば以下のように分けることができます。 Level0: Styles UIを作る最小の要素。Typography, Color