UI-kit и документация
Проблема
При работе над каждым новым проектом тратишь время на создание элементов интерфейса и стилей с нуля. Если пытаешься использовать чужие готовые компоненты, сталкиваешься со сложностями начиная с нейминга и заканчивая структурой. В итоге тратишь время впустую.
Задача
Сэкономить время при проектировании компонентов и стилей под конкретный проект.
Гипотеза
Если создать собственный UI-кит с универсальными правилами и возможностью масштабирования, можно ли сократить время работы над проектом?
Создание UI-кит
Провел анализ действующих дизайн-систем и доступных UI-китов из Figma Community, по результатам которого появилось понимание примерной структуры UI-кита.
Основные элементы:
цвет
типографика
иконки
компоненты
Дополнительные элементы:
тени
расстояния
скругления
сетка
плагины
Что было сделано
Цветовая система
Поскольку UI-кит подразумевается как универсальный инструмент, его цветовая система должна подстраиваться и масштабироваться под каждый проект с минимальными затратами по времени.
Типографика
Текстовые стили составляем от самого крупного кегля до маленького.
Иконки
Используем open-source интерфейсные иконки Feathericons. Если не подойдет, то есть много других хороших open-source иконок.
Компоненты
Выбрал основные элементы интерфейса, которые встречаются в большинстве проектов.
Остальное
Также определил выделил основные правила для теней, расстояний, скруглений и сетки.
Понравилось название Palka. Палка с древних времен самый доступный предмет, её можно использовать в качестве инструмента, оружия или игрушки. Это название коррелирует с концепцией проекта — простота и универсальность.
Результат
Теперь прототипирование, создание стилей и кастомизация компонентов для проекта происходит быстрее, минимальная разница составила 2 часа.