Zeplin JSS Extension

Generates JSS JavaScript snippets from colors, text styles and layers.

Sample colors output:

colors: {
  red: '#ff0000',
  green: '#00ff00',
  blue: '#0000ff',
  yellow: '#ffff00',
  black: '#000000',
  black50: 'rgba(0, 0, 0, 0.5)',
  white: '#ffffff'
},

Sample text style output:

textStyles: {
  sampleTextStyle: {
    fontFamily: 'SFProText',
    fontSize: 20,
    fontWeight: 'normal',
    fontStyle: 'normal',
    letterSpacing: 0,
    textAlign: 'left'
  },
  sampleTextStyleWithColor: {
    fontFamily: 'SFProText',
    fontSize: 20,
    fontWeight: 'normal',
    fontStyle: 'normal',
    letterSpacing: 0,
    textAlign: 'left',
    color: colors.red
  },
},

Sample layer output:

background: {
  width: 197,
  height: 34,
  borderRadius: 40,
  border: ['solid', 1, '#63a0e6']
},

Options

Color format

Supports HEX, RGB or HSL. Sample colors output as HSL:

colors: {
  red: 'hsl(0, 100%, 50%)',
  black50: 'hsla(0, 0%, 0%, 0.5)'
},

Dimensions

Toggles generating width and height properties from layers.

Default values

Toggles always generating default values from layers or text styles, such as fontWeight and fontStyle.

Development

JSS extension is developed using zem, Zeplin Extension Manager. zem is a command line tool that lets you quickly create and test extensions.

To learn more about zem, see documentation.