Перестаём рисовать одну и ту же кнопку заново на каждом экране.
Дизайн-системы
Проектируем наведение, фокус, ошибки и мобильные сценарии.
Передаём токены, элементы и правила использования команде.
Что делаем?
01
Пример задачиВ продукте несколько оттенков одной кнопки
Фиксируем единые значения цветов, отступов, размеров и типографики.
РезультатБиблиотека токенов
02
Пример задачиОдин и тот же элемент рисуют заново
Создаём переиспользуемые элементы в Figma с понятными вариантами.
РезультатБиблиотека UI
03
Пример задачиФорма и меню ведут себя непоследовательно
Описываем структуру полей, кнопок, табов и составных компонентов.
РезультатКомпонентные правила
04
Пример задачиНа наведении текст исчезает
Проверяем hover, focus, disabled, loading и error на контраст и читаемость.
РезультатКорректные состояния
05
Пример задачиНа телефоне компоненты выходят за экран
Определяем сетку, ограничения по ширине и правила перестроения.
РезультатАдаптивные варианты
06
Пример задачиНовой команде нужны понятные инструкции
Показываем, когда применять компонент, а когда его использовать нельзя.
РезультатДокументация с примерами
Этапы работы
Бриф
Фиксируем продукты, платформы и задачи команды.
Требования
Аудит UI
Собираем текущие компоненты и выявляем расхождения.
Инвентаризация
Токены
Определяем цвет, типографику, интервалы и состояния.
Токены системы
Компоненты
Создаём базовые и составные элементы интерфейса.
Библиотека компонентов
Проверка
Тестируем сочетания, доступность и адаптивные состояния.
Проверенные компоненты
Передача
Оформляем правила и подключаем систему к работе команды.
Документация
Что передаём?
01
Токены
Согласованные значения и правила именования.
02
Компоненты
Библиотека с вариантами и свойствами.
03
Адаптив и состояния
Правила поведения элементов в разных условиях.
04
Руководство
Примеры применения и порядок развития системы.
Проекты
Ответы на вопросы
Какие макеты и компоненты нужны для аудита дизайн-системы?
Для старта нужны макеты продукта, повторяющиеся элементы и используемые технологии. Состав вводных уточним на брифе; недостающие материалы отдельно обозначим.
От чего зависят сроки разработки системы компонентов?
Срок рассчитываем после изучения вводных. На него влияют количество компонентов, состояний, платформ и глубина документации; этапы и сроки фиксируем до начала работ.
Как объём компонентов влияет на стоимость?
Цена от 220 000 ₽ — ориентир на стартовый согласованный объём. На итоговую смету влияют количество компонентов, состояний, платформ и глубина документации.
Что разработчики получают вместе с дизайн-системой?
В согласованном составе передаём: токены, компоненты, адаптив и состояния, руководство. Формат передачи и условия использования фиксируем до старта.
Контроль качества и риски
Проверяем применение
Проверяем решение на согласованных носителях, в разных размерах и на мобильных экранах. Ограничения фиксируем до передачи.
Готовим исходники
Проверяем структуру файлов, версии и технические требования к выпуску. Согласуем комплект рабочих макетов.
Передаём правила
Объясняем применение системы и показываем типовые ошибки. Команда получает понятные материалы для продолжения работы.
Стоимость от 220 000 ₽
Ориентир за согласованный объём, точную стоимость определяем после обсуждения состава работ и сроков.