В этом году все продуктовые дизайнеры говорят про дизайн-системы. Работу над любым интерфейсом, в котором больше двух экранов, теперь принято начинать с системы. Удивительно, но при этом почти никто по-настоящему не умеет их использовать.

На самом простом уровне дизайн-система — это набор основных стилей и контролов. Как в нашем продукте будут выглядеть кнопки, поля для ввода текста, заголовки? Какие цвета и шрифты мы используем? Кто-то ограничивается файлом в скетче с библиотекой стилей и интерфейсных элементов. Кто-то идёт дальше и следит, чтобы система была реализована в коде, и разработчики тоже ей пользовались. Кто-то ещё пишет про Философию и Глубинный Смысл.

Можно найти внушительные коллекции и подборки дизайн-систем (http://designguidelines.co), онлайн-книжки про то, как правильно создавать и поддерживать системы (http://atomicdesign.bradfrost.com) и целые конференции для любителей систем (https://www.clarityconf.com).

И хотя всё это безусловно очень важно, большинство систем ограничивается атомарным уровнем. То есть набором самых базовых контролов. А дальше дизайнеру предлагается из этих «атомов» каждый раз собирать интерфейс.

Но любой современный продукт — это тоже _система_ (рассказывал про это недавно: https://t.me/desprod/67). Это чётко определённые объекты и взаимоотношения между ними. Хорошая дизайн-система включает в себя не только атомы, но и более крупные компоненты — объекты (если продолжать аналогию, то это будут даже не молекулы, а группы и структуры молекул).

Посмотрим на Фейсбук, например. Главный объект в дизайне Фейсбука — пост: