Дизайн-система для корпоративного сайта

Дизайн-система — это библиотека компонентов, токенов и правил, по которым собирают страницы корпоративного сайта. Не «красивая Figma», а договорённость: кнопка, форма и карточка новости выглядят одинаково везде и собираются из готовых блоков.

План на шесть недель мы разбираем на примере корпоративного каталога, где больше пятидесяти страниц и новые разделы появляются каждый квартал. Ниже — из чего состоит система, когда она окупается, а когда хватит небольшого набора компонентов, и что именно команда передаёт разработчикам вместе с макетом. Смежное: разработка сайтов и кейс корпоративного сайта.

Откуда берётся хаос в вёрстке корпоративного сайта

Новый раздел рисуют с нуля: дизайнер берёт свежий макет, разработчик верстает ещё одну кнопку. Через год на сайте пять кнопок с разными отступами и три вида карточек новостей, а любая правка фирменного стиля превращается в ручной обход всех страниц.

Из чего состоит дизайн-система

Когда система нужна, а когда достаточно UI-kit

Roadmap на 6 недель: MVP системы

1. Неделя 1–2: аудит экранов, inventory компонентов, tokens (цвет, типографика, сетка).
2. Неделя 3–4: component library в Figma — header, footer, кнопки, формы, карточки.
3. Неделя 5: handoff: спецификации, состояния hover/error, accessibility.
4. Неделя 6: пилот — один новый раздел только из системы, regression-чеклист.
5. Governance: кто апрувит новый компонент вне библиотеки.

Design tokens и handoff разработчикам

Tokens экспортируют в CSS-переменные или JSON — фронт не копирует hex из скриншота. Handoff: не «нарисовано красиво», а отступы, breakpoints, тексты ошибок форм. Regression — прогон ключевых страниц после каждого изменения токена.

Что входит в передачу макетов разработчикам

• Отступы и сетка в числах, а не «на глаз по скриншоту».
• Все состояния компонента: обычное, при наведении, при нажатии, с ошибкой, заблокированное.
• Тексты ошибок форм и правила проверки полей — их пишет редактор, а не разработчик по памяти.
• Поведение на планшете и телефоне: где блок переносится, а где скрывается совсем.

Governance: кто решает, что входит в систему

• Новый паттерн — через заявку владельцу, не локальный CSS на одной странице.
• Deprecated компоненты помечают и выводят из кода по плану.
• Версионирование: breaking change — миграция, не «сломали прод ночью».
• Документация на русском для клиента и команды поддержки.

ФактMVP системы на 6 недель лучше, чем год «идеальной Figma» без кода в проде.