デザインシステムの構成 | 1人design system advent calender 2日目

1日目に、デザインシステムとはプロダクトであり、他の全てのプロダクトで利用可能なUIのエコシステムを提供するものであること等について学んだ。

じゃあ、実際にデザインシステムを作ろうとなったとして、どういうもので構成するべきなのか。

medium.com

上記の記事から、UXPinが39のデザインシステムを調査した結果を見ると、デザインシステムを構成する要素としては以下のものがあげられる。

• UI Patterns（UIパターン）
• Implementation Guidelines（導入ガイドライン）
• Code snippets/Code reference（コードスニペット）
• Color Palettes（カラーパレット）
• Icon families（アイコン）
• Typographic Scales（タイポグラフィ）
• Grid/Layout definitions（グリッド/レイアウト）
• Brand Guidelines（ブランドガイドライン）
• Design Principles（デザイン原則）

ブランドガイドライン、デザイン原則を含むデザインシステムは半分以下だけど、その他の要素については6割以上のデザインシステムで含まれているものになる。

さらにUXPinの記事)ではそれらの要素をもとにして、大きく3つのカテゴリーに分類してデザインシステムの構成を説明している。

• Building Blocks（基礎要素）
  • Templates
  • Typographic Scales
  • Grid Definitions
  • Icons & Assets
• UI Patterns（UIパターン）
  • Templates
  • Modules
  • Components
  • Elements
• Rules（ルール/ガイドライン）
  • Design principles
  • Implementation Guidelines
  • Editorial Guidelines

alexpate/awesome-design-systems: 💅🏻 ⚒ A collection of awesome design systemsにのっているデザインシステムを見ていっても、構成する要素は大体上述の内容と大きく違いはない。 例えば、FirefoxのPhoton Design Systemを見ると以下の形でカテゴリー分けされている。

• Photon Design
  • デザイン原則
• Visuals
  • 基礎要素
• Motion
  • モーション
• Copy
  • Voice & Tone などのガイダンス
• Patterns
  • UIパターン
• Components
  • UIコンポーネント
• Resources
  • アセット

Design Systems Sprint 0: The Silver Bullet of Product Development.の分類から考えると、以下のように分類できそう。

• Building Blocks
  • Visuals
  • Resources
  • Motion
• UI Patterns
  • Patterns
  • Components
• Rules
  • Photon Design
  • Copy

このようにPhoton Design Systemの実例から考えても、デザインシステムを構築する際には、それぞれの事情によって多少異なることはあるにしても、基本的には基礎要素、UIパターン、ルール/ガイドラインのあたりを主軸となる要素と考えてみると良さそう。

---

2日目は、デザインシステムを構成する要素について考えた。 3日目は、デザインシステムを作るときに事前に行う Interface Inventory について見ていこうと思う。