Interface Extension

Interface for Zeplin extension. A Zeplin extension is a module which can hook into the code generation logic in Zeplin. Plugins implement all or some subset of the capabilities that Zeplin expects, such as generating code for colors in project's styleguide or for any selected layer in designs.

interface Extension {
    colors(context: Context): CodeObject;
    comment(context: Context, text: string): string;
    component(
        context: Context,
        selectedVersion: Version,
        selectedComponent: Component,
    ): CodeObject;
    exportColors(context: Context): CodeExportObject | CodeExportObject[];
    exportSpacing(context: Context): CodeExportObject | CodeExportObject[];
    exportStyleguideColors(
        context: Context,
        colors?: Color[],
    ): CodeExportObject | CodeExportObject[];
    exportStyleguideTextStyles(
        context: Context,
        textStyles?: TextStyle[],
    ): CodeExportObject | CodeExportObject[];
    exportTextStyles(context: Context): CodeExportObject | CodeExportObject[];
    layer(context: Context, selectedLayer: Layer, version: Version): CodeObject;
    screen(
        context: Context,
        selectedVersion: Version,
        selectedScreen: Screen,
    ): CodeObject;
    spacing(context: Context): CodeObject;
    styleguideColors(context: Context, colors: Color[]): CodeObject;
    styleguideTextStyles(context: Context, textStyles: TextStyle[]): CodeObject;
    textStyles(context: Context): CodeObject;
}

Index

Methods

colors? comment? component? exportColors? exportSpacing? exportStyleguideColors? exportStyleguideTextStyles? exportTextStyles? layer? screen? spacing? styleguideColors? styleguideTextStyles? textStyles?

Methods

`Optional`colors

colors(context: Context): CodeObject
Generate code for the colors in project styleguide or linked styleguide.
Parameters
- context: Context
  Context object
Returns CodeObject
Generated code object for the colors.
- Defined in extension.ts:82

`Optional`comment

comment(context: Context, text: string): string
Generates comment in the extensions target language.
Parameters
- context: Context
  Context object
- text: string
  Text to be commented
Returns string
Input string as a proper comment in the extension's target language.
- Defined in extension.ts:137

`Optional`component

component(
    context: Context,
    selectedVersion: Version,
    selectedComponent: Component,
): CodeObject
This function is called whenever a component is selected. It generates code for the selected component.
Parameters
- context: Context
  Context object
- selectedVersion: Version
  Selected version
- selectedComponent: Component
  Selected component
Returns CodeObject
Generated code object for the selected component.
- Defined in extension.ts:118

`Optional`exportColors

exportColors(context: Context): CodeExportObject | CodeExportObject[]
Generate code export objects for the colors in project styleguide or linked styleguide.
Parameters
- context: Context
  Context object
Returns CodeExportObject | CodeExportObject[]
Array of code export objects
- Defined in extension.ts:165

`Optional`exportSpacing

exportSpacing(context: Context): CodeExportObject | CodeExportObject[]
Generate code export objects for the spacing tokens in project styleguide or linked styleguide.
Parameters
- context: Context
  Context object
Returns CodeExportObject | CodeExportObject[]
Array of code export objects
- Defined in extension.ts:181

`Optional`exportStyleguideColors

exportStyleguideColors(
context: Context,
colors?: Color[],
): CodeExportObject | CodeExportObject[]
Generate code export objects for the colors in the styleguide.
Parameters
- context: Context
  Context object
- Optionalcolors: Color[]
  Array of colors
Returns CodeExportObject | CodeExportObject[]
Array of code export objects

Deprecated
Use Extension.exportColors instead.
- Defined in extension.ts:147

`Optional`exportStyleguideTextStyles

exportStyleguideTextStyles(
context: Context,
textStyles?: TextStyle[],
): CodeExportObject | CodeExportObject[]
Generate code export objects for the fonts in the styleguide.
Parameters
- context: Context
  Context object
- OptionaltextStyles: TextStyle[]
  Array of text styles
Returns CodeExportObject | CodeExportObject[]
Array of code export objects

