Skip to main content
デザインシステムとは、あなたのブランドを機械が扱える形にしたものです。あなたの製品を「あなたの製品らしく」見せる決定事項 — カラートークン、タイポグラフィ、間隔、サンプルコンポーネント — を捉えることで、Designは一般的にきれいなだけの結果ではなく、ブランドに沿った結果を生成できるようになります。

​
デザインシステムに含まれるもの

生成されたデザインシステムには以下が含まれます：
  • トークン — 他のすべてが参照する、名前付きの値（色、間隔、角丸など）
  • 色 — 役割（プライマリ、サーフェス、アクセントなど）を持つあなたのパレット
  • タイポグラフィ — フォントファミリー、サイズ、ウェイト
  • サンプルコンポーネント — システムの使用例を示す、いくつかの構築済みコンポーネント（ボタン、カードなど）
  • ロゴとブランドアセット（提供した場合）
このシステムは、プロジェクト内のDESIGN.mdファイルとしても表現できます。詳しくはリファレンスを参照してください。

​
デザインシステムの生まれ方

作成方法は2通りあります：
  1. ゼロから — Replitのホームページでプロンプトし、ブランドについての短いアンケートに回答します。
  2. 既存のデザインから — すでに気に入っているモックアップからシステムを抽出します（フレームの三点メニュー → 抽出）。
Figma URL、Webサイト、コード、参考画像、既存のDESIGN.mdなど、ソースから種を作ることもできます。詳細はデザインシステムを作成するを参照してください。

​
デザインシステムが効果を発揮するとき

  • 1度きりでなくデザインする場合。 2回目のデザインこそ、不整合が始まるところです。システムがあれば、N回目の生成も1回目と同じ見た目を保てます。
  • チームで一緒にデザインする場合。 システムをワークスペースに保存すれば、全員が同じブランドから生成できます。
  • 既存の作業に適用する場合。 既存のアーティファクトはそのシステムの下で再構築できます。詳しくはデザインシステムを適用する（時間とクレジットに関する警告の意味を含む）を参照してください。

​
保存される場所

デザインシステムはワークスペースに保存され、新しいアーティファクトを作成するときに選択でき、プロジェクトごとに切り替えられます。