Макет сайта отвечает на вопрос как выглядит эта конкретная страница. Дизайн-система отвечает на вопрос как выглядит любая страница, которую мы сделаем завтра. Это набор решений: какие цвета используются и в каких ролях, какие размеры и начертания шрифта, какие отступы, как выглядит кнопка в обычном состоянии, при наведении, при нажатии и когда она заблокирована, как оформлена карточка, форма, таблица, сообщение об ошибке.
Где она окупается
Сайт живёт дольше, чем первый запуск. Через полгода появляется новая услуга, через год - акция, через полтора - раздел с кейсами. Без дизайн-системы каждая новая страница делается заново: подрядчик придумывает свой вариант карточки, свои отступы и свой оттенок кнопки. Через два года сайт выглядит как склейка из пяти разных проектов, а любое изменение требует ручной правки в десятке мест.
С дизайн-системой новая страница собирается из уже готовых блоков за часы, а не дни. Это прямая экономия: стоимость доработок падает, а визуальная целостность сохраняется даже при смене подрядчика.
Что входит в минимальную версию
- Палитра: основной цвет, акцент, нейтральные оттенки для текста и фона, цвета для ошибок и успеха. Не больше шести-восьми значений.
- Типографика: два начертания, пять-шесть размеров с заданной высотой строки, правила для заголовков и подписей.
- Сетка и отступы: шаг, от которого считаются все расстояния, чаще всего 4 или 8 пикселей.
- Компоненты: кнопки, поля ввода, карточка, навигация, подвал, уведомление.
- Состояния: как каждый интерактивный элемент выглядит при наведении, фокусе и блокировке.
Отдельно стоит зафиксировать правила доступности: минимальный контраст текста к фону, видимый фокус при переходе по клавише Tab, размер кликабельной области на сенсорных экранах. Эти вещи проще заложить один раз в систему, чем потом чинить по всему сайту после аудита.
Как это выглядит технически
На стороне дизайна система живёт в Figma в виде библиотеки стилей и компонентов. На стороне кода - в виде переменных CSS и набора переиспользуемых компонентов. Важно, чтобы имена совпадали: если в макете цвет называется акцент, в коде он должен называться так же. Тогда правка в одном месте меняет весь сайт, и не возникает ситуации, когда фирменный цвет прописан вручную в сорока файлах.
С чего начать при ограниченном бюджете
Не нужно заказывать дизайн-систему отдельным проектом. Достаточно при разработке обычного сайта поставить условие: все стили выносятся в переменные, повторяющиеся элементы делаются компонентами, а в конце передаётся короткий документ на несколько страниц с палитрой, шрифтами и примерами блоков. Это почти не увеличивает стоимость первой разработки, но окупается на каждой следующей задаче.
Проверить, есть ли система на вашем сайте, можно простым вопросом к подрядчику: сколько стоит поменять фирменный цвет на всём сайте. Если ответ измеряется минутами - система есть. Если днями - её нет, и каждое будущее изменение будет стоить дороже, чем должно.
Как система живёт дальше
Дизайн-система не документ, который пишут один раз и кладут в архив. Через полгода появится задача, под которую готового блока нет, и это нормально. Важно, чтобы новый блок после согласования возвращался в систему, а не оставался разовым исключением на одной странице. Иначе через год система описывает только половину сайта и перестаёт быть источником правды.
Для небольшой компании достаточно простого правила: за систему отвечает один человек, и любой новый элемент проходит через него. Без этого разные подрядчики начинают добавлять свои варианты кнопок и карточек, и сайт возвращается к состоянию, из которого его вытаскивали.
Отдельно стоит договориться о том, кому принадлежат исходники. Файл Figma с библиотекой и код компонентов должны храниться в ваших аккаунтах, а не только у подрядчика. Это стоит нисколько, а при смене команды экономит недели и половину бюджета следующего этапа.