Using a Style Dictionary

UX designers can use the Figma Style Extractor or the Sketch Style Extractor to extract data from shared styles into a style dictionary JSON file for use in a design system. Developers can then implement design system components for their apps using the color, typography, and layout styles from the style dictionary.

In a You.i React Native app, developers can use the style dictionary through a JSX import of the JSON file. You can reference colors from the style dictionary using JSX dot notation. For example:

import styles from './style-dictionary.json';
const styles = StyleSheet.create({
  container: {
    backgroundColor: styles.brand.primary.color
  }
});

To learn more about JSX stylesheets, see the React Native docs.

Style Extractor Schema

Objects

Below is a table of the objects used in the Style Extractor schema along with their properties, values, and description:

Schema Object	Properties
`ColorRGBA` Represents a color as individual red, green, blue, and alpha values.	a `float` The alpha value, between 0 and 1.
	b `float` The blue value, between 0 and 1.
	g `float` The green value, between 0 and 1.
	r `float` The red value, between 0 and 1.
`Color` A single color style containing the information about the border and fill.	a `float` The alpha value, between 0 and 1.
	borders `Border[]` An array of `Border` objects. Styles in Sketch can have multiple borders. All of the borders will be exported, but only the first one will be usable in the Style Panel. Figma has no concept of border styles, so this array will always be empty for style dictionaries exported from Figma.
	fills `Fill[]` An array of `Fill` objects. Styles in Sketch can have multiple fills. All of the fills will be exported, but only the first one will be usable in the Style Panel.
	guid `string` The unique identifier for this color style.
	opacity `float` The overall opacity of this color style. The alpha value of the fill and border colors in the style should be multiplied by this value. This is done automatically when applying a color style using the Style Panel.
`Border` Defines the properties of the border of a color style.	borderWidth `float` The width of the border in floating point pixels.
	color `string` The hex value representing the color of the border.
	colorRGBA `ColorRGBA` A `ColorRGBA` object representing the color of the border.
`Fill` Defines the properties of the fill of a color style.	color `string` The hex value representing the color of the fill.
`Fill` Defines the properties of the fill of a color style.	colorRGBA `ColorRGBA` The `ColorRGBA` object representing the color of the fill.
`Typography` Defines the color and typography properties of a typography style.	color `string` The hex value representing the color of the typography style.
	colorRGBA `ColorRGBA` The `ColorRGBA` object representing the color of the typography style.
	fontName `string` The postscript name of the font face.
	fontSize `float` The size of the font in pixels.
	guid `string` The unique identifier for this typography style.
	letterSpacing `float` The tracking value for the typography style in pixels.
	lineHeight `float` The leading value for the typography style in pixels.
	opacity `float` The overall opacity of this typography style. The alpha value of the color in the style should me multiplied by this value. This is done automatically when applying a typography style using the Style Panel.
`Layout` Defines the properties of a layout style. A layout style can be used to give any value a name.	guid `string` The unique identifier for this layout style.
	value `float` The layout value.
`Metadata` Contains metadata information about the style dictionary.	description `string` A brief description of the file.
	type `string` The type of style dictionary.
	version `string` The scheme version for this style dictionary.

Styles and Named Groups

Styles are organized under named groups and can be nested multiple levels deep. Groups are created when a style name contains one or more forward slash (“/”) characters like a file path. Each group has the following properties in addition to other groups:

colors
- Contains any number of named Color objects.
typographies
- Contains any number of named Typography objects.
layouts
- Contains any number of named Layout objects.