Introduction

デザインシステムとは

デザインシステムは、一貫性のあるユーザー体験を構築するための、再利用可能なコンポーネントとパターンの集合体です。

このプレイブックでは、MUI (Material UI) をベースに、Figma テンプレートとコードの連携を軸としたデザインシステムの構築方法を学びます。

このプレイブックで学べること

• デザイントークン: MUI テーマ (createTheme) による色、タイポグラフィ、スペーシングの定義
• コンポーネント設計: MUI コンポーネントのカスタマイズと拡張パターン
• API 設計: MUI ネイティブ API を活かした型安全なコンポーネント設計
• アクセシビリティ: MUI 内蔵のアクセシビリティ機能と追加の考慮事項
• Figma 連携: MUI Figma テンプレートからのコード生成パイプライン

プロジェクト構成

このプレイブックは pnpm モノレポとして構成されています：

パッケージ	説明
packages/ui	コアコンポーネントライブラリ (MUI + tss-react)
packages/storybook	コンポーネントの開発・確認環境
packages/docs	このドキュメントサイト