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.
We also support extracting style dictionaries from Figma 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 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.
To create a style dictionary, you load a Sketch design file (
.sketch) into the Style Extractor.
Launch the Style Extractor using the executable in
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
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>]
-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
./"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
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.
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.
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.
Here are all of the Sketch Layer Style properties currently supported by the Style Extractor.
The Style Extractor supports the following layer style properties:
Fill Color, Solid
The Style Extractor supports the following text style properties:
Line Height. You.i Platform typically applies universal
lineHeight(it’s applied once for all app text through code).