Skip to content

Variable

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.

id

typescript
id: string [readonly]

The unique identifier of this variable.

name

typescript
name: string

The name of this variable.

description

typescript
description: string

Description of this variable.

hiddenFromPublishing

typescript
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).

getPublishStatusAsync

typescript
getPublishStatusAsync(): Promise<PublishStatus>

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

remote

typescript
remote: boolean [readonly]

Whether this variable is remote or local.

variableCollectionId

typescript
variableCollectionId: string [readonly]

The ID of the collection that contains this variable.

key

typescript
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

typescript
resolvedType: VariableResolvedDataType [readonly]

The resolved type of this variable.

resolveForConsumer

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

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

setValueForMode

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

Sets the value of this variable for the provided mode. If the modeId belongs to an extended collection, the value will be overridden on the extension.

valuesByMode

typescript
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

typescript
remove(): void

Removes this variable from the document.

scopes

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

codeSyntax

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

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

setVariableCodeSyntax

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

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

removeVariableCodeSyntax

typescript
removeVariableCodeSyntax(platform: CodeSyntaxPlatform): void

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

Plugin data properties

getPluginData

typescript
getPluginData(key: string): string

Retrieves custom information that was stored on this node or style using setPluginData. If there is no data stored for the provided key, an empty string is returned.

setPluginData

typescript
setPluginData(key: string, value: string): void

Lets you store custom information on any node or style, private to your plugin. The total size of your entry (pluginId, key, value) cannot exceed 100 kB.

getPluginDataKeys

typescript
getPluginDataKeys(): string[]

Retrieves a list of all keys stored on this node or style using using setPluginData. This enables iterating through all data stored privately on a node or style by your plugin.

getSharedPluginData

typescript
getSharedPluginData(namespace: string, key: string): string

Retrieves custom information that was stored on this node or style using setSharedPluginData. If there is no data stored for the provided namespace and key, an empty string is returned.

setSharedPluginData

typescript
setSharedPluginData(namespace: string, key: string, value: string): void

Lets you store custom information on any node or style, public to all plugins. The total size of your entry (namespace, key, value) cannot exceed 100 kB.

getSharedPluginDataKeys

typescript
getSharedPluginDataKeys(namespace: string): string[]

Retrieves a list of all keys stored on this node or style using using setSharedPluginData. This enables iterating through all data stored publicly on a node or style by your plugin.