FigmaGen

FigmaGen - a command line tool to generate code for UI styles using Figma components.

It can generate:

• color styles
• text styles

README на русском языке

Navigation

• Installation
  • CocoaPods
  • Homebrew
  • Manually
• Usage
• Configuration
  • Base parameters
  • Figma access token
  • Figma file
  • Generation settings
• Colors
• Text styles
• License

Installation

CocoaPods

To install FigmaGen using CocoaPods add the following line to your Podfile: 

pod 'FigmaGen', '~> 1.0.0'

Then run in Terminal:

$ pod install --repo-update

If FigmaGen installed using CocoaPods then one should use the relative path to Pods/FigmaGen folder while using generate command:

$ Pods/FigmaGen/figmagen generate

Homebrew

To install FigmaGen using Homebrew run:

$ brew install hhru/tap/FigmaGen

Manually

• Go to releases page.
• Download the latest release figmagen-x.y.z.zip
• Unzip the archive

Important: in this case one should use the relative path to the archive content folder while using generate command:

$ MyFolder/figmagen generate

Usage

To generate the code run in Terminal:

$ figmagen generate

The command generates source code files according to the configuration (see Configuration), described in .figmagen.yml file.

One can use another configuration file passing its path in --config parameter:

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

The generated source code can be customised using Stencil-templates. If the standard templates do not fit your needs then use your own one, passing its path in the configuration.

FigmaGen uses Figma API, thus it needs an internet connection.

Configuration

FigmaGen can be configured using a file in YAML format. This file should contain all the required parameters.

The configuration file structured into several sections:

• base: base parameters that being used by all the commands (см. Base parameters).
• colors: color styles generation configuration (см. Color styles).
• textStyles: text styles generation configuration (см. Text styles).

Base parameters

All the generation commands use the following base parameters:

• accessToken: access token needed to perform requests to Figma API (see Figma access token).
• fileKey: identifier of a Figma file that will be used for code generation (see Figma file).

Example:

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

If a base parameter is missing both in base section and in a concrete section (colors or textStyles) then one'll receive an error after running figmagen generate command.

Figma access token

In order to get access to Figma files one have to be authorized via a personal access token. How to obtain a token:

1. Open Figma account settings.
2. Press "Create a new personal access token" in "Personal Access Tokens" section.
3. Input the token description ("FigmaGen", for example).
4. Copy the token to the clipboard.
5. Paste the token to accessToken field in the configuration file

Figma file

FigmaGen requests the Figma file by its identifier, that can be copied from the file URL: This URL has the following format:

https://www.figma.com/file/<identifier>/<name>?node-id=<selected-node-identifier>

Once the file identifier is obtained then insert it to fileKey in the configuration file.

Generation settings

For all the commands one should set the following parameters:

• destinationPath: path to the resulting file.
• templatePath: path to the Stencil-template. If missing then the default template will be used.
• includingNodes: array of node identifiers that should be used for code generation. If missing then all the nodes will be used.
• excludingNodes: array of node identifiers that should be ignored. If missing then all the nodes from includingNodes array will be used.

---

Color styles

Configuration example

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

Usage example:

view.backgroundColor = Colors.carolina

Text styles

Configuration example:

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

Usage example:

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

License

FigmaGen is released under the MIT License. (see LICENSE).