Deprecated
Use Extension.exportTextStyles instead.
- Defined in extension.ts:157

`Optional`exportTextStyles

exportTextStyles(context: Context): CodeExportObject | CodeExportObject[]
Generate code export objects for the fonts in project styleguide or linked styleguide.
Parameters
- context: Context
  Context object
Returns CodeExportObject | CodeExportObject[]
Array of code export objects
- Defined in extension.ts:173

`Optional`layer

layer(context: Context, selectedLayer: Layer, version: Version): CodeObject
This function is called whenever a layer is selected. It generates code for the selected layer.
Parameters
- context: Context
  Context object
- selectedLayer: Layer
  Selected layer
- version: Version
  Selected layer's last version
Returns CodeObject
Generated code object for the selected layer.
- Defined in extension.ts:108

`Optional`screen

screen(
    context: Context,
    selectedVersion: Version,
    selectedScreen: Screen,
): CodeObject
This function is called whenever a version of a screen is opened. It generates code for the selected version of the screen.
Parameters
- context: Context
  Context object
- selectedVersion: Version
  Selected version
- selectedScreen: Screen
  Selected screen
Returns CodeObject
Generated code object for the selected version of the screen.
- Defined in extension.ts:128

`Optional`spacing

spacing(context: Context): CodeObject
Generate code for the spacing tokens in project styleguide or linked styleguide.
Parameters
- context: Context
  Context object
Returns CodeObject
Generated code object for the spacing tokens.
- Defined in extension.ts:98

`Optional`styleguideColors

styleguideColors(context: Context, colors: Color[]): CodeObject
Generate code for the colors in the styleguide.
Parameters
- context: Context
  Context object
- colors: Color[]
  Array of colors
Returns CodeObject
Generated code object for the colors in the styleguide.

Deprecated
Use Extension.colors instead.
- Defined in extension.ts:64

`Optional`styleguideTextStyles

styleguideTextStyles(context: Context, textStyles: TextStyle[]): CodeObject
Generate code for the text styles in the styleguide.
Parameters
- context: Context
  Context object
- textStyles: TextStyle[]
  Array of text styles
Returns CodeObject
Generated code object for the text styles in the styleguide.

Deprecated
Use Extension.textStyles instead.
- Defined in extension.ts:74

`Optional`textStyles

textStyles(context: Context): CodeObject
Generate code for the text styles in project styleguide or linked styleguide.
Parameters
- context: Context
  Context object
Returns CodeObject
Generated code object for the text styles.
- Defined in extension.ts:90

Interface Extension

Index

Methods

Methods

Optionalcolors

Parameters

Returns CodeObject

Optionalcomment

Parameters

Returns string

Optionalcomponent

Parameters

Returns CodeObject

OptionalexportColors

Parameters

Returns CodeExportObject | CodeExportObject[]

OptionalexportSpacing

Parameters

Returns CodeExportObject | CodeExportObject[]

OptionalexportStyleguideColors

Parameters

Returns CodeExportObject | CodeExportObject[]

Deprecated

OptionalexportStyleguideTextStyles

Parameters

Returns CodeExportObject | CodeExportObject[]

Deprecated

OptionalexportTextStyles

Parameters

Returns CodeExportObject | CodeExportObject[]

Optionallayer

Parameters

Returns CodeObject

Optionalscreen

Parameters

Returns CodeObject

Optionalspacing

Parameters

Returns CodeObject

OptionalstyleguideColors

Parameters

Returns CodeObject

Deprecated

OptionalstyleguideTextStyles

Parameters

Returns CodeObject

Deprecated

OptionaltextStyles

Parameters

Returns CodeObject

Settings

On This Page

`Optional`colors

`Optional`comment

`Optional`component

`Optional`exportColors

`Optional`exportSpacing

`Optional`exportStyleguideColors

`Optional`exportStyleguideTextStyles

`Optional`exportTextStyles

`Optional`layer

`Optional`screen

`Optional`spacing

`Optional`styleguideColors

`Optional`styleguideTextStyles

`Optional`textStyles