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 →documentationLinks: ReadonlyArray<DocumentationLink>
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('/')
}