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

начнём с базы

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

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

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

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

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

всем

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

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

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

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

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

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