Language日本語▾
簡潔な回答
デザイン システムは、チームが製品を一貫して構築するために使用する、再利用可能なコンポーネント、デザイン トークン、ガイドラインの共有セットです。通常、設計ツールのコンポーネント ライブラリ、コード内の同じコンポーネント、およびそれらをいつどのように使用するかを説明するドキュメントが含まれます。時間を節約し、より多くの人が作業するにつれて製品の一貫性が保たれます。
核心
- トークンは、色、間隔、タイプ、半径、動きの名前付きの値です。
- コンポーネントは、トークンから構築されたボタン、入力、ダイアログなどの再利用可能な UI パーツです。
- ガイドラインでは、使用法、アクセシビリティ、コンテンツ、および動作について説明しています
- 設計とコードのバージョンは一致する必要があります。一致しない場合、システムは信頼されなくなります。
- AI ツールにデザイン システムを与えると、より一貫性のある UI が生成されます。
デザイン システムがなければ、すべてのデザイナーや開発者は、わずかに異なる青、新しいボタン スタイル、別の間隔値など、小さな決定を自分たちで行います。 1 年後、製品には数十のほぼ重複した製品ができました。デザイン システムは、繰り返される決定を共有された決定に置き換えます。
ほとんどの設計システムには 3 つの層があります。デザイン トークンは、生の決定を保存する color.primary、space.4、motion.duration.short などの名前付きの値です。ボタン、入力、カード、ダイアログなどのコンポーネントはこれらのトークンから構築され、あらゆる状態が含まれます。ガイドラインには、各コンポーネントの使用方法、ラベルとメッセージの書き方、および適用されるアクセシビリティ ルールが文書化されています。
デザイン システムは 2 つの場所に存在します。コンポーネント ライブラリとしてデザイン ツール内に存在し、開発者がインストールするパッケージとしてコード内に存在します。この 2 つの同期を保つのが最も難しい部分です。コード化されたボタンが設計されたボタンと一致しなくなると、人々はシステムを信頼しなくなります。
動きもシステムに属します。期間、イージング カーブ、スプリング設定はトークンになる可能性があり、インタラクティブ コンポーネントにはホバー、プレス、ロード、トランジションの動作を定義する必要があります。私たちが作成した ExodeUI は、その動作を状態とスプリング物理とともに 1 つの開いたファイルに保存するため、同じコンポーネントが React、Vue、SwiftUI、Flutter およびその他のフレームワークで再生されます。
有名な公開例としては、Google の Material Design、Apple のヒューマン インターフェイス ガイドライン、IBM の Carbon、Shopify の Polaris などがあります。これらを読むことは、成熟したシステムがどのように組織されているかを知る良い方法です。
デザインシステムとスタイルガイドの違いは何ですか?
スタイル ガイドには、色や種類などの視覚的なルールが文書化されています。設計システムには、これらのルールに加えて、再利用可能なコンポーネント、コード、および使用ガイドラインが含まれます。
小規模なチームにデザイン システムは必要ですか?
小さなものはそうです。いくつかのトークンとコア コンポーネントによってすでに不整合が防止されています。製品の成長に合わせて拡張することができます。
Figmaのデザインシステムとは何ですか?
通常は、チーム内のすべてのファイルが使用するコンポーネント、変数、スタイルの共有ライブラリです。これはシステムの設計の半分です。コードの半分はリポジトリ内に存在します。
AIはデザインシステムを使用できますか?
はい、そうすべきです。 AI ツールが、たとえば MCP サーバーを通じてコンポーネントとトークンを読み取ることができる場合、その出力は製品の残りの部分と一貫性を保ちます。
デザインシステムにモーションを組み込む
デュレーション、イージング、スプリング設定をチーム全体で共有するトークンに変換します。