Мы начали создавать мобильные приложения GitHub в мае прошлого года, примерно в то же время, когда состоялся релиз плагинов Figma. Я помню, как испытал чувство облегчения, потому что у меня внезапно появился доступ к инструментам, которые ускорили бы процесс проектирования, упростили трудоемкие рабочие процессы и автоматизировали скучные части проектирования экранов.
В течение следующих нескольких месяцев я сделал около десяти небольших полезных плагинов. Эти небольшие утилиты были в конечном итоге объединены в один «моно-плагин», ускоривший мой ежедневный процесс проектирования мобильных приложений.
Нижние разделители
Табличные представления iOS используют разделители между элементами списка, чтобы улучшить их разборчивость. Разделители вставляются от левого края экрана для выравнивания с любым текстом в ячейке таблицы. Поскольку я проектировал много табличных представлений, было утомительно постоянно изменять размер этих разделителей, так как размеры содержимого менялись.
Введя текстовое значение, например, «t, 16», плагин применяет верхний и нижний разделитель 16 pt для любых выбранных ячеек таблицы. Как вы можете видеть, я действительно вложил в этот плагин много любви и заботы, чтобы сделать его эстетически приятным и восхитительным.
Создание цветовых стилей
Мы хотели, чтобы наши мобильные приложения сразу поддерживали темную тему. Это означало, что для учета вариантов темной темы нужно было расширить цветовую систему Primer. Следующий плагин взял оригинальный набор стилей Primer и расширил их до «набора цветов спектра» мобильных устройств, содержащего варианты темной темы.
Для каждого специфичного для мобильной палитры цвета, плагин генерирует цветовые стили в документе Figma.
Функциональные цветовые стили
Я не рекомендую использовать в дизайне интерфейса такие цвета, как gray-600. Цвета интерфейса должны находиться во втором слое абстракции, который мы называем «функциональными цветами».
Например, мы могли бы создать функциональный цвет с именем textTertiary, который инкапсулирует цвет gray-600. Функциональный цвет для учета вариантов темы может инкапсулировать несколько стилей цвета. Таким образом, вы можете использовать textTertiary / light mode и textTertiary / dark mode.
Получив несколько десятков функциональных цветов из базового набора в несколько сотен основных цветов, я неожиданно столкнулся со множеством цветовых стилей в моем документе. Поэтому следующий плагин пропускал цвета через конвейер, который гарантировал, что мои функциональные цвета всегда были получены из палитры спектра.
Получившийся цветовой конвейер выглядел так:
Экспорт цветов
Нам нужен был способ получить все наши цветовые стили из Figma и преобразовать их в xcassets и XML-стили для iOS и Android. Копирование сотен значений казалось утомительным, и это еще мягко сказано.
Следующий плагин захватил все образцы цвета со страницы Colors и сгенерировал массив цветовых объектов, каждый из которых содержал полезные метаданные, такие как тема (светлая или темная, высококонтрастная или с нормальным контрастом), шестнадцатеричные значения и даже расширенные шестнадцатеричные значения с альфа-каналом (для Android).
Затем Эли Перкинс и Элиз Аликс написали кастомные скрипты, которые могли бы использовать этот массив и выдавать файлы цветовых ресурсов для конкретной платформы.
Выбор цвета
Встроенный выборщик цвета в стиле Figma не очень хорош. Он не поддерживает поиск, он постоянно сбрасывает позицию прокрутки, а длинные имена стилей усекаются. После создания нескольких сотен стилей слоя я понял, что мне нужен лучший интерфейс.
Следующий плагин преобразовал стили слоя документа в модальное окно с поиском, превью образцов и служебные кнопки, чтобы установить свойства слоя для данного цвета. Например, кнопки «S» и «B» в каждом элементе списка цветов устанавливают цвета обводки (stroke) и фона (background) соответственно. Нажатие в любом месте элемента списка будет заполнено (fill) по умолчанию.
Выбор цвета также учитывает, для какой темы я проектирую: переключатель темной темы вверху окна загружает только варианты цветовых стилей документа для темной темы. Этот быстрый предварительный просмотр значительно облегчил изменение неправильных цветов для темной темы.
Переключатель темной темы
Дизайнеры не должны отдельно проектировать каждый экран для светлой и темной темы. Это проектирование в неправильном слое абстракции: темная и светлая темы являются функциями базовой цветовой системы.
Тем не менее, я захотел проверить правильность высоты, иерархии шрифтов и коэффициенты контрастности в темной теме. Поскольку все мои цветовые стили были названы со структурированной иерархией, например, textPrimary / light / normal contrast, я мог программно менять местами стили слоя в поисках пар. Таким образом, с учетом выделения, у которого был цвет заливки textPrimary / light / normal contrast, я мог проверить, есть ли в моем документе textPrimary / dark / normal contrast. Если он есть, поменяйте местами идентификаторы стилей.
Заполнение данных
Заполнение макетов аватарами, именами пользователей и биографиями утомительно. Я постоянно переключался между браузером и Figma, чтобы получать точные данные. К счастью, Figma связана с Интернетом, поэтому я мог написать небольшую утилиту, которая работала бы с GitHub API и возвращала данные о людях и организациях.
Используя в названии слоев специальный синтаксис, например, __login, я мог указать конкретным слоям использовать поля из ответа API. Я добавил текстовый ввод, который принимал бы кастомные переменные в случае, если мне нужно было получить данные для определенного объекта; в противном случае плагин случайным образом выбирал данные из жестко заданного списка объектов.
Этот плагин был в открытом доступе, как figma-github-data
Моно-плагин
После создания всех этих плагинов стало утомительно запоминать имена команд и постоянно переключаться между несколькими плагинами при проектировании одного экрана.
Решением стало объединение большинства плагинов в один «моно-плагин», который преобразует различные команды в кнопки. Поэтому теперь вместо ввода команды «Convert to dark mode» у меня есть кнопка, на которую я могу нажать, чтобы выполнить действие. Это окно является моим личным дополнением интерфейса Figma. Я могу открыть его один раз за всю рабочую сессию.
Вывод
Эти плагины сэкономили мне часы скучной, повторяющейся работы. Их было весело создавать!
Я рекомендую дизайнерам следить за поведением, которое можно автоматизировать с помощью плагинов. Вот несколько вариантов поведения, которые следует автоматизировать:
- Постоянное переключение между мышью и клавиатурой для выполнения задачи
- Поиск определенных слоев в списке слоев
- Одновременный выбор нескольких одинаковых типов слоев в нескольких фреймах
- Скрытие или отображение слоев для отражения состояния или вариантов
- Скроллинг списков свойств, когда нужно установить множество одинаковых свойств.
- Поиск и применение стилей слоя
- Использование данных из Интернета для заполнения макетов
Дизайнеры должны чувствовать себя комфортно, создавая собственный «персональный API» для решения повседневных проблем дизайна. Если эти проблемы можно обобщить и абстрагировать, имеет смысл поделиться плагином с сообществом.
Но не стоит публиковать все подряд. Не все, что мы создаем должно уйти в релиз.
Демо
Я представил эту статью в феврале на конференции Figma Config. Мои коллеги Jake Miller и Lily Nguyen также продемонстрировали свои впечатляющие плагины, которые используют Atlassian и Uber.
Ресурсы
Вы можете загрузить плагин figma-github-data на GitHub, чтобы посмотреть, как он работает, или разветвить его для своей собственной команды. Документация по API плагинов Figma должна быть вашим основным ресурсом при создании плагинов.
Я также рекомендую исследовать следующие репозитории для получения ресурсов, фреймворков или сэмплов кода:
Перевод статьи brianlovin.com
Топ коментарі (0)