デザインシステムをゼロから構築した方法

数年ぶりにゼロからデザインシステムを構築する決断を下し、そのプロセスは非常にやりがいがありました。そこで、私が他のデザイナーに向けて、ゼロからデザインシステムを構築した方法を共有したいと思います。

私はまず、最近の5つのプロジェクトを監査し、異なるデザインに共通するパターンとコンポーネントを特定しました。これにより、私の作品に以前気づかなかった矛盾点が明らかになりました。7つのわずかに異なるボタン・スタイル、矛盾するスペーシング・ルール、目的のないテキスト・スタイルのバリエーションがありました。

堅苦しいシステムを最初から作り上げるのではなく、私は実際のクライアント・プロジェクトを通じてイテレーティブに構築しました。EcoTrackアプリのために、各コンポーネントを設計しながらドキュメント化し、プロジェクトのニーズに合わせて進化する生きたシステムを作り上げました。

システムの核となる要素:

• セマンティックな命名規則を採用した柔軟なカラーシステム
• 黄金比に基づくタイポグラフィスケール
• 明確なガイドラインを備えたコンポーネントバリアント
• デバイス間で一貫性を維持するスペーシングとレイアウトのルール

40%も最大の課題は技術的なことではなく、心理的なものでした。つまり、新しい問題が起きるたびに解決策を再発明するのではなく、システムを信頼することを学ぶことでした。しかし、その成果は絶大です。設計プロセスは40%速くなり、クライアントからの修正依頼は大幅に減り、開発への引き継ぎも非常にスムーズになりました。

あなた自身のシステムを構築することを検討している場合、私のアドバイスは、コア要素から小さく始めて、実際のプロジェクトでテストし、進めながらドキュメント化することです。優れたデザイン・システムは、制限のセットではなく、信頼できるコラボレーターのような存在であるべきです。

以下に、私のコンポーネント・ドキュメンテーション手法のテンプレートを添付しますので、ぜひあなた自身のワークフローに適応させてください。