Мини дизайн-система для java dev с темизацией

Прокачал навык создания дизайн-системы на part-time в сотрудничестве с Java-разработчиком, уложился всего в 3 недели. Уточню: я выполнял этот заказ, чтобы не простаивать, пока искал работу в новой команде в статусе безработного.

Это не привилегированная работа в Ростелеком, Газпром на позиции senior/lead, а вынужденная мера чтобы иметь заработок и отсутствие других возможностей заработать в этот временной период. Ответы на вопросы: Кому делал систему? — юрлицо, он же предприниматель и java-разработчик из россии которому надо иметь свою дизайн-систему, чтобы разрабатывать свои стартапы или продавать систему как продукт. Почему она такая визуально? — на личный вкус заказчика. Почему сделана на половину? — просто не сошлись по деньгам и требованиям.

Задача

Построить систему согласно требованиям: поэтапность работы согласно тех. заданию, создание палитры и переменных с определенной структурой данных и неймингом через аббревиатурный метод (слои, группы, коллекции, переменные). Работать в общем аккаунте Figma Pro и утверждать все с заказчиком на митах.

Что делал

Анализ требований технического задания и расчет сроков каждого этапа
Исследование актуальных дизайн-систем и методологии их построения
Создание палитр цветов в colorbox по методологии специалистов Яндекс, создание примитивных и функциональных коллекций переменных
Создание переменных, групп (токенов) для всех атомов дизайн-системы
Темизация (создания светлой и dark палитр и их привязка к переменным)
Создание текстовых стилей, переменных системы отступов и радиусов
Создание компонентов в трех разных размерностях и их колористика с учетом темизации и нюансов отличий светлого UI от темного
Структуризация всего файла «до безупречности» (это касается названий слоев, фреймов, таблиц и верстки каждого элемента на autolayouts

Решение

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

Демонстрация переключения тем

Процесс

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

Палитра прпмитивов

Я против неадекватного кол-ва оттенков, достаточно не более 10, но разработчик настоял, что ему «может не хватить» — оставим это на его совести и невежестве. Дизайн система должна быть удобна прежде всего дизайнеру, это инструмент и если он неудобен в использовании, это сказывается на эффективности, скорости.

Палитры составлялись в ручную без использования плагинов (они не потянут эту задачу) в инструменте colorbox.io по определенным алгоритмам, а не как попало. Помимо имени и HEX кода цвета имеют RGBA данные цветовой модели.

Атомы и стили

Значений может быть больше, в данном случае разработчику было достаточно.

Организация слоев и нейминг

Нет, просто вариативных компонентов недостаточно, разработчику нужно, чтобы все объекты в компоненте находились в последовательности как слои от левого-верхнего к правому нижнему углу в компоненте (сверху-вниз, как слои). Сделать это несложно, или через плагин или «ручками» через shift+arrow up/down хоткеи.

Компонент: Button, ButtonIcon

Разделение на 3 вариативных компонента по размерностям было удобно разработчику, аналогично с разделением обычных кнопок и кнопок Icon.

Тенденция, которую я наблюдаю у американский коллег в том, что совмещают кнопки и кнопки-иконки в едином компоненте (прим. Align UI). Разделение же большого компонента на мелкие практикуют в дизайн-системе Ozon согласно статье на habr Виктора Теплова «Автостопом по дизайн системе». Я работаю исходя из погружения в задачи и требований, ситуации. Умею по-разному.

Компоненты: Checkbox, Radio, Toggle

Спрашивать по визуальной составляющей с разработчика, это его личный выбор.

Не будет лишним сказать, что разработчик влезал в figma и переназначал цвета? Пост оплата дело такое: «не нравится — иди гуляй, я хочу так, как мне видится». Я старался следить за коэффициентом контрастности, по мере возможного.

Компонент: поле ввода

Не спрашивай, почему так... Да слишком много цветов, да кроваво, это одна из причин почему я перестал работать с этим человеком, основную покажу ниже.

Переменные (визуально в таблице)

Не забываем, что цвета в светлой и темной темах разные (не просто инверсия черного в белый а подбор оттенка с соблюдением contrast ratio и виде в целом, перемножаем и получаем более 1000 переменных с которыми не удобно работать.

Дурацкие аббревиатуры сведут любого сениор дизайнера с ума, кажущиеся на вид простыми они существенно мешают скорости работы при назначении цвета, как и выстроенная структура системы в целом. Я помучался за опыт и портфолио. Денежная сумма, выделенная разработчиком на проект составляла в общем 70К рублей из которых я заработал лишь часть, согласно сданным этапам работ. Мне совершенно плевать было на деньги, в условиях где меня не берут на работу там, где я достоин быть.

Также были тесты поверхностей (surface) но перегружать вас не вижу смысла, есть файлик (дубликат уже без переменных, все они тянутся из оригинального)

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

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

Работать дизайнером дизайн-системы не стремлюсь, приглашают тех, кто работал в крупных компаниях и более крутой результат имеет (еще бы, и не за три недели).

В сервисе и развитии дизайн-системы может работать любой middle и даже junior дизайнер. Однако собрать дизайн-систему с нуля может только Senior дизайнер и то не один. Считаю, что данный опыт меня поднял до Middle+ хоть и не в команде.