на связи руководитель дизайн-системы hh.ru 🔴 Коля Михайлов, и сейчас будет большой пост про... дизайн-систему

начнём с базы

если совсем просто, дизайн-система — это способ держать весь интерфейс компании в одном визуальном и смысловом поле

это не только про кнопки и цвета, это про предсказуемый результат — когда интерфейсы получаются стабильными и понятными, независимо от того, кто их делает: опытный дизайнер, новичок или подрядчик

у дизайн-системы есть:
◾️ визуальный слой — компоненты, токены, принципы
◾️ инженерный слой — код, репозитории, автоматизации
◾️ процессный слой — правила обновления, релизы, обсуждения, коммуникации

вместе это превращается в структуру, которая помогает другим продуктам быть последовательными и быстрее развиваться

казалось бы, чем это отличается от простого набора шаблонов в фигме?

всем

шаблоны — это просто картинки, которые не обновятся, если завтра изменится бренд или поведение кнопки

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

она нужна, когда команда начинает тратить много времени на согласование, дублирование и ручные правки

например, дизайнеры рисуют одно и то же по три раза, разработчики реализуют по-своему, тестировщики не понимают, где норма, а где ошибка

у нас в hh.ru дизайн-система magritte — это основа для всех интерфейсов: единый набор принципов, компонентов и правил, на которых строятся продукты компании

благодаря ей продуктовые команды делают фичи быстрее, а не рисуют и верстают с нуля то, что уже было однажды придумано

бро, ты сделаешь дизайн-систему и т. д.

привет, это 🔴 Коля Михайлов, руководитель дизайн-системы hh.ru
вдохновился вашими лайками под прошлым постом, поэтому сегодня снова говорим про дизайн-систему, на этот раз о том, как её создать

как начать

вообще, никто не просыпается утром с мыслью «а не сделать ли нам дизайн-систему»
сначала появляется боль: слишком много разных интерфейсных решений, дублирование, расхождения

мы в hh.ru начали разработку дизайн-системы параллельно с редизайном, чтобы создать основу, на которой можно построить новый визуальный язык и технический стек компании

кого позвать

минимально нужны дизайнер и разработчик
но у нас в hh.ru над magritte работает целая команда дизайнеров, две дев-команды — web и mobile, а ещё нам помогают UX-писатели и исследователи

сколько займёт

в идеальном мире — месяцев шесть, в реальности — она никогда не готова

первые результаты видны быстро: когда компонентная библиотека начинает использоваться в продукте, а не лежит на полке
но развитие системы — это постоянный процесс

что упрощает

рутину — перестаёшь тратить время на отрисовку элементов, согласование мелочей, на то, чтобы объяснять разработчику, где отступы
всё становится более предсказуемым

что усложняет

нельзя «сделать по-своему»: нужно вносить изменения через процесс, согласовывать, думать о влиянии на всех пользователей системы
это и есть взросление — когда дизайн перестаёт быть «рисованием», а становится управляемой средой

у самурая дизайнера нет цели, есть только путь

привет, это 🔴 Виталий Шмелёв, лид продуктового дизайна hh.ru
сейчас расскажу про рост дизайнеров

многие дизайнеры видят карьеру так: мидл → сеньор → лид
вроде бы логичная лесенка — чем старше, тем «руководительнее»

но мало кто знает, что лидство — не единственный путь, и уж точно не обязательный

деньги

парадокс, но факт: хороший дизайнер может получать больше, чем лид
сеньор — специалист уровня «закрывает любую задачу» в продукте стоит дороже, чем человек, который тратит 70% времени на совещания

рутина

лид — это почти не про дизайн
если вам нравится «делать руками», то лидство — боль

вы либо совсем перестаёте делать дизайн, либо делаете его между встречами, либо только концепты «в высоком полёте» — и то не в каждой компании

календарь

у лида календарь выглядит как тетрис на максимальной скорости: созвоны, планёрки, согласования, ревью, ещё немного созвонов сверху

хотите поработать?
есть время до начала рабочего дня или после него, потому что дедлайны никто не отменял

коммуникации

лид — это язык, ваш главный инструмент — не фигма, а умение спорить, объяснять, разруливать конфликты, структурировать, направлять

если от слов «созвон», «обсудим» или «надо проговорить» вас начинает шатать — подумайте дважды

самое тяжёлое: увольнять людей

это очень сложно, особенно если вы эмпат, особенно если боитесь сказать человеку, что он не тянет

есть лиды, которых ломает именно это, потому что это ответственность не только за результат, но и за чужие чувства, карьеру, будущее

и тут нет «правильной формулы», каждый раз по-новому

так почему стоит оставаться крутым специалистом?
потому что это тоже путь — не хуже, не ниже
крутой сеньор, который делает работу быстрее, глубже и точнее, который понимает пользователей, который закрывает комплексные задачи и учит других — часто ценнее для продукта, чем любой руководитель

лид — это роль
сеньор — это мастерство

и путь мастера иногда важнее пути начальника

какие форматы бывают у дизайн-системы

привет, это 🔴 Коля Михайлов, руководитель дизайн-системы hh.ru
хочу поделиться мыслями кое о чём

дизайн-систему часто воспринимают как бинарную вещь: она или есть, или нет

в реальности всё сложнее — дизайн-система может существовать в разных форматах,
которые зависят от задач продукта

какие варианты бывают

1️⃣ дизайн-система как справочник
команда фиксирует базовые элементы, приводит в порядок макеты, договаривается о паттернах
дизайн-система практически не влияет на процессы, связь с кодом здесь не обязательна

2️⃣ дизайн-система как рабочий инструмент
следующий этап, когда команда начинает реально на неё опираться
изменения начинают влиять на релизы, дизайн и разработка больше не существуют отдельно

3️⃣ дизайн-система как основа интерфейса продукта
со временем дизайн-система начинает спасать от рассинхрона
без неё падает скорость, а любое изменение обходится слишком дорого

4️⃣ дизайн-система как продукт внутри продукта
финальный босс, самый нагруженный и сложный формат дизайн-системы
на этом этапе появляются ожидания, приоритеты и конфликтующие запросы, возникает необходимость смотреть на конкретные метрики
такой формат нужен не всем, но там, где без него нельзя, дизайн-система начинает жить по полноценной продуктовой логике

отдельный вопрос — связь фигмы и кода

сама по себе она не говорит о зрелости дизайн-системы, а показывает, в каком формате система работает, чего от неё ждут

на ранних этапах жёсткая связка часто оказывается не преимуществом, а дорогим авансом

дизайн-система не обязана быть большой, сложной или «зрелой»
она обязана быть уместной, работать на тот запрос, который есть у продукта, и в том формате, который этот запрос требует

всё остальное обычно приводит к завышенным ожиданиям и сложностям в работе

ого, а вот и Новый год! 🌟

сделали перерыв между нарезанием и поеданием салатов, чтобы вас поздравить

желаем, чтобы в 2026-м макеты сходились с первого раза, креатив лился рекой, а клиенты говорили только «вау, согласовано» и «вот ваш аванс»

пусть будет побольше проектов, которые хочется положить в портфолио, и поменьше правок

надеемся, новый год будет лучше предыдущего

отдыхайте, перезагружайтесь и веселитесь

с наступающим!