Design System

制作の動機

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

コメント

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

主な特徴

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

担当した役割

• 01デザインシステムの core · Document · Storybook のための monorepo 構築 (pnpm workspace)
• 02MD ファイルベースで SSG 化した静的 Document ページの作成
• 03GitHub Actions の配備スクリプト作成および配備
• 04他プロジェクトでの利用 / 更新のための CLI コマンド作成