FigmaExport

Figma's Color Variables can be used as an alternative to Color Styles. To use them, you must switch from the colors key to the variablesColors key in your figma-export.yaml configuration.

Key Features:

• Nesting: Supports any depth of variable nesting (e.g., a variable pointing to another variable).
• Modes: You can specify the primitivesModeName parameter to indicate which variable column represents your primitives.

Warning: The Figma API for color variables is in Beta and subject to change.

When running figma-export colors, you can manage theme variations (Dark Mode, High Contrast) using either multiple files or a single file with suffixes.

Multiple Files (Default)

Provide separate Figma files for each theme (e.g., one for light, one for dark).

Single File Mode

Enable the useSingleFile configuration option in figma-export.yaml. You must then use configurable suffixes in your style names:

• Dark Mode: Append _dark (or your custom suffix).
• High Contrast (Light): Append _lightHC (or your custom suffix).
• High Contrast (Dark): Append _darkHC (or your custom suffix).

Note: Names of dark/high-contrast colors must match the names of the light colors they correspond to. If a color exists in the light palette but not in the dark palette, it is treated as a universal color.

FigmaExport supports the following asset types:

• Colors: Exports Figma color styles to Xcode Assets or Android XML, including support for Light/Dark modes and High Contrast colors.
• Typography: Exports text styles to iOS (Swift extensions for UIFont, LabelStyle, and Label classes) and Android (XML and Jetpack Compose TextStyle).
• Icons: Exports Figma components as vector images (PDF/SVG for iOS, XML for Android) with appropriate render modes.
• Images: Exports Figma components as raster images (PNG/WebP) for both platforms.

Note: Exporting icons and images requires a Figma Professional or Organization plan because the utility utilizes Shareable team libraries.

FigmaExport uses Stencil to generate code. You can override default templates by specifying a directory in your configuration file.

iOS Customization

Set ios.templatesPath in your config. Required template names:

• UIKit Colors: UIColor+extension.swift.stencil
• SwiftUI Colors: Color+extension.swift.stencil
• UIKit Images: UIImage+extension.swift.stencil
• SwiftUI Images: Image+extension.swift.stencil
• Typography: Label.swift.stencil, LabelStyle.swift.stencil, LabelStyle+extension.swift.stencil, UIFont+extension.swift.stencil, Font.swift.stencil

Android Customization

Set android.templatesPath in your config. Required template names:

• colors.xml.stencil
• Colors.kt.stencil
• Icons.kt.stencil
• typography.xml.stencil
• Typography.kt.stencil

To specify image variants for specific iOS devices (e.g., iPhone, iPad, Mac), add a ~ followed by the idiom name as a postfix to the component/asset name in Figma.

Example: my_image~ipad

FigmaExport uses a figma-export.yaml file to store all configuration properties for figma, ios, and android exports.

To use a specific configuration file, use the -i or --input argument when running the executable. If the figma-export.yaml file is located in the same directory as the figma-export executable, you can omit this option.

# Using a default config file in the same directory
./figma-export colors

# Specifying a custom config file
./figma-export -i /path/to/custom-config.yaml colors

To integrate FigmaExport into an iOS workflow using CocoaPods and Fastlane:

1. Add the pod to your Podfile:

   pod 'FigmaExport'

2. Run pod install to download the binaries to Pods/FigmaExport/Release/.
3. In your Fastfile, you can invoke the binary using a shell command. Ensure you place a figma-export.yaml configuration file at the root of your project.

Example Fastlane lane:

lane :sync_colors do
  Dir.chdir("../") do
    sh "Pods/FigmaExport/Release/figma-export colors ."
  end
end

Before installing or running FigmaExport, you must provide a Figma personal access token via the FIGMA_PERSONAL_TOKEN environment variable. This token is required to access the Figma API.

To set it in your terminal:

export FIGMA_PERSONAL_TOKEN=value

If you are using Fastlane, add the token to your fastlane/.env file:

FIGMA_PERSONAL_TOKEN=value

Before installing fastlane, ensure you have the latest version of the Xcode command line tools installed. You can install fastlane using either RubyGems or Homebrew.

xcode-select --install

# Using RubyGems
[sudo] gem install fastlane -NV

# OR using Homebrew
brew install fastlane

To export typography for Android:

1. Place font files under the res directory of your module.
2. Run figma-export typography.
3. Create a top-level style in XML to act as a parent for generated styles:

<style name="FigmaExport.TextAppearance" parent="Widget.AppCompat">
</style>