FigmaExport

Command line utility to export colors, typography, icons and images from Figma to Xcode / Android Studio project.

• color - Figma's color style
• typography - Figma's text style
• icon — Figma's component with small black/colorized vector image
• image — Figma's components with colorized image (Light/Dark)

The utility supports Dark Mode, SwiftUI and Jetpack Compose.

Why we've developed this utility:

• Figma doesn't support exporting colors and images to Xcode / Android Studio. Manual export takes a long time.
• For easy sync of the component library with the code

Articles:

• [habr.com] FigmaExport: как автоматизировать экспорт UI-Kit из Figma в Xcode и Android Studio проекты

Table of Contents:

• Features
• Result
  • iOS
  • Android
• Installation
  • Manual
  • Homebrew
  • CocoaPods + Fastlane
• Usage
  • Android
  • Arguments
  • Configuration
  • Exporting Typography
• Design requirements
  • Colors
  • Icons
  • Images
  • Typography
• Example project
• Contributing
• License
• Feedback
• Authors

Features

• Export light & dark color palette directly to Xcode / Android studio project
• Export icons to Xcode / Android Studio project
• Export images to Xcode / Android Studio project
• Export text styles to Xcode / Android Studio project
• Supports Dark Mode
• Supports High contrast colors for Xcode
• Supports SwiftUI and UIKit
• Supports Objective-C
• Supports RTL

Exporting icons and images works only for Professional/Organisation Figma plan because FigmaExport use Shareable team libraries.

Result

iOS

Colors

When your execute figma-export colors command, figma-export exports colors from Figma directly to your Xcode project to the Assets.xcassets folder.

Figma light	Figma dark	Xcode

