Быстрее
и единообразно
Дизайн-система — общий язык дизайнеров и разработчиков: набор компонентов, правил и токенов, из которых собираются любые экраны продукта. Она нужна, когда продукт растёт и над ним работают несколько человек.
Цвета, шрифты, отступы
Компоненты и состояния
Правила использования
Компоненты в коде
Документация
Развитие системы
Этапы
работы
Аудит интерфейсов
Токены
Компоненты
Документация
Внедрение в код
Варианты
реализации
от 80 000 ₽
Проектирование пользовательского опыта и интерфейсов сервисов, кабинетов и приложений.
от 30 000 ₽
Кликабельные прототипы сайтов и сервисов для проверки идей и точной оценки разработки.
Нужна ли дизайн-система небольшому сайту?
Можно ли взять за основу готовую систему?
Кто будет поддерживать дизайн-систему?
Делаете тёмную тему?
Другие
работы
UI/UX-дизайн
от 80 000 ₽
Проектирование пользовательского опыта и интерфейсов сервисов, кабинетов и приложений.
Дизайн приложения
от 120 000 ₽
Дизайн приложений для iOS и Android по гайдлайнам платформ.
Прототипирование
от 30 000 ₽
Кликабельные прототипы сайтов и сервисов для проверки идей и точной оценки разработки.
Свежие статьи
Практика разработки, SEO и продуктового дизайна — с примерами из реальных проектов.
Разработка дизайн-системы
Признаки, что пора
в продукте пять разных кнопок и три оттенка основного цвета;
новые экраны рисуются с нуля, а разработчики каждый раз верстают заново;
дизайн и код расходятся после каждого релиза;
в команде несколько дизайнеров и фронтенд-разработчиков;
у компании несколько продуктов, которые должны выглядеть единообразно.
Из чего состоит
Основа — дизайн-токены: цвета, типографика, отступы, радиусы, тени, в том числе для светлой и тёмной темы. На их основе строятся компоненты — кнопки, поля, таблицы, модальные окна, карточки — со всеми состояниями и вариантами. Поверх — паттерны: как устроены формы, списки, навигация, уведомления. И документация с правилами использования.
Дизайн и код вместе
Дизайн-система работает, только если компоненты в Figma совпадают с компонентами в коде. Мы делаем обе части: библиотеку в Figma и библиотеку React-компонентов с документацией в Storybook. Токены экспортируются из Figma в код автоматически, чтобы изменения не расходились.
Внедрение
Дизайн-систему не обязательно внедрять сразу во весь продукт. Начинаем с аудита существующих интерфейсов, собираем базовые компоненты и переводим на них новые экраны, постепенно заменяя старые. Так продукт улучшается без остановки разработки.
Стоимость
Базовая дизайн-система в Figma — от 120 000 ₽. С библиотекой компонентов в коде — по объёму после аудита.
Обсудим ваш проект?
