design-system-management

デザインシステム管理

デザインシステムの構築、保守、発展を支援します。

デザインシステムの構成要素

デザイントークン

ビジュアルランゲージを定義する基本的な値です。

• 色（ブランド、セマンティック、ニュートラル）
• タイポグラフィ（スケール、ウェイト、行の高さ）
• スペーシング（スケール、コンポーネントのパディング）
• ボーダー（角丸、幅）
• シャドウ（エレベーションレベル）
• モーション（持続時間、イージング）

コンポーネント

以下を定義した再利用可能な UI 要素です。

• バリエーション（プライマリ、セカンダリ、ゴースト）
• 状態（デフォルト、ホバー、アクティブ、無効、読み込み中、エラー）
• サイズ（sm、md、lg）
• 振る舞い（インタラクション、アニメーション）
• アクセシビリティ（ARIA、キーボード）

パターン

コンポーネントを組み合わせた、よく使われる UI ソリューションです。

• フォーム（入力グループ、検証、送信）
• ナビゲーション（サイドバー、タブ、パンくずリスト）
• データ表示（テーブル、カード、リスト）
• フィードバック（トースト、モーダル、インラインメッセージ）

原則

1. 創造性より一貫性 — チームが同じものを一から作り直さずに済むよう、システムが存在します
2. 制約の範囲内で柔軟に — コンポーネントは柔軟に組み合わせられるべきであり、硬直的であってはなりません
3. すべてをドキュメント化する — ドキュメント化されていないものは、存在しないのと同じです
4. バージョン管理と移行 — 互換性を損なう変更には移行手順が必要です