Без системи дизайну кожен дизайнер і розробник приймає невеликі рішення самостійно: дещо інший синій колір, новий стиль кнопок, інше значення інтервалу. Через рік продукт має десятки майже дублікатів. Система проектування замінює ці повторювані рішення спільними.
Більшість проектних систем мають три рівні. Токени дизайну – це іменовані значення, такі як color.primary, space.4 або motion.duration.short, які зберігають необроблені рішення. Такі компоненти, як кнопки, входи, картки та діалогові вікна, побудовані з цих токенів і містять усі стани. Інструкції документують, як використовувати кожен компонент, як писати мітки та повідомлення, а також які правила доступності застосовуються.
Система проектування існує у двох місцях: в інструменті проектування, як бібліотека компонентів, і в коді, як пакет, який встановлюють розробники. Найважче підтримувати синхронізацію між ними. Коли закодована кнопка перестає збігатися з розробленою, люди перестають довіряти системі.
Рух теж належить до системи. Тривалість, криві ослаблення та параметри пружини можуть бути символами, а інтерактивні компоненти потребують визначеної поведінки для наведення, натискання, завантаження та переходів. ExodeUI, який ми створюємо, зберігає цю поведінку в одному відкритому файлі зі станами та пружинною фізикою, тому той самий компонент відтворюється в React, Vue, SwiftUI, Flutter та інших фреймворках.
До відомих публічних прикладів належать Material Design від Google, Рекомендації щодо людського інтерфейсу від Apple, Carbon від IBM і Polaris від Shopify. Прочитавши їх, можна побачити, як організована зріла система.