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.
We also support extracting style dictionaries from Sketch files.
The Style Extractor app is installed with You.i Platform. Once you’ve installed You.i Platform, you can use the Style Extractor.
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.
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.
Launch the Style Extractor using the executable in
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.
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.
In the Figma tab of the Style Extractor, enter the absolute URL to a Figma file in the text field and click Extract.
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.
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>
-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
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.
Here are all of the Figma file property types currently supported by the Style Extractor.
The Style Extractor supports the following layer style properties:
Fill Color, Solid
Stroke Color, Solid
The Style Extractor supports the following text style properties:
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