PageNode
The page node is always a descendent of the DocumentNode. Most plugins only need to access the current page accessed via figma.currentPage.
Page properties
type: 'PAGE' [readonly]
The type of this node, represented by the string literal "PAGE"
clone(): PageNode
Create a clone of this page, parented under figma.root. Prototyping connections will be copied such that they point to their equivalent in the cloned page. Components will be cloned as instances who master is the original component.
guides: ReadonlyArray<Guide>
The guides on this page.
selection: ReadonlyArray<SceneNode>
The selected nodes on this page. Each page stores its own selection separately. The ordering of nodes in the selection is unspecified, you should not be relying on it.
selectedTextRange: { node: TextNode; start: number; end: number } | null
The current text node being edited, if any, and the text currently being selected within that text node.
flowStartingPoints: ReadonlyArray<{ nodeId: string; name: string }>
The sorted list of flow starting points used when accessing Presentation view.
backgrounds: ReadonlyArray<Paint>
The background color of the canvas (currently only supports a single solid color paint).
prototypeBackgrounds: ReadonlyArray<Paint>
The background color of the prototype (currently only supports a single solid color paint).
prototypeStartNode: FrameNode | GroupNode | ComponentNode | InstanceNode | null [readonly]
The starting point when launching a prototype. Prototypes with a starting node contain all frames reachable from that node. Prototypes without a starting node contain all frames on the current page. Note that prototypes are per-page.
isPageDivider: boolean
Returns true if the node is a page divider, which is only possible when the page node is empty and has a page divider name. A page divider name consists of all asterisks, all en dashes, all em dashes, or all spaces.
loadAsync(): Promise<void>
Loads the contents of the page node.
on(type: 'nodechange', callback: (event: NodeChangeEvent) => void): void
Registers a callback that will be invoked when an event occurs on the page. Current supported events are:
"nodechange": Emitted when a node is added, removed, or updated.
once(type: 'nodechange', callback: (event: NodeChangeEvent) => void): void
Same as on, but the callback will only be called once, the first time the specified event happens.
off(type: 'nodechange', callback: (event: NodeChangeEvent) => void): void
Removes a callback added with on or once.
focusedSlide?: SlideNode | null
This API is only available in Figma Slides
When in single slide view, the Slide that is currently focused is accessible via this property.
Measurement properties
getMeasurements(): Measurement[]
Get all measurements in the current page.
Learn more about measurements in the Help Center.
getMeasurementsForNode(node: SceneNode): Measurement[]
Get all measurements pointing to a node in the current page. This includes all measurements whose start or end node is the node passed in.
addMeasurement(start: { node: SceneNode; side: MeasurementSide }, end: { node: SceneNode; side: MeasurementSide }, options?: { offset: MeasurementOffset; freeText: string }): Measurement
Adds a measurement between two nodes in the current page.
Measurements are always between a start and end node. The side indicates which edge of the node to draw the measurement from.
Measurements can only go on the same axis, i.e. from side "LEFT" -> "LEFT", "LEFT" -> "RIGHT", "TOP" -> "BOTTOM" etc. But not "LEFT" -> "TOP".
See the Measurement type for usage examples.
This method is only available in Dev Mode. You can check the editor type of your plugin to know if the user is in Dev Mode or not:
if (figma.editorType === 'dev') {
// In Figma's Dev Mode
}
editMeasurement(id: string, newValue: { offset: MeasurementOffset; freeText: string }): Measurement
Edit a measurement’s offset.
See the Measurement type for usage examples.
This method is only available in Dev Mode. You can check the editor type of your plugin to know if the user is in Dev Mode or not:
if (figma.editorType === 'dev') {
// In Figma's Dev Mode
}
deleteMeasurement(id: string): void
Delete a measurement.
See the Measurement type for usage examples.
This method is only available in Dev Mode. You can check the editor type of your plugin to know if the user is in Dev Mode or not:
if (figma.editorType === 'dev') {
// In Figma's Dev Mode
}
Base node properties
id: string [readonly]
The unique identifier of a node. For example, 1:3. The node id can be used with methods such as figma.getNodeByIdAsync, but plugins typically don't need to use this since you can usually just access a node directly.
parent: (BaseNode & ChildrenMixin) | null [readonly]
Returns the parent of this node, if any. This property is not meant to be directly edited. To reparent, see appendChild.
name: string
The name of the layer that appears in the layers panel. Calling figma.root.name will return the name, read-only, of the current file.
removed: boolean [readonly]
Returns true if this node has been removed since it was first accessed. If your plugin stays open for a while and stores references to nodes, you should write your code defensively and check that the nodes haven't been removed by the user.
toString(): string
Returns a string representation of the node. For debugging purposes only, do not rely on the exact output of this string in production code.
remove(): void
Removes this node and all of its children from the document.
setRelaunchData(data: { [command: string]: string }): void
Sets state on the node to show a button and description when the node is selected. Clears the button and description when relaunchData is {}.
In Figma and Dev Mode, this shows up in the properties panel. In FigJam, this shows up in the property menu. See here for examples.
getRelaunchData(): { [command: string]: string }
Retreives the reluanch data stored on this node using setRelaunchData
isAsset: boolean [readonly]
Returns true if Figma detects that a node is an asset, otherwise returns false. An asset is is either an icon or a raster image.
This property is useful if you're building a plugin for code generation.
This property uses a set of heuristics to determine if a node is an asset. At a high level an icon is a small vector graphic and an image is a node with an image fill.
getCSSAsync(): Promise<{ [key: string]: string }>
Resolves to a JSON object of CSS properties of the node. This is the same CSS that Figma shows in the inspect panel and is helpful if you are building a plugin for code generation.
getTopLevelFrame(): FrameNode | undefined
Returns the top-most frame that contains this node. If the node is not inside a frame, this will return undefined.
This function will only work in Figma Design and will throw an error if called in FigJam or Slides.
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.
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.
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.
Dev resource properties
getDevResourcesAsync(options?: { includeChildren: boolean }): Promise<DevResourceWithNodeId[]>
Gets all of the dev resources on a node. This includes any inherited dev resources from components and component sets.
addDevResourceAsync(url: string, name?: string): Promise<void>
Adds a dev resource to a node. This will fail if the node already has a dev resource with the same url.
editDevResourceAsync(currentUrl: string, newValue: { name: string; url: string }): Promise<void>
Edits a dev resource on a node. This will fail if the node does not have a dev resource with the same url.
deleteDevResourceAsync(url: string): Promise<void>
Deletes a dev resource on a node. This will fail if the node does not have a dev resource with the same url.
setDevResourcePreviewAsync(url: string, preview: PlainTextElement): Promise<void>
This is a private API only available to Figma partners
Explicit variable modes
explicitVariableModes: { [collectionId: string]: string }
The explicitly set modes for this node.
For SceneNodes, represents a subset of resolvedVariableModes.
Note that this does not include workspace and team-default modes.
clearExplicitVariableModeForCollection(collection: VariableCollection): void
Clears an explicit mode for the given collection on this node
setExplicitVariableModeForCollection(collection: VariableCollection, modeId: string): void
Sets an explicit mode for the given collection on this node
Children-related properties
children: ReadonlyArray<SceneNode> [readonly]
The list of children, sorted back-to-front. That is, the first child in the array is the bottommost layer on the screen, and the last child in the array is the topmost layer.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this property.
appendChild(child: SceneNode): void
Adds a new child to the end of the children array. That is, visually on top of all other children.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this function.
insertChild(index: number, child: SceneNode): void
Adds a new child at the specified index in the children array.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this function.
findChildren(callback?: (node: SceneNode) => boolean): SceneNode[]
Searches the immediate children of this node (i.e. not including the children's children). Returns all nodes for which callback returns true.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this function.
findChild(callback: (node: SceneNode) => boolean): SceneNode | null
Searches the immediate children of this node (i.e. not including the children's children). Returns the first node for which callback returns true.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this function.
findAll(callback?: (node: SceneNode) => boolean): SceneNode[]
Searches this entire subtree (this node's children, its children's children, etc). Returns all nodes for which callback returns true.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this function.
findOne(callback: (node: SceneNode) => boolean): SceneNode | null
Searches this entire subtree (this node's children, its children's children, etc). Returns the first node for which callback returns true.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this function.
findAllWithCriteria<T extends NodeType[]>(criteria: FindAllCriteria<T>): Array<{ type: T[number] } & SceneNode>
Searches this entire subtree (this node's children, its children's children, etc). Returns all nodes that satisfy all of specified criteria.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this function.
findWidgetNodesByWidgetId(widgetId: string): Array<WidgetNode>
Searches this entire subtree (this node's children, its children's children, etc). Returns all widget nodes that match the provided widgetId.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this function.
Export-related properties
exportSettings: ReadonlyArray<ExportSettings>
List of export settings stored on the node. For help on how to change this value, see Editing Properties.
exportAsync(settings?: ExportSettings): Promise<Uint8Array>
exportAsync(settings: ExportSettingsSVGString): Promise<string>
exportAsync(settings: ExportSettingsREST): Promise<Object>
Exports the node as an encoded image.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this function.