Skip to main content

BaseStyle

Style (common properties)

id: string [readonly]

The unique identifier of the style in the document the plugin is executing from. You can assign this value to fillStyleId, backgroundStyleId, strokeStyleId, textStyleId, etc. to make the node properties reflect that of the style node.

consumers: StyleConsumers[] [readonly]

The consumers of this style. The fields in StyleConsumers refers to the field where the style is applied (e.g. a PaintStyle can be applied in fillStyleId or strokeStyleId).

name: string

The name of the style node. Note that setting this also sets "autoRename" to false on TextNode.

remove(): void

Deletes a local style.

Plugin data properties

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(key: string, value: string): void

Lets you store custom information on any node or style, private to your plugin.

View more →

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(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(namespace: string, key: string, value: string): void

Lets you store custom information on any node or style, public to all plugins.

View more →

getSharedPluginDataKeys(namespace: string): string[]

Retrieves a list of all keys stored on this node or style using setSharedPluginData. This enables iterating through all data stored in a given namespace.

Publishable properties

description: string

The annotation entered by the user for this style/component.

View more →

The documentation links for this style/component.

View more →

remote: boolean [readonly]

Whether this style/component is a remote style/component that doesn't live in the file (i.e. is from the team library). Remote components are read-only: attempts to change their properties will throw.

key: string [readonly]

The key to use with figma.importComponentByKeyAsync, figma.importComponentSetByKeyAsync and figma.importStyleByKeyAsync. Note that while this key is present on local and published components, you can only import components that are already published.

getPublishStatusAsync(): Promise<PublishStatus>

Gets the status of this style/component in the team library.

Folders

Styles can be put inside folders (including nested folders) by setting the name of the style to be a delimited path name. For example, the following code would move a paint style named Style 1 into a nested folder named b. Folder b resides in folder a. 

const style = figma.createPaintStyle() 
style.name = "a/b/Style 1"

Folder names cannot be empty strings and they are unique within the same hierarchy. Since two nested folders can have the same name when residing in different parent folders, we refer to folders by their absolute delimited folder name. The following function getNamePrefix can be used to get the absolute folder name given a style name. 

const getNameParts = (name: string) => {
  const nameParts = name.split('/').filter((part: string) => !!part)
  return nameParts.map((part: string) => part.trim())
}

const getNamePrefix = (name: string): string => {
  const pathParts = getNameParts(name)
  pathParts.pop()
  return pathParts.join('/')
}

On this page