Skip to main content

デザインシステムの中身

生成されたデザインシステムには以下が含まれます:
  • トークン — システムの他の部分が参照する、名前付きの値(色、間隔、角丸など)
  • — 役割(プライマリ、サーフェス、アクセントなど)を持つパレット
  • タイポグラフィ — フォントファミリー、サイズ、ウェイト
  • サンプルコンポーネント — システムの使用例を示す2〜3個の構築済みコンポーネント
  • ロゴとブランドアセット — 明確に提供した場合に含まれます
フォーカスモードで生きたスタイルガイドとして表示されたAPEX X1 Design System。色、フォント、レイアウト、コンポーネントのサイドバー、コアパレット、タイプスケール、サンプルコンポーネントが表示されている

保存のされ方

生成されたシステムは、生きたスタイルガイドとしてプロジェクト内に存在します:tokens.jsonのトークンが、あなたのコンポーネントが使用するCSS変数(例:src/index.css)に反映されます。DESIGN.mdはそれをドキュメントとして表現したもので、あなたが読むことも、Agentが利用することもできます。

DESIGN.mdをソースとして使う

既存のDESIGN.mdは新しいデザインシステムの種にできます。作成するときに、Figma URL、Webサイト、コード、参考画像などの他のソースと並べてそれを指定してください。