Design System

制作の動機

プロジェクト数の増加に対してデザインの断片化が目立ち始めていました。 これを防ぐため、基準となるデザインシステムを構築しました。

コメント

Document ページ (SSG)、Storybook / Plugin、CLI などの利便機能まで揃えて仕上げたデザインシステムです。 1 年が経った今もよく使われており、たまにコンポーネントが追加されることもあります。

主な特徴

• 01充実したコンポーネントラインナップ (40+ 種)
• 02SSG で生成された Document ページ + Storybook によるコンポーネント Preview
• 03デザイナーとの迅速な協業のため、Notion API を活用した Storybook comment plugin を実装
• 04Document ページ内に Icon をすぐ検索·利用できる専用ページを提供
• 05デザイントークン値も自動でページ化

担当した役割

• 01デザインシステムの core · Document · Storybook のための monorepo 構築 (pnpm workspace)
• 02MD ファイルベースで SSG 化した静的 Document ページの作成
• 03GitHub Actions の配備スクリプト作成および配備
• 04他プロジェクトでの利用 / 更新のための CLI コマンド作成
• 05自前で実装したコンポーネント: アコーディオン、Button、code block / editor / snippet、date picker、editor、table、video player など