Skip to main content


Variable properties

A Variable is a single design token that defines values for each of the modes in its VariableCollection. These values can be applied to various kinds of design properties and prototyping actions, enabling design token functionality and advanced prototyping flows.

Read more about variables in the Guide to variables.

id: string [readonly]

The unique identifier of this variable.

name: string

The name of this variable.

description: string

Description of this variable.

hiddenFromPublishing: boolean

Whether this variable is hidden when publishing the current file as a library. Can only true if remote is false (e.g. this is a local variable).

View more →

getPublishStatusAsync(): Promise<PublishStatus>

Returns the publishing status of this variable in the current file.

remote: boolean [readonly]

Whether this variable is remote or local.

variableCollectionId: string [readonly]

The ID of the collection that contains this variable.

key: string [readonly]

The key to use with importVariableByKeyAsync. Note that while this key is present on local and published variables, you can only import variables that are already published.

resolvedType: VariableResolvedDataType [readonly]

The resolved type of the variable.

resolveForConsumer(consumer: SceneNode): { value: VariableValue; resolvedType: VariableResolvedDataType }

Retrieves the resolved value for this variable if it was bound to consumer.

View more →

setValueForMode(modeId: string, newValue: VariableValue): void

Sets the value of this variable for the provided mode.

valuesByMode: { [modeId: string]: VariableValue } [readonly]

The values for each mode of this variable. Note that this will not resolve any aliases. To return fully resolved values in all cases, consider using resolveForConsumer.

remove(): void

Removes this variable from the document.

scopes: Array<VariableScope>

An array of scopes in the UI where this variable is shown. Setting this property will show/hide this variable in the variable picker UI for different fields.

View more →

codeSyntax: { [platform in CodeSyntaxPlatform]?: string} [readonly]

Code syntax definitions for this variable. Supported platforms are 'WEB', 'ANDROID', and 'iOS'.

setVariableCodeSyntax(platform: CodeSyntaxPlatform, value: string): void

Add or modify a platform definition on codeSyntax. Acceptable platforms are 'WEB', 'ANDROID', and 'iOS'.

View more →

removeVariableCodeSyntax(platform: CodeSyntaxPlatform): void

Remove a platform definition from codeSyntax. Acceptable parameters are 'WEB', 'ANDROID', and 'iOS' if previously defined.