FigmaGen

FigmaGen - инструмент командной строки для генерации кода на основе библиотеки компонентов в Figma.

Поддерживает генерацию:

цветовых стилей
текстовых стилей

Установка

CocoaPods

Для установки FigmaGen с помощью менеджера зависимостей CocoaPods добавьте строку в Podfile:

pod 'FigmaGen', '~> 1.0.0'

Затем выполните команду:

$ pod install --repo-update

В случае установки FigmaGen посредством CocoaPods команда генерации должна включать относительный путь к папке Pods/FigmaGen:

$ Pods/FigmaGen/figmagen generate

Homebrew

Для установки FigmaGen средствами менеджера пакетов Homebrew выполните команду:

$ brew install hhru/tap/FigmaGen

Вручную

Откройте страницу релизов репозитория.
Загрузить архив 'figmagen-x.y.z.zip', прикреплённый к последнему релизу.
Распакуйте архив в удобную папку проекта.

Важно: в случае такой установки команда генерации должна включать относительный путь к папке с содержимым ZIP-архива, например:

$ MyFolder/figmagen generate

Использование

Для генерации кода необходимо вызвать команду:

$ figmagen generate

Результатом её выполнения являются файлы исходного кода, согласно конфигурации (см. Конфигурация), которая по умолчанию должна находиться в файле .figmagen.yml.

При желании можно использовать другой путь к конфигурации, передав его в параметре --config, например:

$ figmagen generate --config 'Folder/figmagen.yml'

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

FigmaGen запрашивает данные файлов, используя Figma API, поэтому для генерации кода требуется интернет-соединение.

Конфигурация

Для конфигурации FigmaGen используется файл в формате YAML. В нем должны быть определены все обязательные параметры генерации кода.

Конфигурация делится на несколько разделов:

base: базовые параметры, используемые всеми подкомандами генерации (см. Базовые параметры).
colors: конфигурация подкоманды генерации цветовых стилей (см. Цветовые стили).
textStyles: конфигурация подкоманды генерации текстовых стилей (см. Текстовые стили).

Базовые параметры

Каждая подкоманда генерации использует следующие базовые параметры:

accessToken: строка с токеном доступа, необходимый для выполнения запросов Figma API (см. Токен доступа Figma).
fileKey: идентификатор файла Figma, данные которого будут использованы для генерации кода (см. Файл Figma).

Пример:

base:
  accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868
  fileKey: ZvsRf99Ik11qS4PjS6MAFc
...

Если какой-либо из базовых параметров отсутствует и в разделе подкоманды генерации, и в разделе base, то в результате выполнения команды figmagen generate будет получена соответствующая ошибка.

Токен доступа Figma

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

Открыть настройки аккаунта в Figma.
Нажать кнопку "Create a new personal access token" в разделе "Personal Access Tokens".
Ввести описание для создаваемого токена (например, "FigmaGen").
Скопировать созданный токен в буфер обмена.
Вставить токен доступа в поле accessToken конфигурации

Файл Figma

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

https://www.figma.com/file/<идентификатор>/<название>?node-id=<идентификатор выделенного узла>

Получив идентификатор файла, его необходимо указать в поле fileKey конфигурации.

Настройки генерации

Для каждой подкоманды генерации необходимо определить следующие параметры:

destinationPath: путь для сохранения сгенерированного файла.
templatePath: путь к файлу Stencil-шаблона. Если параметр пропущен, то будет использован стандартный шаблон.
includingNodes: массив строк с идентификаторами узлов, которые должны быть использованы при генерации кода. Если этот параметр пропущен, то будут использованы все узлы файла.
excludingNodes: массив строк с идентификаторами узлов, которые должны быть проигнорированы при генерации кода. Если этот параметр пропущен, то будут использованы все узлы файла, указанные в поле includingNodes.

Цвета

Пример конфигурации:

base:
  accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868
  fileKey: ZvsRf99Ik11qS4PjS6MAFc
colors:
  destinationPath: Sources/Generated/Colors.swift
  includingNodes:
  	- 7:24

Пример использования сгенерированного кода:

view.backgroundColor = Colors.carolina

Текстовые стили