Выбор в пользу автоматизации

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

Хотя редактор Cocos Creator может служить быстрым способом создания макетов на стороне дизайна, если бы мы хотели использовать его таким образом, ему не хватает надежности создания графики, пользовательских форм и возможностей совместной работы в реальном времени, оптимальных для быстрая итерация и согласование UX-дизайна, которые предоставляет Figma. Чтобы действительно интегрировать рабочий процесс между продуктом и разработкой, нам нужен был способ легко переводить окончательные концепции в данные пользовательского интерфейса, которые наш текущий движок может понять, без утомительного воссоздания, необходимого с инженерной стороны. Как ни удивительно, Figma предоставляет интуитивно понятный RESTful API для доступа к данным вашего документа из любого места, так что у вас есть все необходимое для создания конвейера пользовательского интерфейса от дизайна к движку.

Получение макетов пользовательского интерфейса в виде данных

Конечные точки получателя Figma различаются по специфике от получения целых списков файлов по проекту до определенных узлов или данных стиля в данном файле, поэтому не стесняйтесь просматривать доступные конечные точки в документации. Мы скоро вернемся к некоторым из них.

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

  1. Токен доступа, привязанный к вашей учетной записи Figma. Обратите внимание, что вы также можете сгенерировать токен OAuth2, если предпочитаете использовать для своего инструмента аутентификацию на уровне приложения.

2. Идентификатор файла для данных файла, который вы хотите извлечь. Его можно легко определить по URL-адресу файла (см. Ниже).

Когда у вас будет такая информация, вам просто понадобится способ отправить запрос. cURL работает, но если вы хотите, чтобы при изучении API вам было проще искать и украшать ответы, я бы порекомендовал Postman.

Для этого примера давайте воспользуемся модным форматированием кода Medium и воспользуемся cURL:

curl -X GET -H 'X-Figma-Token: <YOUR_ACCESS_TOKEN> 'https://api.figma.com/v1/files/<YOUR_FILE_ID>'

Если все прошло по плану, вы должны были получить в ответ дерево документов в формате JSON, как показано слева ниже:

Для этого конкретного запроса полученные данные дадут вам около 80% возможности получить все необходимое для воссоздания рукотворной работы вашего UX-дизайнера в различных форматах. Полученные данные предоставляют исчерпывающие описания всего вашего документа, такие как (но не ограничиваясь):

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

Следовательно, вы можете легко перенести эту структуру в HTML, файл макета для конкретного движка, такой как префабы Cocos Creator, которые я использовал, или другую форму предварительно обработанных данных макета JSON, которая соответствует потребностям вашего приложения.

Управление активами

Итак, чего не хватает? Что ж, давайте подробнее рассмотрим результаты. Если мы посмотрим на любой из наших слоев, содержащих графику, вы обычно увидите один из двух типов источников:

  1. Растровое изображение, предоставленное пользователем; что-то, что было загружено в документ Figma для использования в качестве заливки слоя.
  2. Пользовательский векторный объект. Это то, что создается в приложении с помощью инструментов для создания графики Figma.

Для заливки растрового изображения предоставленные данные включают поле imageRef, но, похоже, не сопоставляются с чем-либо полезным в текущей структуре данных. Чтобы сопоставить этот идентификатор с реальным URL-адресом изображения, нам нужно будет запросить у Figma данные для заполнения изображения, связанные с этим файлом или узлом. В этом примере мы выполняем выборку из конечной точки images для этого файла. Давайте вернем нашу команду запроса:

curl -X GET -H 'X-Figma-Token: <YOUR_ACCESS_TOKEN> 'https://api.figma.com/v1/files/<YOUR_FILE_ID>/images'

Результатом должно быть отображение идентификаторов и URL-адресов корзины. Здесь вы найдете актуальные ссылки на каждый ресурс, прикрепленный к файлу.

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

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

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

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

curl -X GET -H 'X-Figma-Token: <YOUR_ACCESS_TOKEN> 'https://api.figma.com/v1/images/<YOUR_FILE_ID>?ids=<NODE_ID_1>'

Итак, как мы можем определить, требуется ли выравнивание и экспорт слоя? Один из способов сделать это - для UX-дизайнера пометить слой так, как это понимает ваш инструмент. Параметры включают в себя переключение флага «Экспорт» в пользовательском интерфейсе Figma (представленного как логическое значение в возвращаемых данных файла) или предоставление какого-либо соглашения для имени слоя. В нашем случае, поскольку нашему дизайнеру необходимо помечать и вручную экспортировать растры целых фреймов для включения в презентации и собрания продуктов, нам было проще всего отделить наши инструменты от этой функции и вместо этого полагаться на соглашения об именах.

Ловушка: интеграция пользовательских шрифтов

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

...
"characters": "Tap to close",
"style": {
    "fontFamily": "Nunito",
    "fontPostScriptName": "Nunito-ExtraBold",
    "fontWeight": 800,
    "fontSize": 26.0,
    "textAlignHorizontal": "CENTER",
    "textAlignVertical": "CENTER",
    "letterSpacing": 0.0,
    "lineHeightPx": 24.554399490356445,
    "lineHeightPercent": 80.588798522949219,
    "lineHeightPercentFontSize": 94.440002441406250,
    "lineHeightUnit": "FONT_SIZE_%"
},
...

Есть еще программное решение! Если вы получаете свои пользовательские шрифты из Google Fonts, мы можем использовать другой инструмент для их получения: API разработчика Google Fonts. Подобно тому, как вы получаете доступ к Figma API, вам нужно сначала получить ключ API, чтобы делать запросы.

Чтобы получить полный список всех доступных шрифтов, вы можете нажать на конечную точку веб-шрифтов следующим образом:

curl -X GET 'https://www.googleapis.com/webfonts/v1/webfonts?key=<YOUR_API_KEY>'

Обратите внимание, что ваш ключ в этом случае - это параметр GET, переданный конечной точке вместо значения заголовка. Ответ представляет собой большой список всех данных о шрифтах, доступных через Google, со ссылками на ресурсы:

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

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

Дизайн уровней и многое другое…!

Возможности интерфейса между проектированием и проектированием не ограничиваются только макетами пользовательского интерфейса; также могут быть встроены целые 2-мерные уровни с неявными данными!

Вот пример из нашей последней игры, Stickerpets Island, где прогресс острова легко определяется на стороне продукта в Figma. Существует множество творческих способов, которыми ваши реализации рабочего процесса могут использовать предоставленные данные для простого подключения визуальной структуры во всех типах контекстов. Удачного инструмента!