1 800x440 - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub

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

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

Нижние разделители

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

Введя текстовое значение, например, «t, 16», плагин применяет верхний и нижний разделитель 16 pt для любых выбранных ячеек таблицы. Как вы можете видеть, я действительно вложил в этот плагин много любви и заботы, чтобы сделать его эстетически приятным и восхитительным.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub

Создание цветовых стилей

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub

Функциональные цветовые стили

Я не рекомендую использовать в дизайне интерфейса такие цвета, как gray-600. Цвета интерфейса должны находиться во втором слое абстракции, который мы называем «функциональными цветами».

Например, мы могли бы создать функциональный цвет с именем textTertiary, который инкапсулирует цвет gray-600. Функциональный цвет для учета вариантов темы может инкапсулировать несколько стилей цвета. Таким образом, вы можете использовать textTertiary / light mode и textTertiary / dark mode.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub

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

Получившийся цветовой конвейер выглядел так:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub

Экспорт цветов

Нам нужен был способ получить все наши цветовые стили из Figma и преобразовать их в xcassets и XML-стили для iOS и Android. Копирование сотен значений казалось утомительным, и это еще мягко сказано.

Следующий плагин захватил все образцы цвета со страницы Colors и сгенерировал массив цветовых объектов, каждый из которых содержал полезные метаданные, такие как тема (светлая или темная, высококонтрастная или с нормальным контрастом), шестнадцатеричные значения и даже расширенные шестнадцатеричные значения с альфа-каналом (для Android).

Затем Эли Перкинс и Элиз Аликс написали кастомные скрипты, которые могли бы использовать этот массив и выдавать файлы цветовых ресурсов для конкретной платформы.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub

Выбор цвета

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub

Следующий плагин преобразовал стили слоя документа в модальное окно с поиском, превью образцов и служебные кнопки, чтобы установить свойства слоя для данного цвета. Например, кнопки «S» и «B» в каждом элементе списка цветов устанавливают цвета обводки (stroke) и фона (background) соответственно. Нажатие в любом месте элемента списка будет заполнено (fill) по умолчанию.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub

Переключатель темной темы

Дизайнеры не должны отдельно проектировать каждый экран для светлой и темной темы. Это проектирование в неправильном слое абстракции: темная и светлая темы являются функциями базовой цветовой системы.

Тем не менее, я захотел проверить правильность высоты, иерархии шрифтов и коэффициенты контрастности в темной теме. Поскольку все мои цветовые стили были названы со структурированной иерархией, например, textPrimary / light / normal contrast, я мог программно менять местами стили слоя в поисках пар. Таким образом, с учетом выделения, у которого был цвет заливки textPrimary / light / normal contrast, я мог проверить, есть ли в моем документе textPrimary / dark / normal contrast. Если он есть, поменяйте местами идентификаторы стилей.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub

Заполнение данных

Заполнение макетов аватарами, именами пользователей и биографиями утомительно. Я постоянно переключался между браузером и Figma, чтобы получать точные данные. К счастью, Figma связана с Интернетом, поэтому я мог написать небольшую утилиту, которая работала бы с GitHub API и возвращала данные о людях и организациях.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub
Этот плагин был в  открытом доступе, как  figma-github-data

Моно-плагин

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

Решением стало объединение большинства плагинов в один «моно-плагин», который преобразует различные команды в кнопки. Поэтому теперь вместо ввода команды «Convert to dark mode» у меня есть кнопка, на которую я могу нажать, чтобы выполнить действие. Это окно является моим личным дополнением интерфейса Figma. Я могу открыть его один раз за всю рабочую сессию.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Автоматизация скучных рутинных процессов продуктового дизайна от GitHub

Вывод

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

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

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

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

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

Демо

Я представил эту статью в феврале на конференции Figma Config. Мои коллеги Jake Miller и Lily Nguyen также продемонстрировали свои впечатляющие плагины, которые используют Atlassian и Uber.

Ресурсы

Вы можете загрузить плагин figma-github-data на GitHub, чтобы посмотреть, как он работает, или разветвить его для своей собственной команды. Документация по API плагинов Figma  должна быть вашим основным ресурсом при создании плагинов.

Я также рекомендую исследовать следующие репозитории для получения ресурсов, фреймворков или сэмплов кода:

Свежие вакансии
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

Оригинал: brianlovin.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий