Что такое дизайн-система простыми словами: три порога, после которых она начинает экономить, честное «когда не надо», цены от 120 000 ₽ и наша собственная система в числах.
Слово произносит подрядчик, дизайнер или разработчик, а в смете оно превращается в отдельную строку на сотни тысяч. Со стороны это выглядит как наведение порядка внутри Figma - удобство исполнителя за счет заказчика.
Ниже - что такое дизайн-система в трех строках, три порога, после которых она начинает экономить, честный ответ, когда ее заказывать рано, цены с составом работ и наша система изнутри: на ней держится сайт, который вы читаете.
Что такое дизайн-система и чем она отличается от UI-кита
Дизайн-система - это три вещи в одном месте: готовые детали интерфейса, правила их применения и документация. Все три части ссылаются на один источник правды, поэтому изменение вносится один раз и расходится по продукту само. Ключевое слово - не «детали», а «правила»: библиотека кнопок без правил разъезжается ровно так же, как папка с макетами.
Отсюда ответ на второй по частоте вопрос - что такое UI-кит. Это библиотека элементов, то есть часть системы, а не система. По терминологии NN/g рядом живут style guide - правила и принципы реализации, и pattern library - готовые группировки элементов. Система связывает это в одно и добавляет токены: именованные значения цвета, размера, шрифта и длительности.
| Что это | Что внутри | Когда этого хватает |
|---|---|---|
| UI-кит | Кнопки, поля, карточки, иконки | Продукт делает один человек, экранов немного |
| Гайдлайн | Правила применения: где использовать, чего нельзя | Над стилем работают внешние подрядчики |
| Брендбук | Правила плюс смыслы бренда, тон общения, носители | Задача про бренд, а не про продукт |
| Дизайн-система | Все выше плюс токены, состояния компонентов, связка с кодом | Продукт растет, людей над ним больше одного |
Если вы уже разбирались с брендбуком, логобуком и гайдлайном, разница ровно одна: те документы описывают бренд и живут в PDF, дизайн-система описывает продукт и связана с кодом.
Три порога, после которых система начинает экономить
Ответ «нужна большим командам» есть во всех статьях по запросу и не помогает ничем: «большая» - это сколько. Проверяемых условий три, и считаются они за минуту. Пока не выполнено ни одного, система будет расходом.
- Люди. Внешний вид продукта меняют двое и больше. Считайте всех: дизайнера, верстальщика, маркетолога, автора презентации к среде.
- Объем. Больше двадцати страниц или экранов - и вы уже не помните, какой отступ стоял на прошлой. Наш сайт держит около 150 страниц на одном наборе токенов.
- Ритм. Задачи идут потоком: посты, презентации, новые экраны, лендинги под акции. Разовый проект сборку базы не окупает.
Механика простая. Один человек держит правила в голове бесплатно, двое начинают спорить, какой у нас синий, и каждый спор оплачивается часами. До двадцати экранов новый экран быстрее нарисовать заново, чем искать готовый компонент, после двадцати - наоборот. Поток окупает базу потому, что база используется каждый раз, а собирается один.
Как эти пороги выглядели на наших проектах
Порог «ритм» - PayDex, эквайринг и трансграничные платежи. На входе у компании был только логотип: без правил и без носителей. Мы не стали докручивать его точечно, а развернули в фирменный стиль с правилами. Результат в работе: посты и презентации выходят день в день или до трех дней, и так уже больше двух лет. День в день на непрерывном потоке возможен только тогда, когда база собрана заранее. Про требования этой отрасли к интерфейсам - в материале про дизайн для финтеха.
Порог «объем» - AnotherWorld. Мерч-линейка: 15-20 видов продукции, больше 30 стикеров, 5-6 вариантов на каждый айтем - около 150-160 уникальных материалов на согласование. Команда пять человек, срок месяц-полтора. Сложилось это потому, что мы строили мерч на сильных сторонах существующего брендбука, а не переизобретали бренд.
Порог «люди» - КАРГОНОРД. До нас у логистической компании было шрифтовое написание, собранное клиентом в Word красивым шрифтом. Мы сделали 40-50 физических и онлайн-носителей, среди них - шаблоны писем в Word и счет на оплату в фирменном исполнении. Система нужна не дизайнерам, а тем, кто работает без дизайнера: менеджер, отправляющий счет, никогда не откроет Figma.
Что внутри: токены, компоненты и то, что забывают собрать
Главный термин здесь - дизайн-токены, и он же самый мутный. Токен - именованное значение: не «синий #0B20D1», а «цвет акцента»; не «24 px», а «шаг сетки». Меняете значение в одном месте - меняется везде, где на него ссылались. Общий формат записи токенов пишется в рабочей группе при W3C и пока остается черновиком: стандартом это называть рано, словарем - можно.
| Слой | Что входит | Что ломается без него |
|---|---|---|
| Токены | Цвет, размеры, шрифт, отступы, длительности | Каждый макет начинается с подбора значений заново |
| Компоненты | Кнопки, поля, карточки со всеми состояниями | Состояния дорисовывают на ходу, разработчик додумывает |
| Правила и запреты | Что и где применять, чего делать нельзя | Компоненты есть, интерфейс все равно разъезжается |
| Документация | Где что лежит и как этим пользоваться | Системой пользуется только тот, кто ее собрал |
| Связка с кодом | Компонентная библиотека, доступная разработке | Макеты и продукт расходятся через два релиза |
По опросу зарубежных команд Sparkbox за 2022 год (219 ответов, самоотбор) документацию в систему включают 85%, готовый код - 65%. То есть собрано то, что видно, и не собрано то, что держит систему от расползания.
Как это устроено у нас: 102 переменные, три начертания, один цвет
Сайт, который вы читаете, собран на нашей дизайн-системе. Источник правды - один файл переменных, 102 объявления. Из него растут девять ступеней кегля, одиннадцать шагов отступов и одна кривая ускорения на весь сайт. На этом наборе держится около 150 страниц, собранных из 35 компонентов.
- Один шрифт: Inter Tight, начертания 400, 500 и 600. Ни жирного, ни моноширинного - моноширинный выдает машинную работу.
- Один цвет: акцент - единственный хроматический, все прочее черно-белое поверх темного фона.
- Один контейнер с полями 50 px от краев экрана, на узких экранах поле сжимается до 20 px.
- Скейл по двум осям: размеры и ритм заданы через clamp, страница подстраивается под ширину и высоту.
- Пленочное зерно 4% фиксированным слоем поверх всего - снимает с градиентов пластиковый вид.
Держится это не на числе компонентов, а на фразе из свода: «Если правка спорит с одним из этих пунктов - меняем правку, а не правило». И на том, что запреты вшиты в код: переменные жирных начертаний упираются в 600, компонент физически не может стать жирнее. Заставить всех соблюдать правила нельзя - правило должно быть таким, чтобы его нельзя было нарушить.
Два раздела стоят там, где их обычно не ищут. Первый - копирайт, наравне с цветом: буква «е» без точек, дефис вместо длинного тире, кнопка называет действие («Обсудить проект» вместо «Подробнее тут»). Текст в интерфейсе - такой же повторяющийся элемент, как кнопка. Второй - слои: шесть уровней от шапки до модального окна, и новый плавающий элемент получает место в списке, а не случайное значение z-index.
И ответ на страх «вложимся, а через год все переделывать». Мы сами меняли систему на ходу: убрали из палитры коралловый и прочие цвета, оставив один акцентный, но старые имена переменных сохранили алиасами на белый - чтобы ничего не сломалось. Система переживает смену вкуса, если менять значения, а не имена.
Сколько стоит собрать и во сколько обходится держать
У нас дизайн-система стоит от 120 000 ₽ и от 1 месяца, а единственный открытый прайс, найденный в выдаче, начинается от 500 000 ₽. Разрыв объясняется границей работ: наши 120 000 ₽ - это токены, компоненты, состояния, правила и документация, а в прайс на 500 000 ₽ включен фронтенд, от 400 часов разработчика. Кодовая реализация в нашу цену не входит.
| Уровень | Что входит | Цена |
|---|---|---|
| Простой | Цвета, типографика, сетка и базовые компоненты | от 120 000 ₽ |
| Средний | Плюс состояния и варианты компонентов, токены и документация | 144 000 ₽ |
| Полный | Плюс темная тема, доступность, связка с кодом, внедрение | 168 000 ₽ |
| Срочно, «нужно вчера» | Любой уровень с коэффициентом 1,3 к итогу | Полный - 218 400 ₽ |
| Ведение дальше | Аутстаф UX/UI - ведение системы в среднем тарифе; поддержка продукта считается отдельно | от 120 000 ₽ или от 80 000 ₽ в месяц |
Уровни разложены в калькуляторе: там видно, как меняется сумма от объема и срочности.
Дальше - стоимость владения, о которой по теме почти не пишут. Сборка разовая, ведение постоянное. У аутстафа UX/UI за 120 000 ₽ в месяц ведение системы стоит прямо в составе среднего тарифа. Поддержка продукта от 80 000 ₽ в месяц - другая услуга, ведение системы в нее не входит и оговаривается отдельно. Как устроен формат ежемесячной работы, разобрано в статье про дизайн-поддержку. Отрезвляющая цифра из того же опроса Sparkbox: процесс приема правок в систему есть у 61% команд, модель управления - у 44%, а метрики своей системы отслеживают 16%. Большинство не знает, окупилась она или нет.
Что это дает в часах: счет на ваших числах
Переведем цену в часы. По нашему разбору штатного дизайнера мидл с окладом 120 000 ₽ на руки обходится компании в 199 310 ₽ в месяц - это около 2 076 ₽ за рабочий час. Значит, система за 120 000 ₽ - примерно 58 часов работы одного дизайнера. Вопрос «окупается или нет» сводится к одному: сэкономит база больше 58 часов на вашем горизонте или нет.
- Посчитайте, сколько новых экранов, страниц или макетов вы выпускаете в месяц.
- Замерьте, сколько часов уходит на один такой сейчас - от постановки до готового макета.
- Оцените, сколько из этих часов уйдет, если элементы и правила уже собраны. Честно: не ноль, но и не половина.
- Умножьте сэкономленные часы на стоимость часа вашего дизайнера - штатного или на аутсорсе - и разделите 120 000 ₽ на полученную сумму. Это число месяцев, за которое база вернет цену. Больше года - вам рано.
Часы берутся из трех мест, и все три вы можете померить у себя за неделю: время на новый экран, который собирают из готового; время на споры про оттенок и отступ; время разработчика, который перестает переспрашивать про состояния. Процентов экономии мы не называем: своего замера у нас нет, а чужие сделаны на зарубежных выборках.
Зачем систему заказывают на самом деле, видно на проекте ReNairo - это AI-сервис аналитики звонков. Там дизайн-система стояла в объеме работ отдельной строкой, наравне с неймингом и лендингом. Решение формулировалось так: собрать систему с правилами и запретами, чтобы клиент мог дорабатывать сам и не оплачивать команду на мелочи. У стартапа была расписана каждая статья затрат, основное шло в технологическую разработку. Запуск занял 1-1,5 месяца вместо полугода, которые клиент рассматривал изначально, и системой он пользуется до сих пор. Сколько денег это сберегло, мы не измеряли и назвать не можем.
Та же логика видна в проекте «Сколько?Можно»: вместо ручной работы мы собрали админ-панель под управление товарами, и загрузка сократилась с недель до 2 часов. Принцип общий - отдавать клиенту инструмент.
Пять вопросов, после которых вы решите сами
Список ничего не вводит заново - он сворачивает статью в пять вопросов. Отвечать надо цифрами, а не ощущениями.
- Сколько человек за последний месяц меняли внешний вид продукта или материалов?
- Сколько у вас страниц или экранов? Двадцать - граница, после которой правила перестают держаться в голове.
- Сколько новых макетов вы выпускаете в месяц и сохранится ли поток через полгода?
- Сколько раз за квартал вы спорили про оттенок, шрифт или отступ? Каждый спор уже оплачен часами.
- Кто будет вести систему после сдачи: свой человек, подрядчик или никто? Ответ «никто» означает, что собирать рано.
Пятый вопрос - тот, на котором проекты рассыпаются. Система без владельца превращается в устаревший файл за квартал: модель управления есть только у 44% команд, которые систему уже собрали.
Дизайн-система не делает продукт красивее. Она делает следующий макет дешевле предыдущего. Если следующего макета не предвидится, экономить нечего - и это тоже нормальный вывод.