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