Инструменты и процессы при проектировании мультибрендовой дизайн-системы

Привет, дорогой.

Специально для тебя сделал плохой, но всё-таки перевод удивительной статьи Павла Киселева, в которой рассматриваются инструменты и рабочие процессы при создании мультибрендовой дизайн-системы.

Эта статья позволила мне поставить под сомнение методы, которые я использую в своей работе, а сомнение как известно путь к совершенству :)

Чем будем работать

Source Foundation - это плагин для Figma, предназначенный для управления цветами, отступами и типографикой. Кроме того, он содержит несколько вспомогательных команд для поддержки других рабочих процессов, таких как замена переменных, исправление слоев и импорт/экспорт стилей компонентов.

Как будем работать

Основным поинтом процесса является автоматизация для быстрого адаптирования системы-источника под конкретные потребности.

Форк

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

Кастомизация

Всё дело в инструментах, которые делают настройку процесса максимально простой. Плагин Source Foundation позволяет изменять цвета, отступы, радиусы, типографию и стили компонентов.

Наводим красоту и публикуем

Финальные штрихи. Именно здесь вы дарите новой системе душу.

Результаты

1. Design system file (Figma)
2. Figma plugin
3. Tokens (Git Hub repo)
4. Branding samples (Figma)
5. Crypto Trader Pro (Figma)

Демо

1. Crypto Trader Pro (Figma)
2. Branded components demo (Figma)
3. Source Foundation Dev Docs (Сайт)

Погнали!

Идея

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

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

В двух словах, это похоже на создание форка репозитория или проекта на CodePen.

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

Челлендж

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

Я хотел легко изменять несколько основных аспектов дизайн-языка.

1. Цветовая палитра Я хотел иметь полный контроль над нейтральными и акцентными цветами с возможностью тонкой настройки как светлых, так и темных режимов.
2. Типографика Должен быть способ выбора шкалы типографии и базового размера шрифта.
3. Отступы Широкий диапазон масштабов для проектирования под нативные рабочие столы, веб-сайты и мобильные приложения.
4. Радиусы Несколько предустановленных значений от консервативных до более игривых.
5. Элевация Должно хватить шести уровней элевации.
6. Стили компонентов Целью было обеспечить разнообразие различных визуальных стилей для основных компонентов дизайна, таких как кнопки, выпадающие списки и элементы форм.

Цветовая палитра

Это самая сложная задача для освоения. Это было самое интересное решение. Рабочий процесс вокруг палитры всегда одинаков.

1. Выбираем основные цвета
2. Создаем оттенки
3. Проверяем доступность
   

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

У меня уже есть надежная цветовая система, которая работает для меня и десятков других дизайнеров в моей компании.

Теперь мне нужен был способ изменить палитру с минимальным или без ручного труда.

Чтобы справиться с этими задачами, я создал плагин Source Foundation для Figma, который выполняет всю предварительную работу по управлению цветами.

Он дает вам полный контроль над семантикой, нейтральными и акцентными цветами. Был разработан с учетом доступности, все акценты соответствуют WCAG 2.2 с минимальным контрастным соотношением 4,5:1. И, что самое важное, им приятно пользоваться.

Демо, где вы можете поиграть с разными цветовыми темами и другими аспектами дизайна → ссылка на демо.

Типографика, отступы и радиусы

Это важные аспекты, которые влияют на общий размер элементов пользовательского интерфейса и их тон.

Я сделал это простым с помощью нескольких наборов токенов. Вы выбираете набор, который соответствует потребностям проекта, и плагин делает остальное.

Стили компонентов

Стили компонентов определяют внешний вид и ощущение всех основных компонентов в системе. Это будет плоским? Или, может быть, немного блестящим? Поднятым или опущенным? Как насчет немного неровностей?

Как дизайнер, я хотел иметь гибкую и легко поддерживаемую систему стилей, которую я мог бы адаптировать для любого клиента на любой платформе с помощью простого в использовании рабочего процесса plug-and-play. Если угодно, CSS-подобные классы.

Концепция

Для того чтобы это сделать, мне нужно разделить компоненты и их стили. Это похоже на создание CSS-классов для кнопок, выпадающих списков и форм, но с использованием компонентов Figma. Я называю их стиль-компонентами.

Стиль-компонент представляет собой многоразовый стиль элемента пользовательского интерфейса, очень похожий на CSS-класс.

В Figma экземпляр стиль-компонента находится в абсолютном положении и находится за контентом.

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

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

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

Моим абсолютным must-have являются следующие элементы:

