Open Design

Types

Identification Type aliases

ArtboardId
string

An artboard ID.

ComponentId
string

A component ID.

LayerId
string

A layer ID.

PageId
string

A page ID.

Data Type aliases

LayerOctopusData
components["schemas"]["Layer"]

Layer data (layer octopus)

OctopusDocument
components["schemas"]["OctopusDocument"]

Artboard content (an octopus document)

Layer Lookup Type aliases

DesignLayerSelector
{ artboardId?: ArtboardId | Array<ArtboardId>; bitmapAssetName?: string | Array<string>; fontPostScriptName?: string | Array<string>; id?: LayerId | Array<LayerId>; name?: string | null | Array<(string | null)> | RegExp; text?: string | Array<string> | RegExp; type?: LayerOctopusData["type"] | Array<LayerOctopusData["type"]>; visible?: boolean }

An object used for looking up layers within a design by various properties. Properties can be combined freely.

Keys:

OptionalartboardId?: ArtboardId | Array<ArtboardId>

A single artboard ID or a list of IDs within which to search for layers.

OptionalbitmapAssetName?: string | Array<string>

A single bitmap asset name or a list of bitmap asset names. This can always match multiple layers.

OptionalfontPostScriptName?: string | Array<string>

A single font postscript name or a list of font postscript names. This can always match multiple layers. Only text layers can be matched.

Optionalid?: LayerId | Array<LayerId>

A single layer ID or a list of IDs for matching multiple layers.

Optionalname?: string | null | Array<(string | null)> | RegExp

An exact layer name, a list of exact layer names or a regular expression. This can always match multiple layers.

NOTE: null can be used to match layers without a name (which should not exist but it is theoretically possible from a data type perspective).

Optionaltext?: string | Array<string> | RegExp

An exact text layer content, a list of exact text layer contents or a regular expression. This can always match multiple layers. Only text layers can be matched.

Optionaltype?: LayerOctopusData["type"] | Array<LayerOctopusData["type"]>

A single layer type or a list of layer types. This can always match multiple layers.

See the Octopus Format documentation for the possible values.

Optionalvisible?: boolean

Whether to only match visible or invisible layers.

LayerSelector
{ bitmapAssetName?: string | Array<string>; fontPostScriptName?: string | Array<string>; id?: LayerId | Array<LayerId>; name?: string | null | Array<(string | null)> | RegExp; text?: string | Array<string> | RegExp; type?: LayerOctopusData["type"] | Array<LayerOctopusData["type"]>; visible?: boolean }

An object used for looking up layers within an artboard by various properties. Properties can be combined freely.

Keys:

OptionalbitmapAssetName?: string | Array<string>

A single bitmap asset name or a list of bitmap asset names. This can always match multiple layers.

OptionalfontPostScriptName?: string | Array<string>

A single font postscript name or a list of font postscript names. This can always match multiple layers. Only text layers can be matched.

Optionalid?: LayerId | Array<LayerId>

A single layer ID or a list of IDs for matching multiple layers.

Optionalname?: string | null | Array<(string | null)> | RegExp

An exact layer name, a list of exact layer names or a regular expression. This can always match multiple layers.

NOTE: null can be used to match layers without a name (which should not exist but it is theoretically possible from a data type perspective).

Optionaltext?: string | Array<string> | RegExp

An exact text layer content, a list of exact text layer contents or a regular expression. This can always match multiple layers. Only text layers can be matched.

Optionaltype?: LayerOctopusData["type"] | Array<LayerOctopusData["type"]>

A single layer type or a list of layer types. This can always match multiple layers.

See the Octopus Format documentation for the possible values.

Optionalvisible?: boolean

Whether to only match visible or invisible layers.

Artboard Lookup Type aliases

ArtboardSelector
{ id?: ArtboardId | Array<ArtboardId>; name?: string | Array<string> | RegExp }

An object used for looking up artboards by various properties. Properties can be combined freely.

Keys:

Optionalid?: ArtboardId | Array<ArtboardId>

A single artboard ID or a list of IDs for matching multiple artboards.

Optionalname?: string | Array<string> | RegExp

An exact artboard name, a list of exact artboard names or a regular expression. This can always match multiple artboards.

Other Type aliases

BitmapAssetDescriptor
{ name: string; prerendered: boolean }

Keys:

name: string
prerendered: boolean
BlendingMode
"NORMAL" | "BLEND_DIVIDE" | "BLEND_SUBTRACTION" | "COLOR" | "COLOR_BURN" | "COLOR_DODGE" | "DARKEN" | "DARKER_COLOR" | "DIFFERENCE" | "DISSOLVE" | "EXCLUSION" | "HARD_LIGHT" | "HARD_MIX" | "HUE" | "LIGHTEN" | "LIGHTER_COLOR" | "LIGHTEN_BURN" | "LIGHTEN_DODGE" | "LIGHTEN_LIGHT" | "LUMINOSITY" | "MULTIPLY" | "OVERLAY" | "PASS_THROUGH" | "PIN_LIGHT" | "SATURATION" | "SCREEN" | "SOFT_LIGHT" | "VIVID_LIGHT"
Bounds
{ height: number; left: number; top: number; width: number }

