info@mybigtime.ru 8 (800) 201-11-32
Продуктовый дизайн

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

Ускоряет выпуск новых страниц и снимает разнобой между дизайном и кодом: компоненты, токены, правила и документация, которыми пользуются и дизайнеры, и разработчики. Разработка дизайн-системы для продуктов и сайтов.

6–8 недельтиповой срок Дизайнеры и разработчики работают по одной системе. от 400 000 ₽стоимость Ориентир для базового варианта. Точная цена — после бесплатного разбора задачи.
Все услуги направления
exchange.log
[09:00:55] разнобой в продукте Аудит ok[09:24:47] единые переменные Токены ok[09:29:25] с состояниями Компоненты ok[09:44:30] компоновка и доступнос Правила ok[10:09:57] назначение и варианты Документация ok[10:31:17] Figma и код Синхронизация ok[10:39:00] summary ошибок 0, вручную 0

Что входит в работу

Наведите на карточку — раскроем, что именно делаем и зачем.

Зачем дизайн-система

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

Как разрабатываем

Аудит интерфейса и кода → токены → библиотека компонентов с состояниями → правила и доступность → документация → внедрение с синхронизацией в код и обучение → процесс развития. 6–12 недель.

Пример

SaaS-продукт, 3 дизайнера и 8 разработчиков, разнобой в интерфейсе. Аудит нашёл 9 вариантов кнопок. Дизайн-система из 45 компонентов с токенами, синхронизирована с кодом. Скорость выпуска новых экранов выросла втрое, вопросы «как это должно выглядеть» исчезли.

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

Схема работы — уточняется под вашу задачу.

Что делаем

Типовой состав — уточняется под вашу задачу.

ЭлементЧто делаемДля когоРезультат
Аудитразнобой в продуктекомандамасштаб проблемы
Токеныединые переменныедизайн и кододна основа
Компонентыс состояниямидизайнерысобирают из готового
Правилакомпоновка и доступностькомандабез споров
Документацияназначение и вариантыразработкапонятно
СинхронизацияFigma и кодпродуктвыглядит одинаково

Аудит интерфейса, токены, библиотека компонентов в Figma со всеми состояниями, правила и документация, синхронизация с кодом, обучение команды.

Сколько стоит

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

Токены и базовые компоненты

  • Аудит
  • Токены
  • 20–30 компонентов с состояниями
  • Документация
от 400 000 ₽6–8 недель Узнать подробнее Дизайнеры и разработчики работают по одной системе.

Под ключ

Полная библиотека, код, внедрение

  • Всё из базового
  • 50+ компонентов и шаблоны
  • Синхронизация с кодом
  • Обучение и процесс развития
от 900 000 ₽3–5 месяцев Узнать подробнее Система живёт в продукте и развивается.

Сопровождение

Ежемесячно

  • Консультации и правки настроек
  • Обновления систем и доработок
  • Новые сценарии и отчёты по запросу
  • Реакция на проблему — до 4 часов
от 40 000 ₽/меспо договору Узнать подробнее Развитие системы: новые компоненты, правила, поддержка команды.

Разбор задачи бесплатный: по его итогам получаете план работ и точную цену.

Как идёт работа

01

Разбор задачи

Бесплатно: цели, текущая ситуация, ограничения и бюджет. На выходе — план работ и точная цена.

02

Подготовка

Данные, доступы, согласование состава работ и сроков; фиксируем, что считаем результатом.

03

Работа

Выполняем по этапам с промежуточными результатами — вы видите прогресс, а не ждёте финала.

04

Сдача и поддержка

Передаём материалы и доступы, обучаем команду. 30 дней на вопросы и правки.

Что остаётся у вас

Результат работ с исходниками и доступами у вас
Документы и инструкции для команды
Понятные показатели для оценки эффекта
30 дней поддержки после сдачи

Частые вопросы

Токены и базовые компоненты — от 400 000 ₽, под ключ с кодом и внедрением — от 900 000 ₽, развитие — от 40 000 ₽ в месяц.

6–8 недель; под ключ — 3–5 месяцев.

Для лендинга — нет. Для продукта или сайта с десятками экранов и несколькими исполнителями — окупается на первых же новых страницах.

Переменные для цветов, шрифтов, отступов: меняете токен — обновляется весь продукт. Одни и те же значения в Figma и в коде.

Да, в варианте под ключ: компоненты реализуются в коде по тем же токенам, иначе система остаётся картинкой в Figma.

Ваша команда по процессу, который настраиваем; или мы по договору развития.

Здравствуйте! Меня зовут , я из компании . Связаться со мной можно по телефону , а обсудить хочу .

Спасибо, записали Свяжемся с вами в течение рабочего дня.