1. Общий элемент интерфейса
• Базовый стиль для всех интерактивных элементов интерфейса, которые можно нажимать, наводить и выбирать. Например, пункты меню, элементы списка и элементы навигации.
2. Кнопки
• Кнопки по умолчанию, основные, разрушающие и призрачные кнопки.
3. Элементы формы
• Поля ввода, флажки, радиокнопки и переключатели.
4. Фокус-визуализация
• Повторно используемая и последовательная фокус-визуализация, которую я могу применять к любому элементу, который мне нравится.
5. Оверлеи
• Стили для модальных окон, выпадающих списков, тостов и всплывающих окон.

Структура стиль-компонента

Хорошая идея иметь последовательную структуру для стиль-компонентов. Это упрощает поддержку и замену слоев по мере необходимости.

После нескольких экспериментов вот с чем я остановился.

Давайте разберем подробнее.

1. Слой фона предназначен для основного цвета и применения эффектов к слою. Слой изображения фона внутри выполняет ту же работу, что и свойство background-image в CSS.
2. Компонент тени - это собственно созданный эффект элевации, который поддерживает colour bleed shadows. Таким образом, я могу изменить цвет тени как мне угодно, не создавая отдельного стиля эффекта в Figma. И я могу даже изменить режим shadow blending тоже!

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

Не забудем и про тёмный режим.

Визуальные состояния

Все интерактивные элементы должны иметь визуальные состояния. Я использую варианты компонентов для их реализации.

Вот, например, мой стиль основной кнопки.

И элемент формы.

Настройки цвета

Очень важная функция в современной разработке пользовательского интерфейса - это возможность изменять цвета.

Например, в CSS мы можем использовать функцию color-mix() и наложить любой цветовой градиент. Все современные препроцессоры CSS имеют цветовые функции в той или иной форме.

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

Opacity

Возможность изменять прозрачность любого цвета - это неотъемлемый инструмент в нашем арсенале.

В настоящее время мы не можем изменить альфа-канал для псевдонима цветовой переменной в Figma. Однако мы можем изменить прозрачность слоя, даже есть переменные прозрачности для этого. Как только вы установите цвета в отдельные слои, нетрудно настроить их для работы с любым цветовым диапазоном.

Tints and Shadows

Оттенки и тени делают целевой цвет светлее или темнее.

В CSS есть свойство background-image, которое создает виртуальный слой поверх сплошного заливки. Это позволяет наложить фоновый цвет либо градиентным заливкой, либо изображением.

В Figma я собираюсь использовать слои, чтобы добиться аналогичных результатов.

Это работает так же, как и в CSS. Есть несколько реальных примеров того, как это работает для веба → ссылка на документацию

Gradients

Для создания градиента мы смешиваем несколько цветов.

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

Вот пример того, как это переводится в HTML+CSS → ссылка на пример в CodePen

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

Этот метод создает красивые и чистые градиенты поверх любого выбранного мной цвета. Вы можете найти более подробную информацию здесь → ссылка на документацию

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

Подключаемые стили

Это был последний кусочек, который нужно было решить. Мне нужны были некоторые виды стилей, которые я мог бы применять поверх моих компонентов, чтобы полностью изменить их внешний вид и ощущения. Желательно что-то визуальное, чтобы я мог видеть результат заранее.

Я пытался делать это вручную, но после нескольких попыток я обнаружил, что ручной процесс слишком сложен и подвержен ошибкам. Гораздо лучше иметь какой-то вид автоматизации, поэтому я придумал простой рабочий процесс импорта/экспорта для библиотек пользовательских стилей.

Автоматизированные шаблоны стилей в файле

Чтобы экспортировать стили, я просто выбираю рамку с компонентами стиля и запускаю команду экспорта. Автоматизация находит все компоненты и воспроизводит их структуру слоев в обычных рамках. Это похоже на свободную копию, которую я могу повторно применить к исходному компоненту.

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

И вот все, что мне нужно сделать, мой файл пользовательской системы дизайна готов к использованию.

Резюме

Создание брендированных систем - это сложно.

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

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

С тех пор я поставил цель разработать полноценный продукт Figma - систему, которая является реальной и способной обслуживать несколько брендов. Это сочетание правильно спроектированных дизайнерских компонентов, продвинутого инструментария и четких рабочих процессов.

Оригинал статьи: https://uxdesign.cc/flexible-styles-for-multi-brand-design-systems-638f9c25c227

Спасибо, дорогой!

Уютная тележка: https://t.me/yetanotherdesigner
ВКшечка: https://vk.com/yetanotherdesigner