Extracting Styles from a Sketch 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 Sketch 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 Sketch Shared Styles

To extract layout styles along with the Sketch shared color and typography styles, create a page in your Sketch file named “Layout Styles”. The width/height value of square Artboards in this page will be extracted and included in the style dictionary JSON as layout spacing styles. The Artboard names are used to determine the JSON key names and overall structure of the extracted layout styles, with a forward slash (/) used to delineate the start of a new child key in an object. The substring following the final forward slash in the Artboard name is used as the key name with which the layout spacing value is associated. We’ve provided an image of what this looks like below.

Extracting Styles

To create a style dictionary, you load a Sketch design file (.sketch) into the Style Extractor.

Extracting Styles Using the Desktop App

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

Click the Sketch tab. Drag and drop a Sketch file into the Style Extractor window.

If all is well, you’ll see Extraction Complete! and the location of the output JSON file.

By default, output files are written to the same location as your Sketch file. You can change the output location by clicking the gear icon in the top-right corner of the Style Extractor.

The output file has the same name as your Sketch file, but has the .json extension.

Extracting Styles on the Command Line

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

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

Next, run the Style Extractor executable as follows:

./"You.i Style Extractor" -i <input-file> [--output_directory <directory>]

where

• -i, --input <file-path> specifies your Sketch design file
• --output_directory <directory-path> specifies the directory where you want to save the JSON file. By default, output files are written to the same location as your Sketch file.

For example, on macOS, to extract ~/Documents/sketch-files/Style-Guide-Base.sketch:

./"You.i Style Extractor" -i ~/Documents/sketch-files/Style-Guide-Base.sketch

If all is well, you’ll see a message similar to this:

Processing /Users/jsmith/Documents/sketch-files/Style-Guide-Base.sketch
Output written to /Users/jsmith/Documents/sketch-files/Style-Guide-Base.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.

Examples

You can download an example Sketch file (shown in the images below) plus the JSON file generated with the Style Extractor for this Sketch file.

Example Sketch Shared Layout Styles

Example Sketch Shared Color Styles

Example Sketch Shared Typography Styles

Sketch Support Details

If your Sketch file has multiple color, typography, or layout components with the same name and qualifiers, only the first instance will be extracted, and you’ll see a warning message.

Supported Sketch Style Attributes

Here are all of the Sketch Layer Style properties currently supported by the Style Extractor.

Supported Layer Style Properties

The Style Extractor supports the following layer style properties:

• Border Color
• Border Width
• Fill Color, Solid
• Opacity

Supported Text Style Properties

The Style Extractor supports the following text style properties:

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