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 RN 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.
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.