Когда я попал в команду, для макетов существовал только UI-kit, основанный на наработках маркетинговых лендингов. Этот кит имел много недоработок, архаизмов и противоречий. Так как я проектировал новый продукт (ещё не зная тогда, что он станет главной частью основного продукта), я решил создавать свои компоненты.

Постепенно мой кит обрастал компонентами и возникла потребность в систематизации основных принципов — так появилась дизайн система, где главной особенностью были не сами компоненты, а принципы, по которым создаются эти компоненты и как они взаимодействуют с системой.

Сейчас дизайн система описывает как базовые сущности (размеры, типографику, цвета, тени, скругления и т.п.), так и принципы построения (от компонентов до целых страниц) и паттерны поведения системы и взаимодействия с ней. Для разработки используется система констант как базовых токенов (от полноценного использования токенов команда разработчиков увы отказалась).

В цветовой палитре используется семантический подход. У каждого цвета своё назначение. Плюсами такого подхода является минимальное количество цветов почти без вариаций, понятная структура и снижение ошибочного использования дизайнерами. Минусом же является ограничение на количество состояний у элементов.

Все компоненты интерактивно настроены, предусмотрены сценарные вариации и готовы для использования в исследовательских прототипах. А иконки сгруппированы в варианты по стилям, причём в коде реализованы аналогично. В компонентах предусмотрено версионирование.

Поначалу вся документация велась в Confluence, но ввиду возрастания энтропии, всё описание было перенесено в макеты Figma как единый источник истины.

Для каскадных изменений в макетах придумал способ изоляции, где в одном файле могут существовать макеты с разными версиями компонентов.

<aside> 🧭 При создании дизайн системы я вдохновлялся такими проектами, как Carbon, Atlassian, Spectrum и материалами компании Контур.

</aside>