移行中の知識
デザインシステム
Design System
定義
デザインシステム（design system）とは、複数のproductやscreenを一貫して設計・実装・更新できるように、基礎ルール、再利用可能なUIコンポーネント、パターン、デザイン上の判断、実装code、利用方法やaccessibilityのguidance等を共有し運用する仕組みです。何を含むかはsystemの目的や組織によって異なり、component libraryやFigma libraryだけを持つこととは同義ではありません。visual languageが表現上の語彙や使い方の規則を扱うのに対し、design systemはそれらを含むdesign decisionを再利用可能なasset・guidance・implementationへ接続して継続運用する側面を持ちます。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
product family
複数serviceでbuttonを共通運用する
見るポイント
buttonの色とradiusを同じにするだけでなく、種類、状態、label、focus、disabled、loading、使用条件、code implementationを共有し、変更時に複数productへ反映できる状態を作る。componentを置いたことではなく、判断と運用までsystemとして見る。
organization websites
小規模サイト群の共通基盤を作る
見るポイント
typography、spacing、color、form control、navigation等を再利用可能にしながら、すべてのpageを同じlayoutへ固定しない。共通化する判断と、content / contextごとに変える部分を分ける。
注意
誤解しやすい点
- component libraryやFigma fileが存在するだけでdesign systemが成立していると考える。
- 全screenを同じ見た目へ揃えることをdesign systemの目的にし、contentやtaskに応じたvariationを許さない。
- codeだけ、またはdesign assetだけを正本にし、usage / accessibility / content guidanceや変更運用との不整合を放置する。
- 他社design systemのcomponentsを導入すれば、その組織のresearchやcontextまで自動的に移植できると考える。
関連
関連する概念
出典