Дизайн
Сколько стоит дизайн-система и когда она действительно нужна продукту?
RDN Group указывает стоимость разработки дизайн-системы от 500 000 ₽, а зарубежные студии публикуют от 8 000–15 000 $ (около 0,7–1,25 млн ₽) за 50–80 компонентов и от 100 000 $ с управлением. Нужна она обычно тогда, когда над интерфейсом работают двое и больше. Дизайн-система VITON13 — от $113.
Сколько стоит дизайн-система?
Единой цены нет: «дизайн-система» может означать и файл Figma со стилями цвета, и версионируемую библиотеку в коде с командой поддержки. В таблице цены из четырёх источников, у каждого свой рынок и объём. Сначала читайте объём, потом цену.
| Источник и объём | Цена | Срок |
|---|---|---|
| RDN Group (Россия), страница услуги: средний сервис, от 200 часов дизайнера и от 400 часов фронтенд-разработчика | от 500 000 ₽ | Не указан |
| Luft (Норвегия), февраль 2026: открытый набор компонентов с вашим брендом | 0–5 тыс. $ (до 0,42 млн ₽) | Не указан |
| Luft: основа, 20–30 компонентов, токены, Figma и код | 15–25 тыс. $ (1,25–2,09 млн ₽) | 3–4 недели |
| Luft: рабочая система, 50–70 компонентов, WCAG AA | 40–80 тыс. $ (3,34–6,68 млн ₽) | 6–10 недель |
| Luft: корпоративная, управление, команда системы, несколько брендов | от 100 до 200 тыс. $ и выше (8,36–16,7 млн ₽) | 12–20 недель, затем поддержка |
| BAMN, май 2026: 50–80 компонентов, один продукт | 8–15 тыс. $ (0,67–1,25 млн ₽) | Не указан |
| BAMN: токены для разработчиков, документация, несколько платформ | от 20 тыс. $ (от 1,67 млн ₽) | Не указан |
| Autentika (Польша), июнь 2024: расчёт для 40 компонентов по 100–120 часов | около 288 тыс. $ (около 24 млн ₽) | 3 человека, 10 месяцев |
| VITON13: основы дизайн-системы, библиотека компонентов, документация по управлению | $113 с помощью ИИ или $173 под руководством специалиста | 10–18 рабочих дней |
Расхождение объясняют объём и допущения. RDN даёт нижнюю границу без списка компонентов; Luft и BAMN оценивают систему, которую может принять небольшая команда; расчёт Autentika — допущение о первой версии, где на каждый компонент приходятся исследование, тесты и документация. Это потолок, а не предложение.
Что входит в цену на каждом уровне?
| Уровень | Что внутри | Подходит, когда |
|---|---|---|
| 1. UI-кит с токенами | Цвет, шрифты и отступы как именованные стили, несколько частых компонентов в Figma | Один дизайнер, продукт меняется каждую неделю |
| 2. Компоненты в Figma | Общая библиотека из 20–40 описанных компонентов с вариантами и состояниями | В одном продукте работают двое и больше дизайнеров |
| 3. Библиотека в коде с документацией | Те же компоненты в коде (для веба — React или Next.js), токены как переменные, сайт документации или Storybook | Разработчики заново собирают одну и ту же форму в разных местах |
| 4. Управление и версии | Владелец, правила предложения и принятия изменений, номера версий, порядок вывода компонентов из обращения | От системы зависят несколько команд или продуктов |
Практикум проводит границу так: UI-кит — это набор визуальных элементов (цвета, шрифты, иконки, кнопки, анимация), а дизайн-система шире: она включает UI-кит, библиотеку кода и гайдлайны. По опросу zeroheight 2026 года, где ответили 147 практиков, токены есть в 86 % систем, а библиотека в коде — в 78 %.
Когда нужна дизайн-система?
Не в первый день, а потом довольно резко. Автор статьи на Хабре (декабрь 2025) связывает момент с повторяемостью: несколько команд делают разные части продукта параллельно, регулярно появляются новые экраны и компоненты, идёт много A/B-тестов, а каждый новый человек требует экскурсии по принятым правилам. Другие источники называют те же моменты:
- Подключился второй дизайнер или двое проектируют одновременно: так BAMN и Luft описывают границу.
- Разработчики спрашивают, какой здесь отступ и какой синий, а одна форма существует в трёх вариантах.
- Ревью дизайна уходит на размеры шрифтов, а не на продукт (BAMN).
- Много продуктовых областей, растёт роль доступности, новых людей трудно вводить в работу (список Luft для уровня «рабочая система»).
- Практикум приводит слова наставника: систему стоит проектировать, когда команда сама почувствовала необходимость, а на этапе небольшого стартапа хватает UI-кита.
Из чего складывается стоимость: части, состояния, темы, код?
Команда СберТеха (продукт Platform V UI Kit) описала на Хабре, как считает работу: в «дизайн-часах», условной единице, не равной астрономическому часу. Базовые примитивы (палитра, шрифты, плашки, тени) заняли около месяца работы старшего дизайнера. Чекбокс без подписи — 12 дизайн-часов, с подписью — 16, радиокнопка — 16, график — 54, карточка — 162. Сложность растёт с числом частей, состояний, размеров и тем.
- Размер сервиса и исходные материалы: RDN называет влияющими брендбук компании и продукта, прежнюю версию и готовый UI-кит.
- Темы: светлая и тёмная входят в формулу СберТеха как множитель.
- Платформы: веб — один объём, веб плюс iOS и Android — другой.
- Доступность: Luft добавляет WCAG AA на уровне «рабочая система»; руководства по доступности есть лишь в 59 % систем из опроса zeroheight.
- Код: в примере Autentika разработчик и дизайнер тратят на кнопку по 24 часа; библиотека только в Figma избавляет от доли разработчика.
- Миграция: перенос существующих экранов на новые компоненты может стоить дороже самой системы (Luft).
Делать своё или взять готовое: Ant Design, shadcn/ui или с нуля?
| Вариант | Что это | Подвох |
|---|---|---|
| Открытая система вроде Ant Design | Готовые компоненты с открытым кодом; по данным СберТеха, в Ant около 70 типовых компонентов | Зависимость от чужих изменений; СберТех выбрал разработку с нуля ради независимости и снятия правовых рисков |
| Готовый UI-кит, shadcn/ui и Tailwind | Автор статьи на Хабре берёт на раннем этапе кит и shadcn/ui как основу библиотеки компонентов, а Tailwind — для настройки | Это основа для проверки гипотез, а не система: правила и владельца придётся добавить |
| Своя система с нуля | Основы, компоненты и правила под продукт и бренд | Дольше и сложнее: разработчикам приходится ждать минимального набора компонентов (СберТех) |
Практичный путь для небольшой команды: взять готовую основу и потратить несколько недель на бренд. Luft оценивает такую доработку в 5–8 тыс. $ за две–три недели работы дизайнера. Автор с Хабра на старте предпочитает вместо полной системы одну аккуратную таблицу токенов в Storybook: цвета, отступы, радиусы, типографика.
Сколько стоит поддерживать дизайн-систему?
СберТех пишет, что для развития в идеале нужна отдельная команда, которая ставит цели, проводит исследования и обновляет систему; если делать это в свободное от задач время, результат будет «так себе». Autentika называет поддержку часто самой дорогой частью, потому что инструменты постоянно меняются.
По опросу zeroheight, выделенная команда есть у 83 % участников, а среди организаций до 100 человек — у 71 %. Без владельца система устаревает: компоненты отстают от продукта, и команды возвращаются к своим версиям.
Окупается ли дизайн-система и кто это измерял?
Каждая цифра окупаемости — заявление с автором. Бывает три вида.
- Модели. Формула Smashing 2022 года (два дизайнера из BestSecret Group) предполагает около десяти дизайнеров и тридцати разработчиков, год выхода на режим при 20 % времени и экономию 38 % (дизайн) и 31 % (разработка), усреднённую по пяти публикациям. Авторы пишут, что заранее экономию не узнать.
- Гипотезы. Autentika пересказывает возврат 7,5 к 1 для вымышленной компании с 1 000 дизайнеров и фронтенд-разработчиков; окупаемость за четыре–шесть месяцев у Luft держится на его допущении 15–25 сэкономленных часов в неделю по 75–85 $ в час.
- Опросы. В отчёте zeroheight 2026 года ROI измеряют только 5 % из 147 практиков, а удовлетворённость поддержкой руководства упала с 42 до 32 % за год. Опрос проводит продавец инструментов документации, и отвечали те, кто захотел.
- Заявления о собственном методе. СберТех сообщает, что его способ оценки прогнозирует стоимость элемента с точностью до 90 %; проверить это со стороны нельзя.
Свой расчёт такой: часы в неделю, которые уходят на вопросы по интерфейсу и переделки, умножьте на среднюю ставку и на 52 и сравните с ценой разработки плюс год поддержки. Если первое число оценить не получается, для дизайн-системы пока рано.
Когда дизайн-систему делать не нужно?
Автор статьи «На самом деле вам не нужна дизайн-система» (Хабр, 21 декабря 2025) называет три вреда раннего старта: вы стандартизируете то, что ещё десять раз изменится; команда занята «правильным» вместо понимания пользователей; ресурсов у стартапа и так мало. Добавим из других источников:
- Приоритеты скачут, product-market fit ещё не очевиден. Практикум: на этапе небольшого стартапа достаточно UI-кита.
- Нет владельца. В опросе zeroheight нехватка ресурсов встречается в каждой модели работы, а неясная ответственность — в двух из трёх.
- Боли нет: мало вариантов кнопок, нет новых людей и второй платформы.
- Хватит денег на разработку, но не на миграцию. Закладывайте оба или подождите.
Сколько стоят дизайн-система и экраны вокруг неё в VITON13?
Систему обычно берут вместе с экранами продукта, для которых она нужна. В итоге складываются актуальные стартовые цены VITON13 в двух режимах производства.
Калькулятор стоимости
Соберите состав работ
Отметьте нужное; итоги пересчитываются сразу.
Ваша оценка
- С помощью ИИ
- от ≈ 8 871 ₽ · $113
- Под руководством специалиста
- от ≈ 13 581 ₽ · $173
- Срок
- 10–18 рабочих дней
этапы могут идти параллельно; точные даты — в письменной смете
Получить смету за 1 рабочий деньСтартовые цены пакетов VITON13; письменная смета подтверждает объём и цену после брифа.
Сроки: дизайн-система — 10–18 рабочих дней, пакет для SaaS — 15–30 рабочих дней, пакет для дашборда — 6–10 рабочих дней.
Как VITON13 делает дизайн-систему
Начинаем с исследования того, что ваша команда выпускает сейчас: экраны, файлы Figma, элементы, которые существуют в нескольких версиях. Затем задаём визуальное направление и основы дизайн-системы, собираем библиотеку компонентов и пишем документацию по управлению: как систему используют и меняют. После этого передаём всё вашим дизайнерам и разработчикам. Число компонентов и платформы записываем в смету до начала работы. С помощью ИИ: ИИ ускоряет исследование и первые черновики компонентов и документации, а дизайнер проверяет каждое решение. Под руководством специалиста: ведёт дизайнер, ИИ помогает, поэтому вторая цена выше.
Разработка дизайн-системы
- Цена
- $113 с помощью ИИ или $173 под руководством специалиста
- Срок
- 10–18 рабочих дней
Дизайн SaaS-продукта
- Цена
- $213 с помощью ИИ или $313 под руководством специалиста
- Срок
- 15–30 рабочих дней
Дизайн аналитического дашборда
- Цена
- $93 с помощью ИИ или $113 под руководством специалиста
- Срок
- 6–10 рабочих дней
С помощью ИИ: ИИ готовит черновики в заданных шагах, человек задаёт направление и проверяет каждый результат. Под руководством специалиста: работу делает специалист, ИИ помогает.
Что входит
- Основы дизайн-системы
- Библиотека компонентов
- Документация по управлению
- Передача вашим дизайнерам и разработчикам
- Срок: 10–18 рабочих дней после согласования брифа
Не входит
- Сторонние платежи: лицензии шрифтов, места в Figma, платформы документации, хостинг
- Инженерная работа в вашем коде, если её нет в письменном объёме
- Юридическая консультация и заявление, что продукт соответствует закону о доступности
- Ежедневная поддержка системы после передачи
Правки: 2 раунда правок по результатам
Получить смету за 1 рабочий деньСмета за 1 рабочий день
Пример
ПИЛОТПилот в работе
Опубликованного кейса по дизайн-системе пока нет
У VITON13 пока нет опубликованной дизайн-системы клиента, поэтому в гайде нет экранов «до и после» и сэкономленных часов. Первые системы делаются в пилотной программе и появятся здесь только с согласия клиента.
Чего это не доказывает
- Ценовые диапазоны взяты у компаний из списка источников, а пороги — из их собственных советов; ничто из этого не измеряет работу VITON13.
Вопросы и ответы
Чем дизайн-система отличается от UI-кита?
UI-кит — набор визуальных элементов: цвета, шрифты, иконки, кнопки, анимация. Дизайн-система шире: Практикум включает в неё UI-кит, библиотеку кода и гайдлайны, то есть правила использования элементов. Без кода, правил и владельца у вас кит, а не система.
Сколько времени занимает разработка дизайн-системы?
Luft называет три–четыре недели для основы из 20–30 компонентов и шесть–десять для рабочей системы. RDN для среднего сервиса считает от 200 часов дизайнера и от 400 часов разработчика. СберТех оценил примитивы примерно в месяц работы старшего дизайнера. VITON13 сдаёт свой пакет за 10–18 рабочих дней.
Можно ли обойтись готовым UI-китом и shadcn/ui?
На раннем этапе это обычный совет. Держите цвета, отступы и радиусы в переменных с первого дня, записывайте каждое изменение компонента и время от времени сверяйте дубли. Когда одни правила нужны нескольким людям, опишите их: этот шаг превращает библиотеку в систему.
Нужна ли дизайн-система, если у компании один сайт?
Практикум пишет, что не каждый бизнес в ней нуждается. Если на сайте немного типов страниц и один дизайнер, хватит UI-кита и таблицы токенов. Это наша оценка, а не измерение. Когда появляются несколько продуктов, платформ или команд, вопрос стоит пересмотреть.
Что спросить у студии, прежде чем соглашаться на цену?
Сколько компонентов и с каким числом состояний; какие платформы и темы; библиотека только в Figma или ещё и в коде; уровень доступности; кто владеет системой после передачи; какие инструменты документации и платежи нужны; входит ли перенос существующих экранов. Предложения сравнимы, только когда эти ответы совпадают.
Делает ли ИИ дизайн-систему дешевле?
Отчасти. В опросе zeroheight 2026 года 46 % команд экспериментируют с ИИ в своих системах, а у 10 % он встроен в процессы; чаще всего его используют для кода и документации. VITON13 указывает обе цены: с помощью ИИ — ниже, под руководством специалиста — выше, и решения проверяет дизайнер в обоих режимах.
Источники
- СберТех на Хабре, оценка трудозатрат на дизайн-систему —
- RDN Group, разработка дизайн-системы —
- Хабр, На самом деле вам не нужна дизайн-система —
- Яндекс Практикум, Дизайн-система: что это и зачем нужна —
- Luft, Do startups need a design system? (англ.) —
- BAMN, Design systems for growing companies (англ.) —
- Autentika, How much is a design system? (англ.) —
- Smashing Magazine, The ROI of a design system (англ.) —
- zeroheight, Design Systems Report 2026 (англ.) —
- Банк России, официальные курсы валют на 1 октября 2026 года —