Дизайн-систему просят в 51% UX/UI-вакансий: что положить в кейс, если своей вы не строили

Что просят, когда пишут «design system»

На 15 октября в ленте 39 вакансий UX/UI дизайнера от 34 компаний. Дизайн-систему в них упоминают в 51% — чаще, чем прототипы (36%) и исследования (23%); впереди только Figma с 67%. Отдельной ролью это тоже стало заметнее: вакансий Design System дизайнера сейчас 16, а на 15 сентября было 5. Начинающих среди них нет вовсе — пять вакансий middle, пять senior и одна lead. Денег называют чуть больше обычного: около 425 000 ₸, посчитано по 9 вакансиям, где зарплату указали, против 400 000 ₸ в UX/UI по 20 таким вакансиям.

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

Один компонент, доведённый до конца

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

• все состояния: обычное, под курсором, нажатое, выключенное, с ошибкой, с загрузкой, пустое;
• варианты: размеры, иконка слева и справа, длинный текст, который не помещается;
• поведение на узком экране — что переносится, что обрезается.

Положите рядом скриншот «как было»: шесть кнопок из разных экранов с разной высотой и разным синим. Эта пара картинок объясняет вашу работу быстрее, чем абзац текста. Если элемент один, кейс читается за минуту — а как собрать кейс целиком, мы разбирали отдельно.

Назовите значения и покажите проверку

Вторая половина работы — значения. Цвет, отступ, радиус и размер шрифта, у которых есть имя, меняются в одном месте, а не по всем экранам руками; в Figma для этого есть переменные, а режимы к ним позволяют переключать светлую и тёмную тему на том же макете (документация Figma). В кейсе достаточно показать список имён и один экран, перекрашенный переключением режима.

Дальше — то, что отличает рассказ от демонстрации: проверка. Доступность просят в 25% вакансий Design System дизайнера, и самое простое её доказательство измеримо. По рекомендациям W3C контраст обычного текста с фоном должен быть не ниже 4,5:1, крупного — 3:1. Прогоните свои цвета через любой проверяльщик контраста, покажите, какой оттенок серого не прошёл и чем вы его заменили. Это одна строка в кейсе, но она сразу говорит, что вы работаете не на глаз.

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

Чем это кончилось и что сделали именно вы

У учебной работы тоже бывает результат, и его стоит назвать честно: «перевёл на общие компоненты 14 экранов, на двух пришлось оставить старую вёрстку — там особая логика». Наблюдаемое изменение вместо цифры — нормально: макет собирается быстрее, правки цвета перестали расползаться. Выдуманный процент хуже отсутствия процента: на разборе кейса спросят, как вы его считали.

Если система была командная, одним предложением скажите, что делали вы, а что остальные, — разбор этого случая есть в справочнике, когда работа под NDA или сделана командой. «Мы навели порядок в библиотеке» на собеседовании всегда превращается в неудобный вопрос.

Что с этим делать

Выберите один компонент из того, что уже сделали, и за вечер доведите его до состояний, вариантов и трёх строк правил. Второй вечер — имена значений и проверка контраста. Третий — страница кейса: что было не так, какие развилки были, что получилось, что ваше. Этого достаточно, чтобы в ответ на половину вакансий UX/UI у вас было что открыть, а не только слова «работал с дизайн-системой» в резюме.