Older versions (leaves this page)

Extracting Styles from a Figma Design File

UX designers can use the Style Extractor to extract data from shared styles into a style dictionary JSON file for use in a design system. Designers can use the style dictionary in React Native or C++ apps through Adobe After Effects, and developers can reference the styles directly in React Native. Whenever the design changes, designers can update the style dictionary with a single command.

We support extracting styles from a Figma design file for use in both React Native apps and C++ apps through After Effects.

The Style Extractor is a combination desktop app and command-line tool that runs on macOS 10.15 (Catalina) and Windows 10.

Installation

The Style Extractor app is installed with You.i Platform. Once you’ve installed You.i Platform, you can use the Style Extractor.

Preparing Your Figma Shared Styles

To extract styles from your Figma file, you must publish the styles you want to extract. If the Style Extractor finds no published styles in a given Figma URL, you will see an error about not finding any published styles.

Extracting Styles

To create a style dictionary, you load a Figma design file URL into the Style Extractor. We will first cover how to do this using the desktop app, but you can skip directly to extracting files using the command line if that fits your workflow better.

Extracting Styles Using the Desktop App

Launch the Style Extractor using the executable in <engine-install>/tools/StyleExtractor.

Style Extractor app

If this is your first time starting the app, click Enter Account Token on the main screen to be taken to the Settings screen. If the app finds a cached user account token, the button will instead read Enter Output Directory - clicking this button will take you to the same Settings screen.

Configure extraction settings

On the Settings screen, you need to specify an output directory and a Figma user account token. The output directory must be re-entered on every app restart, but the user account token value will be auto-filled if you’ve previously entered and saved it.

Style Extractor app
  1. Enter a path in the Output Directory text field, or click Browse to choose a location.
  2. Enter a Figma user account token in the Account Token text field.
  3. Click Apply to save it to disk.
  4. Click the ‘x’ icon to close the Settings screen and return to the main Style Extractor screen.

Extract from a Figma file

In the Figma tab of the Style Extractor, enter the absolute URL to a Figma file in the text field and click Extract.

Style Extractor Figma URL entry

If successful, a new screen appears saying “Extraction Complete!”

Clicking Show File Location opens a file browser to the output directory.

Now that you’ve successfully created a style dictionary, let’s learn about using the style dictionary.

Extracting Styles Using the Command Line

To extract styles from a Figma design file using the command line, first navigate to the directory that contains the “You.i Style Extractor” executable. For example, on macOS:

cd /Users/jsmith/youiengine/6.15.0/tools/StyleExtractor/You.i\ Style\ Extractor.app/Contents/MacOS

Next, run the You.i Style Extractor executable as follows:

./"You.i Style Extractor" -i <URL> -o <DIRECTORY> -t <TOKEN>

where

  • -i, --input <URL> specifies the URL to your Figma design file.
  • -o, --output_directory <DIRECTORY> specifies the directory where you want to save the JSON file.
  • -t, --user_token <TOKEN> specifies the user access token for your Figma account.

For example, on macOS, a complete Figma extraction may look like this:

./"You.i Style Extractor" -i https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File -o . -t 3619-8dc1cff5-d128-44b8-88d9-0a4eadfe6973

This command would save a file named Sample-File.json in the current directory, if no errors were encountered.

Here is an example output of running the You.i Style Extractor CLI on Windows:

cd C:\youiengine\6.15.0\tools\StyleExtractor
"You.i Style Extractor CLI.exe" -i https://www.figma.com/file/lasdkfeoi23jftmCat/Sample-File -o . -t 130040-e7bc8138-9c3b-5112-c3ce-6fk8e9813450
Processing https://www.figma.com/file/lasdkfeoi23jftmCat/Sample-File/
Output written to .\Sample-File.json

Using the Style Dictionary

To use the style dictionary in the full After Effects or hybrid After Effects / JSX app development model, see Applying Styles with the Style Panel.

To use the style dictionary in the pure JSX app development model, see Using a Style Dictionary.

Figma Support Details

Here are all of the Figma file property types currently supported by the Style Extractor.

Supported Layer Style Properties

The Style Extractor supports the following layer style properties:

  • Fill Color, Solid
  • Stroke Color, Solid
  • Opacity

Supported Text Style Properties

The Style Extractor supports the following text style properties:

  • Typeface/Font Family
  • Size
  • Line Height, as Percentage. You.i Platform typically applies universal lineHeight (it’s applied once for all app text through code).
  • Line Height, as Pixels
  • Decoration: Underline