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

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

Зачем это нужно

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

Пример

Пример кода:

Button(primary, size=md) + Input(default) + Card(hover) + Spacing(16/24/32) + Color(primary/neutral/error)

Скриншот

Подпись к скриншоту: раздел в Figma с дизайн-системой: палитра (primary/secondary/neutral), шрифтовая шкала, кнопки и поля ввода в разных состояниях (обычное, наведение, отключено, ошибка)

Частые ошибки

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

Связанные термины

• UI-kit
• Гайдлайн
• Компоненты
• Токены (цвета, отступы)
• Atomic design
• UI-дизайн
• UX-дизайн

Наши услуги

• Создание корпоративных сайтов — проектируем интерфейс и собираем страницы на единой дизайн-системе.
• Создание интернет-магазинов — настраиваем компоненты для каталога, карточек, корзины и оформления заказа.
• Доработка сайтов — приводим дизайн к единому стандарту и устраняем визуальный «разнобой».