Skip to content

Latest commit

 

History

History
executable file
·
177 lines (149 loc) · 9.67 KB

README-ru.md

File metadata and controls

executable file
·
177 lines (149 loc) · 9.67 KB
Raw

FigmaGen

Travis CI Version Xcode Swift License

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

Вручную

Важно: в случае такой установки команда генерации должна включать относительный путь к папке с содержимым 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 необходима авторизация, которая реализуется путём передачи персонального токена доступа. Такой токен может быть создан в несколько простых шагов:

  1. Открыть настройки аккаунта в Figma.
  2. Нажать кнопку "Create a new personal access token" в разделе "Personal Access Tokens".
  3. Ввести описание для создаваемого токена (например, "FigmaGen").
  4. Скопировать созданный токен в буфер обмена.
  5. Вставить токен доступа в поле 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

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

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

base:
  accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868
  fileKey: ZvsRf99Ik11qS4PjS6MAFc
textStyles:
  destinationPath: Sources/Generated/TextStyle.swift
  includingNodes:
    - 3:19

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

label.attributedText = "Hello World".styled(.title1, textColor: Colors.black)

Лицензия

FigmaGen доступен для использования под лицензией MIT (см. LICENSE).