Additionally, the following Swift file will be created to use colors from the code.

 import UIKit
 
 extension UIColor {
    static var backgroundSecondaryError: UIColor { return UIColor(named: #function)! }
    static var backgroundSecondarySuccess: UIColor { return UIColor(named: #function)! }
    static var backgroundVideo: UIColor { return UIColor(named: #function)! }
    ...
 }

For SwiftUI the following Swift file will be created to use colors from the code.

 import SwiftUI
 
 extension Color {
    static var backgroundSecondaryError: Color { return Color(#function) }
    static var backgroundSecondarySuccess: Color { return Color(#function) }
    static var backgroundVideo: Color { return Color(#function) }
    ...
 }

If you set option useColorAssets: False in the configuration file, then will be generated code like this:

UIKit:

import UIKit

extension UIColor {
    static var primaryText: UIColor {
        if #available(iOS 13.0, *) {
            return UIColor { traitCollection -> UIColor in
                if traitCollection.userInterfaceStyle == .dark {
                    return UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1.000)
                } else {
                    return UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
                }
            }
        } else {
            return UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
        }
    }
    static var backgroundVideo: UIColor {
        return UIColor(red: 0.467, green: 0.012, blue: 1.000, alpha: 0.500)
    }
}

SwiftUI:

import SwiftUI

public extension ShapeStyle where Self == Color {
    static var primaryText: Color { Color(red: 1.000, green: 1.000, blue: 1.000, opacity: 1.000) }
}

Icons

Icons will be exported as PDF or SVG files with Template Image render mode.

Additionally, the following Swift file will be created to use icons from the code.

import UIKit

extension UIImage {
    static var ic16Notification: UIImage { return UIImage(named: #function)! }
    static var ic24ArrowRight: UIImage { return UIImage(named: #function)! }
    static var ic24Close: UIImage { return UIImage(named: #function)! }
    static var ic24Dots: UIImage { return UIImage(named: #function)! }
    ...
}

For SwiftUI the following Swift file will be created to use images from the code.

import SwiftUI

extension Image {
    static var ic16Notification: Image { return Image(#function) }
    static var ic24Close: Image { return Image(#function) }
    static var ic24DropdownDown: Image { return Image(#function) }
    static var ic24DropdownUp: Image { return Image(#function) }
    ...
}
...
VStack {
  Image.ic24Close
  Image.ic24DropdownDown
}
...

Images

Images will be exported as PNG files the same way.

Additionally, the following Swift file will be created to use images from the code.

import UIKit

extension UIImage {
    static var illZeroEmpty: UIImage { return UIImage(named: #function)! }
    static var illZeroNetworkError: UIImage { return UIImage(named: #function)! }
    static var illZeroServerError: UIImage { return UIImage(named: #function)! }
    ...
}

For SwiftUI a Swift file will be created to use images from the code.

Images with multiple idiom

If name of an image contains idiom at the end (e.g. ~ipad), it will be exported like this:

Typography

When your execute figma-export typography command figma-export generates 3 files:

1. UIFont+extension.swift extension for UIFont that declares your custom fonts. Use these fonts like this UIFont.header(), UIFont.caption1().
2. LabelStyle.swift struct for generating attributes for NSAttributesString with custom lineHeight and tracking (letter spacing).
3. Label.swift file that contains base Label class and class for each text style. E.g. HeaderLabel, BodyLabel, Caption1Label. Specify these classes in xib files on in code.

Example of these files:

• ./Examples/Example/UIComponents/Source/Typography/Label.swift
• ./Examples/Example/UIComponents/Source/Typography/LabelStyle.swift
• ./Examples/Example/UIComponents/Source/Typography/UIFont+extension.swift

Android

Colors will be exported to values/colors.xml and values-night/colors.xml files. For Jetpack Compose, following code will be generated, if configured:

package com.redmadrobot.androidcomposeexample.ui.figmaexport

import ...

object Colors

@Composable
@ReadOnlyComposable
fun Colors.backgroundPrimary(): Color = colorResource(id = R.color.background_primary)

Icons will be exported to drawable directory as vector xml files. For Jetpack Compose, following code will be generated, if configured:

package com.redmadrobot.androidcomposeexample.ui.figmaexport

import ...

object Icons

@Composable
fun Icons.Ic24DropdownDown(
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = Color.Unspecified
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_24_dropdown_down),
        contentDescription = contentDescription,
        modifier = modifier,
        tint = tint
    )
}

Vector images will be exported to drawable and drawable-night directories as vector xml files. Raster images will be exported to drawable-???dpi and drawable-night-???dpi directories as png or webp files.

Typography will be exported to values/typography.xml. For Jetpack Compose, following code will be generated, if configured:

package com.redmadrobot.androidcomposeexample.ui.figmaexport

import ...

object Typography {

    val body = TextStyle(
        fontFamily = FontFamily(Font(R.font.ptsans_regular)),
        fontSize = 16.0.sp,
        letterSpacing = 0.0.sp,
        lineHeight = 24.0.sp,
    )
}

Installation

Before installation you must provide Figma personal access token via environment variables.

export FIGMA_PERSONAL_TOKEN=value

This token gives you access to the Figma API. Generate a personal Access Token through your user profile page or on Figma API documentation website. If you use Fastlane just add the following line to fastlane/.env file

FIGMA_PERSONAL_TOKEN=value

Manual

Download the latest release and read Usage

Homebrew

brew install RedMadRobot/formulae/figma-export

If you want to export raster images in WebP format install cwebp command line utility.

brew install webp

CocoaPods + Fastlane

Add the following line to your Podfile:

pod 'FigmaExport'

This will download the FigmaExport binaries and dependencies in Pods/ during your next pod install execution and will allow you to invoke it via Pods/FigmaExport/Release/figma-export in your Fastfile.

Add the following line to your Fastfile:

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

Don't forget to place figma-export.yaml file at the root of the project directory.

Run fastlane sync_colors to run FigmaExport.

Usage

1. Open Terminal.app

2. Go (cd) to the folder with figma-export binary file

3. Run figma-export

   To export colors use colors argument:

   ./figma-export colors -i figma-export.yaml

   To export icons use icons argument:

   ./figma-export icons -i figma-export.yaml

   To export images use images argument:

   ./figma-export images -i figma-export.yaml

   To export typography use typography argument:

   ./figma-export typography -i figma-export.yaml

Android

In the figma-export.yaml file you must specify the following properties:

• android.mainRes
• android.resourcePackage if you want to generate Jetpack Compose code
• android.mainSrc if you want to generate Jetpack Compose code
• android.icons.output if you want to export icons
• android.images.output if you want to export images

When you execute figma-export icons command, FigmaExport clears the {android.mainRes}/{android.icons.output} directory before exporting all the icons.

When you execute `figma-export images