Дизайн-система

Дизайн-система состоит из трёх слоёв, и путать их — самая частая ошибка. Нижний слой — токены: именованные значения цветов, размеров, шрифтов, радиусов, теней и отступов. Средний — компоненты: кнопка, поле ввода, карточка, модальное окно, каждый со всеми состояниями (обычное, наведение, фокус, нажатие, отключено, загрузка, ошибка). Верхний — правила: когда какой компонент применять, как строится сетка, как формулируются подписи и сообщения об ошибках. Без верхнего слоя получается не система, а склад деталей.

Окупаемость появляется на объёме и на времени. Одностраничнику дизайн-система не нужна — она дороже самого лендинга. Она начинает работать там, где экранов десятки, релизы регулярные, а над продуктом работают несколько человек: тогда каждый новый экран собирается за часы вместо дней, правка цвета кнопки применяется везде одним изменением токена, а разработчик перестаёт спрашивать «какой тут отступ» и додумывать за дизайнера. Отдельный эффект — тестируемость: компонент с описанными состояниями проверяется один раз, а не на каждой странице заново.

Главная ловушка — дизайн-система, которая существует только в Figma. Если библиотека компонентов в макетах и код разошлись, каждый экран всё равно верстается заново, а система превращается в красивую документацию, которую никто не открывает. Рабочая связка — общие токены, из которых собираются и макеты, и стили в коде, плюс живая библиотека компонентов, на которую фронтенд действительно ссылается. Вторая ловушка — попытка описать всё сразу: система начинается с 10–15 самых частых компонентов и растёт по мере реальных потребностей.

Смежные термины

• ВайрфреймВайрфрейм — черновая схема экрана без цвета, шрифтов и картинок: на ней фиксируют состав блоков, их приоритет и переходы между экранами, чтобы договориться о логике интерфейса до того, как начнётся дорогая отрисовка.
• Адаптивный дизайнАдаптивный дизайн — подход, при котором одна вёрстка перестраивается под ширину экрана: сетка, типографика и порядок блоков меняются на заданных брейкпоинтах, вместо того чтобы открывать отдельную мобильную версию на поддомене.
• Юзабилити-тестированиеЮзабилити-тестирование — проверка интерфейса на живых людях: представители целевой аудитории выполняют реальные задачи и проговаривают свои действия вслух, а команда фиксирует, где они останавливаются, ошибаются и не находят нужное.
• РефакторингРефакторинг — изменение внутренней структуры кода без изменения его внешнего поведения: функциональность до и после одинакова, меняются читаемость, связанность и стоимость следующей доработки, а результат подтверждается тестами и регрессом.
• Технический долгТехнический долг — накопленная разница между тем, как система устроена, и тем, как она должна быть устроена: каждое упрощение ради срока превращается в постоянную надбавку к стоимости и срокам всех последующих задач.

Услуги по теме

• UX/UI дизайн сайтов и приложенийПроектируем интерфейсы, которые доходят до продакшена: от исследования и структуры до UI-кита и передачи в разработку. Всё живёт в Figma как компоненты с реальными состояниями и брейкпоинтами, а не как папка со статичными картинками. Один и тот же процесс работает для лендинга, корпоративного сайта, интернет-магазина, веб-приложения и мобильного продукта.
• Брендинг, логотип и фирменный стильСобираем визуальную систему бренда: от позиционирования и названия до логотипа, палитры, типографики и брендбука, по которому дизайн сможет продолжить любой подрядчик. Отдаём исходники в векторе, а не только PNG с белым фоном. Работаем и с новыми компаниями, и с ребрендингом, когда стиль есть, но перестал работать.
• Разработка сайтов под ключДелаем сайты, которые не разваливаются через полгода: от одностраничника на CMS до магазина и веб-приложения на React и Next.js. Один подрядчик на дизайн, код, интеграции и запуск.

Почитать подробнее

• Дизайн-система: когда она окупается, а когда это дорогая игрушкаБольшинству команд, которые просят дизайн-систему, нужны библиотека компонентов и дисциплина именования. Разбираем, где проходит граница, как посчитать окупаемость до старта и что входит в минимальную рабочую версию.
• Брендинг для стартапа: минимальный набор на старте и сколько это стоитСтудии продают брендбук на 200 страниц, а стартапу нужен набор, который умещается в один PDF и позволяет запустить рекламу на следующей неделе. Разбираем минимальный состав, поэтапную оплату, цены по рынку и юридическую часть, которую пропускают чаще всего.