Skip to main content

TextStyle

TextStyle​

type: 'TEXT'

The string literal "TEXT" representing the style type. Always check the type before reading other properties.

fontSize: number

Value to replace the text fontSize with.

textDecoration: TextDecoration

Value to replace the text textDecoration with.

fontName: FontName

Value to replace the text fontName with.

letterSpacing: LetterSpacing

Value to replace the text letterSpacing with.

lineHeight: LineHeight

Value to replace the text lineHeight with.

leadingTrim: LeadingTrim

Value to replace the text leadingTrim with.

paragraphIndent: number

Value to replace the text paragraphIndent with.

paragraphSpacing: number

Value to replace the text paragraphSpacing with.

listSpacing: number

Value to replace the text listSpacing with.

hangingPunctuation: boolean

Value to replace the text hangingPunctuation with.

hangingList: boolean

Value to replace the text hangingList with.

textCase: TextCase

Value to replace the text textCase with.

boundVariables?: { [field in VariableBindableTextField]?: VariableAlias}

The variables bound to a particular field on this text style.

setBoundVariable(field: VariableBindableTextField, variable: Variable | null): void

Binds the provided field on this node to the given variable. Please see the Working with Variables guide for how to get and set variable bindings.

If null is provided as the variable, the given field will be unbound from any variables.

View more →

Base style properties​

id: string [readonly]

The unique identifier of the style in the document the plugin is executing from. You can assign this value via setFillStyleIdAsync, setStrokeStyleIdAsync, setTextStyleIdAsync, etc. to make the node properties reflect that of the style node.

getStyleConsumersAsync(): Promise<StyleConsumers[]>

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 setFillStyleIdAsync or setStrokeStyleIdAsync).

consumers: StyleConsumers[] [readonly]

DEPRECATED: Use getStyleConsumersAsync instead. Accessing this property will throw an exception if the plugin manifest contains "documentAccess": "dynamic-page".

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 setFillStyleIdAsync or setStrokeStyleIdAsync).

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. The total size of your entry (pluginId, key, value) cannot exceed 100 kB.

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. The total size of your entry (namespace, key, value) cannot exceed 100 kB.

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 plain-text annotation entered by the user for this style/component.

View more →

descriptionMarkdown: string

The rich-text 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('/')
}