フロントエンドエンジニアの立場から「デザインシステム」をつくることができたので、その作成プロセスとできたデザインシステムをご紹介します。 「デザインシステム」とは あるプロダクトのデザインに関するルールを定義し、そのルールに則ってプロダクトをデザインしていく仕組みのことです。 具体的には どうやってデザインするか(フォントや色や配置などの決め方) どうやって繰り返し使えるようにパーツを分割するか (ヘッダーやフッター、ボタンなどのパーツ分割の仕方) 何を基準にそれを更新していくのか どうやって関係者全員がそれを理解している状態にするか これらを仕組み化したものです。 簡単な例だと、みなさんもパワポでプレゼン資料を作るとき、 「タイトルはこのフォントやサイズや色を使って」 「コンテンツはこのフォントサイズで」 「使うオブジェクトの角は丸くして」 「フッターにはこのロゴを置いて」 などを考える