Контекст

При работе над каждым новым проектом тратишь время на создание элементов интерфейса и стилей с нуля. Если пытаешься использовать чужие готовые компоненты, сталкиваешься со сложностями начиная от нейминга и заканчивая структурой. В итоге тратишь время впустую.

Идея

А что если собрать собственный UI-кит с универсальными правилами и возможностью масштабирования, можно ли сократить время работы над проектом?

Что было сделано

Провел анализ действующих дизайн-систем и доступных UI-китов из Figma Community, по результатам которого появилось понимание примерной структуры UI-кита.

Результат

Понравилось название Palka. Палка с древних времен самый доступный предмет, её можно использовать в качестве инструмента, оружия или игрушки. Это название коррелирует с концепцией проекта — простота и универсальность.

Теперь прототипирование, создание стилей и кастомизация компонентов для проекта происходит быстрее, минимальная разница составила 2 часа.

Palka UI в Community Figma

Цветовая система

Поскольку UI-кит подразумевается как универсальный инструмент, его цветовая система должна подстраиваться и масштабироваться под каждый проект с минимальными затратами по времени.

Типографика

Текстовые стили составляем от самого крупного кегля до маленького.

Иконки

Используем open-source интерфейсные иконки Feathericons. Если не подойдет, то есть много других хороших open-source иконок.

Компоненты

Выбрал основные элементы интерфейса, которые встречаются в большинстве проектов.

Остальное

Также определил выделил основные правила для теней, расстояний, скруглений и сетки.