docs/ja-JP/skills/design-system

stars:0
forks:0
watches:0
last updated:N/A

デザイン システム

スケーラブルで保守可能なデザインシステムの構築。

使用時期

  • デザインシステムを初期化
  • コンポーネントライブラリを拡張
  • デザインと実装の間の同期を保つ
  • アクセシビリティ標準を強制
  • テーマング実装

コア要素

1. デザイントークン

色、タイポグラフィ、スペーシング、シャドウの中央コレクション。

2. コンポーネント

ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。

3. レイアウトパターン

ページレイアウト、フォーム、グリッド。

4. アイコン

SVGベースのアイコンライブラリ。

ツール

  • Figma 設計ツール
  • Storybook コンポーネント展示
  • Chromatic ビジュアルテスト
  • Design tokens JSON管理

チェックリスト

  • トークン定義(色、スペーシング、タイプ)
  • 基本コンポーネント実装
  • Storybook設定
  • アクセシビリティテスト
  • ドキュメント作成
  • チーム採用

詳細については、ドキュメントを参照してください。

    Good AI Tools