2021/03/08 - Qiita Blog

2021/3/82021/03/08

Incrementsのデザインシステム公開のお知らせ（後編）

こんにちは。Incrementsのデザイナーの綿貫です。

今回はIncrementsのデザインシステム公開のお知らせ（後編）をお届けします。
前編はこちらのリンクからどうぞ。

後編であるこの記事の内容は以下の通りです。

はじめに：前回のおさらい
公開データについて
トピック：UIデータのアップデートについて

はじめに：前回のおさらい

少しだけ前編の内容をおさらいします。

現在Incrementsではデザインにも力を入れていて、その一環で小規模なデザインシステムを作成しました。
まだまだ発展途上ではありますが「今からデザインシステムを作ろうとしている人達」にとって参考になれば幸いです。
これから作り始める誰かの参考になることで、日本全体のデザインに少しでも貢献できればと思い、公開に至りました。

Incrementsのデザインシステムの構造

Increments全体に適用されるルールと、各プロダクトで個別にオーバーライドしている部分があり、図のような構成で成り立っています。

Qiita VIと各プロダクトごとのオーバーライドの関係性

Increments全体のルールをQiita VIと呼び、それらをQiita, Qiita Team, Qiita Jobsが継承していると認識してください。

デザインシステム内での継承関係

具体的な継承やオーバーライドは上の画像のようになっていて、各階層で上から下に向かって要素を継承しています。
例えば、Qiita - ComponentsはQiita VI - Componentsを継承しQiita - UIから参照されています。

また、同じ階層にあるデータ（例えばQiita - ComponentsとQiita Team - ComponentsとQiita Jobs - Components）には互換性はなく、それぞれのプロダクトに固有の要素を持っています。

公開データについて

後編でも2つのデータを公開します。
詳細はすぐ後で説明しますが、QiitaとQiita Teamでそれぞれ使用しているコンポーネント群です。

2つのデータに共通している内容

基本的にAuto Layoutを用いて作成し、様々な変更に耐えられるようにしている
状態や権限によるUIの変化はVariantsを使って管理している

Qiita Components

Qiita VIを継承し、Qiita固有のUIライブラリとして定義されたファイル
- Qiitaはページテンプレートの種類が多いため、必然的にコンポーネント数も多め
- 通常版のUIとβ版のUIは同じファイルで管理している
  - β版UIもVariantsを用いて同一コンポーネントとして扱っている
内容（全てを紹介すると多すぎるので抜粋）
- Actions Menu
- Feed Navigation
- Footer
- Header
- Post
- Table Of Contents
- User Page Sidebar

Qiita Team Components

Qiita VIを継承し、Qiita Team固有のUIライブラリとして定義されたファイル
- Qiita Teamの場合はページテンプレートが少ないのもあり、コンポーネント数はかなり少なめ
  - ほとんどのページで使い回すレベルのものだけを定義していて、今後の改修と並行して拡張していく予定
  - とは言え、定義しているコンポーネントではVariantsの設定まで施している
内容
- Article Sidebar
- Editor Footer
- Footer
- Header
- Settings Sidebar
- SubHeader Navigation
- Tooltip