Keys:

height: number
left: number
top: number
width: number
FontDescriptor
{ fontName: string | null; fontPostScriptName: string; fontPostScriptNameSynthetic: boolean; fontTypes: Array<string> }

Keys:

fontName: string | null

A human-readable name of the font.

This value is not always available.

fontPostScriptName: string

The postscript name of the font.

This is the internal font name by which the font file is looked up in the font directory and the system.

fontPostScriptNameSynthetic: boolean

Whether the fontPostScriptName value had to be synthetically created from the font face name and its type name due to the actactual postscript name not being available.

fontTypes: Array<string>

The needed types/weights of the font used.

LayerAttributes
{ blendingMode: BlendingMode; opacity: number; visible: boolean }

Keys:

blendingMode: BlendingMode
opacity: number
visible: boolean
LayerAttributesConfig
{ blendingMode?: BlendingMode; clip?: boolean; includeComponentBackground?: boolean; includeEffects?: boolean; opacity?: number }

Keys:

OptionalblendingMode?: BlendingMode

The blending mode to use for rendering the layer instead of its default blending mode.

Optionalclip?: boolean

Whether to apply clipping by a mask layer if any such mask is set for the layer (see isMasked). Clipping is disabled by default. Setting this flag for layers which do not have a mask layer set has no effect on the results.

OptionalincludeComponentBackground?: boolean

Whether to render the component background from the main/master component. By default, the configuration from the main/master component is used.

OptionalincludeEffects?: boolean

Whether to apply layer effects of the layer. Rendering of effects of nested layers is not affected. By defaults, effects of the layer are applied.

Optionalopacity?: number

The opacity to use for the layer instead of its default opacity.

LayerBounds
{ affectedBounds: Bounds; bounds: Bounds; fullBounds: Bounds; logicalBounds: Bounds; untransformedBounds: Bounds }

Keys:

affectedBounds: Bounds

Area which has to be rerendered when the layer visibility is toggled.

bounds: Bounds

Area in which the complete layer content (without effects) is located.

fullBounds: Bounds

Area in which the complete layer content and its effects are located.

logicalBounds: Bounds

Area of the layer the user would likely consider the actual layer area.

The layer content can overflow outside of these bound just as there can be empty space around the layer content.

untransformedBounds: Bounds

Area in which the layer content would be located had it not been transformed (rotated).

LayerOctopusAttributesConfig
{ blendingMode?: BlendingMode; clip?: boolean; includeEffects?: boolean; opacity?: number }

Keys:

OptionalblendingMode?: BlendingMode

The blending mode to use for rendering the layer instead of its default blending mode.

Optionalclip?: boolean

Whether to apply clipping by a mask layer if any such mask is set for the layer (see isMasked). Clipping is disabled by default. Setting this flag for layers which do not have a mask layer set has no effect on the results.

OptionalincludeEffects?: boolean

Whether to apply layer effects of the layer. Rendering of effects of nested layers is not affected. By defaults, effects of the layer are applied.

Optionalopacity?: number

The opacity to use for the layer instead of its default opacity.

Page Lookup Type aliases

PageSelector
{ id?: PageId | Array<PageId>; name?: string | Array<string> | RegExp }

An object used for looking up pages by various properties. Properties can be combined freely.

Keys:

Optionalid?: PageId | Array<PageId>

A single page ID or a list of IDs for matching multiple pages.

Optionalname?: string | Array<string> | RegExp

An exact page name, a list of exact page names or a regular expression. This can always match multiple pages.

createCancelToken
{ empty: CancelToken; fromSignal: (signal: AbortSignal) => { dispose: () => void; token: CancelToken } }

Creates a cancellation token which can be used for aborting asynchronous operations of the SDK.

Most asynchronous methods accept a cancellation token (the returned token). The same cancellation token can be used for multiple sequential as well as parallel operations. Finished operations no longer react to cancellations.

This mechanism is analogous to the standard AbortSignal/AbortController API with the difference that a cancellation reason can be specified. The created tokens are also somehow compatible with the standard API by exposing the standard AbortSignal as token.signal, just as it is possible to create a CancelToken from an AbortSignal via createCancelToken.fromSignal().

Example:

const controller = createCancelToken()

sdk.fetchDesignById('<ID>', { cancelToken: controller.token })
  .then((design) => {
    doStuffWithDesign(design)
    controller.dispose()
  })
  .catch((err) => {
    if (err.code !== 'OperationCancelled') { throw err }
  })

setTimeout(() => {
  controller.cancel('Timed out.')
}, 2000)

Keys:

A cancellation token which never gets cancelled.

This token can be used for logic simplification in place of actual working tokens as a default (i.e. cancelToken || null to avoid the need for token?.throwIfCancelled()).

fromSignal: (signal: AbortSignal) => { dispose: () => void; token: CancelToken }

Wraps an existing standard AbortSignal in a new cancellation token which can be used with the SDK.