Контекст

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

Поэтому основная цель — ускорить собственную работу и оптимизировать взаимодействие с разработчиками

Что сделал и результат

Провел анализ дизайн-систем и UI-китов в Figma Community, выделил сильные и слабые стороны, определил минимальный набор компонентов и требований. Результат — вторая версия Palka UI.

Реальные проекты и участие в крупной дизайн-системе показали точки роста. Сейчас работаю над новой версией. Далее — ключевые принципы.

Цвет

Цветовая система состоит из двух уровней:

• Палитра (примитивы) — набор исходных цветов с оттенками;
• Семантические токены — цвета на основе их ролей (для текста, фонов, границ и т.д.)

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

На бесплатном тарифе используем для каждой темы свою коллекцию и переключаемся между ними с помощью плагина Swap Variables. На платном тарифе удобнее использовать нативное переключение тем через токены

Типографика

По умолчанию используем для web Onest, а для Android и IOS нативные шрифты — Roboto и SF Pro Display соответственно.

Для каждого параметра стиля текста используем свою размерную сетку. Название токена получается путем умножения числа 5 на предполагаемый размер. Например, 12*5=60, 14*5=70 и так далее. Для каждой группы параметров свои размеры.

На бесплатном тарифе используем для каждой темы свой набор стилей и переключаемся между ними с помощью плагина Swapper. На платном тарифе удобнее использовать плагин Themer и опубликованные библиотеки стилей

Тени

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

Иконки

Используем Phosphor. Основной принцип — если используем stroke, то лучше чтобы иконки были разных размеров, если fill, то можно попробовать просто менять их размер. Используем Union, чтобы цвет не менялся при swap.

Чтобы понять что перед нами стандартная иконка, используем необычный вариант и название placeholder.

В процессе наполнения...

Размеры

Базовый модуль интерфейса — 8px. Плюс есть два подмодуля 4px и 2px. На их основе строятся типографика, элементы интерфейса и отступы между ними, а также размеры иконок. Все это делает дизайн более предсказуемым, упрощает выбор размеров и ускоряет перевод дизайна в код.

В названии использую умножение на 5. Например, значение 4, а имя «20», значение 8, а имя «40», значение 16, а имя «80». Это чуть проще чем абстрактные.

Точка роста — использовать для размеров и расстояний модуль 16px, чтобы для масштабирования размеров использовать множитель, по примеру кода. Например, size.100 * 0.5 = 8px, size.100 * 2.75 = 36px и т. д.

Компоненты

Для каждого элемента интерфейса есть доски с компонентами, документацией и, если это необходимо, с анимацией. Чтобы не сильно нагружать память Figma делим компоненты по группам (размер, стиль и т.д.). Все важные особенности указываем в описании к компоненту.

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

В компонент закладываем только необходимые для проектирования состояния (стандартное, загрузка, скелетон, недоступно), иные состояния отражаем в документации и/или в анимации, чтобы не таскать по макетам лишние сущности.

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