Создание дизайн-системы для разработчика
Пока я искал работу мне предложили фриланс проект. Заказчик — Java-developer, которому нужна система для своих бизнес целей: продажа системы и использование для своих стартапов. Взялся только с целью прокачки опыта и чтобы не сидеть без дела.
Что сделал
Ряд синков с заказчиком-разработчиком
Исследование актуальных дизайн-систем
Анализ технического задания и всех этапов
Настройка палитр в colorbox и импорт JSON
Создание текстовых стилей
Структуризация и нейминг переменных, элементов, слоев
Вариативные компоненты с окраской в двух темах
Исследование актуальных дизайн-систем
Анализ технического задания и всех этапов
Настройка палитр в colorbox и импорт JSON
Создание текстовых стилей
Структуризация и нейминг переменных, элементов, слоев
Вариативные компоненты с окраской в двух темах
Задача
Построить систему согласно требовниям и видению заказчика, что подразумевало определенное количество переменных, особенный метод их именования, алгоритм применения и набор компонентов. Про необоснованно высокое кол-во переменных аргумент таков — она экспериментальная или «я так хочу».
Решение
Работа была разделена на этапы (спринты) и оплачивалась поэтапно. Кол-во цветов палитре было продиктовано требованием заказчика, поэтому не использовал удобные плагины, а импортировал палитры из colorbox, как сделано в Яндекс. Цвета именовались вручную, rgba значения добавлены согласно тех. требованиям. Как и имена групп текстовых стилей и переменных в виде аббревиатур. Внешний вид системы не важен, поскольку «на вкус» заказчика с бренд красным цветом в качестве акцентного.
В коллекции FCL (Functional Colors) три основных группы: ABV (above), SFC (surface), BLW (below), где каждая включает шесть групп цветокодирования включающих еще пять групп состояний каждая...
Итоги
Заказчик получил 2/3 выполненных этапов работы по тех. заданию.
Я же выгорел и прекратил сотрудничество, чем больше я работал с данной системой, тем больше UX болей дизайнера это доставляло. Исследования различных дизайн-систем показало, что достаточно стандартного количества переменных (не более 40) чтобы собрать гибкую систему в двух темах, а цветов для «растяжек» не более 10.
На всю работу в режиме Part-time фриланс затрачено около 2 мес.
Я же выгорел и прекратил сотрудничество, чем больше я работал с данной системой, тем больше UX болей дизайнера это доставляло. Исследования различных дизайн-систем показало, что достаточно стандартного количества переменных (не более 40) чтобы собрать гибкую систему в двух темах, а цветов для «растяжек» не более 10.
На всю работу в режиме Part-time фриланс затрачено около 2 мес.
Figma
Выделите любой фрейм и переключите селектор с DRK на LGT:
Темная тема
Светлая тема (дубликат, кому лень переключать)
Темная тема
Светлая тема (дубликат, кому лень переключать)
Обычно в командах, где создают дизайн-систему закладывается пол года на ее создание не одним специалистом, например система «Атомаро» от Ростелеком. Я способен создавать подобные по сложности системы при нужных условиях труда, самостоятельно или в команде с коллегами.
