InstanceNode

Instances are a copy of a component (see ComponentNode). They will always be automatically updated if a component is modified.

⚠️ Updating an instance when a component changes has the potential to be slow. Try to avoid access patterns that involve alternating component write, instance read, component write, instance read, ...

Instance properties

type: "INSTANCE" [readonly]

The type of this node, represented by the string literal "INSTANCE"

clone(): InstanceNode

Duplicates the instance node. The new instance will have the same master component. By default, the duplicate will be parented under figma.currentPage.

masterComponent: ComponentNode

The component that this instance reflects. This could be a remote, read-only component. This can be set to turn this instance into a different component. On nested instances (instances inside other instances), setting this value clears all overrides and performs nested instance swapping.

Base node properties

id: string [readonly]

An internal identifier for a node. Plugins typically don't need to use this since you can usually just access a node directly. [Read more]

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. [Read more]

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. [Read more]

name: string

The name of the layer that appears in the layers panel. This may update automatically for text layers. [Read more]

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. [Read more]

remove(): void

Removes this node and all of its children from the document. [Read more]

getPluginData(key: string): string

Retrieves custom information that was stored on this node using setPluginData.

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

Lets you store custom information on any node, private to your plugin. [Read more]

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

Retrieves custom information that was stored on this node using setSharedPluginData.

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

Lets you store custom information on any node, public to all plugins. [Read more]

Scene node properties

visible: boolean

Whether the node is visible or not. Does not affect a plugin's ability to access the node. [Read more]

locked: boolean

Whether the node is locked or not, preventing certain user interactions on the canvas such as selecting and dragging. Does not affect a plugin's ability to write to those properties. [Read more]

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. [Read more]

appendChild(child: SceneNode): void

Adds a new child to the end of the children array. That is, visually on top of all other children. [Read more]

insertChild(index: number, child: SceneNode): void

Adds a new child at the specified index in the children array. [Read more]

findAll(callback?: (node: SceneNode) => boolean): ReadonlyArray<SceneNode>

Searches this entire subtree (this node's children, its children's children, etc.). Returns all nodes for which callback returns true. [Read more]

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. [Read more]

Container-related properties

backgrounds: ReadonlyArray<Paint>

Array of Paint objects used as the background of this node. Frames use this property for their appearance rather than the fills property. For help on how to change this value, see Editing Properties.

layoutGrids: ReadonlyArray<LayoutGrid>

Array of LayoutGrid objects used as layout grids on this node. For help on how to change this value, see Editing Properties.

guides: ReadonlyArray<Guide>

Array of Guide used inside the frame. Note that each frame has it's own guides, separate from the canvas-wide guides. For help on how to change this value, see Editing Properties.

clipsContent: boolean

Whether the frame clips its contents. That is, whether layers inside the frame are visible outside the bounds of the frame.

backgroundStyleId: string

The id of the PaintStyle object that the backgrounds property of this node is linked to.

gridStyleId: string

The id of the GridStyle object that the layoutGrids property of this node is linked to.

Geometry-related properties

fills: ReadonlyArray<Paint> | PluginAPI['mixed']

The paints used to fill the area of the shape. For help on how to change this value, see Editing Properties. [Read more]

strokes: ReadonlyArray<Paint>

The paints used to fill the area of the shape's strokes. For help on how to change this value, see Editing Properties.

strokeWeight: number

The thickness of the stroke, in pixels. This value must be non-negative and can be fractional.

strokeAlign: "CENTER" | "INSIDE" | "OUTSIDE"

The alignment of the stroke with respect to the boundaries of the shape. [Read more]

strokeCap: StrokeCap | PluginAPI['mixed']

The decoration applied to vertices which have only one connected segment. [Read more]

strokeJoin: StrokeJoin | PluginAPI['mixed']

The decoration applied to vertices which have two or more connected segments. [Read more]

dashPattern: ReadonlyArray<number>

A list of numbers specifying alternating dash and gap lengths, in pixels.

fillStyleId: string | PluginAPI['mixed']

The id of the PaintStyle object that the fills property of this node is linked to. [Read more]

strokeStyleId: string

The id of the PaintStyle object that the strokes property of this node is linked to.

Corner-related properties

cornerRadius: number | PluginAPI['mixed']

The number of pixels to round the corners of the object by. [Read more]

cornerSmoothing: number

A value that lets you control how "smooth" the corners are. Ranges from 0 to 1. [Read more]

topLeftRadius: number

topRightRadius: number

bottomLeftRadius: number

bottomRightRadius: number

You can set individual corner radius of each of the four corners of a rectangle node or frame-like node. Similar to cornerRadius, these value must be non-negative and can be fractional. If an edge length is less than twice the corner radius, the corner radius for each vertex of the edge will be clamped to half the edge length.

Setting cornerRadius sets the property for all four corners. Setting these corners to different values makes cornerRadius return mixed.

Blend-related properties

opacity: number

Opacity of the node, as shown in the Layer panel. Must be between 0 and 1.

blendMode: BlendMode

Blend mode of this node, as shown in the Layer panel.

isMask: boolean

Whether this node is a mask. A mask node masks its subsequent siblings.

effects: ReadonlyArray<Effect>

Array of effects. See Effect type. For help on how to change this value, see Editing Properties.

effectStyleId: string

The id of the EffectStyle object that the properties of this node are linked to.

Layout-related properties

absoluteTransform: Transform [readonly]

The position of a node relative to its containing page as a Transform matrix.

relativeTransform: Transform

The position of a node relative to its containing parent as a Transform matrix. Not used for scaling, see width and height instead. Read the details page to understand the nuances of this property. [Read more]

x: number

The position of the node. Identical to relativeTransform[0][2]. [Read more]

y: number

The position of the node. Identical to relativeTransform[1][2]. [Read more]

rotation: number

The rotation of the node in degrees. Returns values from -180 to 180. Identical to Math.atan2(-m10, m00) in the relativeTransform matrix. When setting rotation, it will also set m00, m01, m10, m11. [Read more]

width: number [readonly]

The width of the node. Use a resizing method to change this value.

height: number [readonly]

The height of the node. Use a resizing method to change this value.

layoutAlign: "MIN" | "CENTER" | "MAX"

This property is applicable only for direct children of auto-layout frames, ignored otherwise. Determines how the layer is aligned inside an auto-layout frame. [Read more]

resize(width: number, height: number): void

Resizes the node. If the node contains children with constraints, it applies those constraints during resizing. If the parent has auto-layout, causes the parent to be resized. [Read more]

resizeWithoutConstraints(width: number, height: number): void

Resizes the node. Children of the node are never resized, even if those children have constraints. If the parent has auto-layout, causes the parent to be resized (this constraint cannot be ignored). [Read more]

Auto Layout properties

layoutMode: "NONE" | "HORIZONTAL" | "VERTICAL"

Determines whether this layer uses auto-layout to position its children. Defaults to "NONE". [Read more]

counterAxisSizingMode: "FIXED" | "AUTO"

Applicable only on auto-layout frames. Determines whether the counter axis has a fixed length (determined by the user) or an automatic length (determined by the layout engine). [Read more]

horizontalPadding: number

Applicable only on auto-layout frames. Determines the horizontal padding between the borders of the frame and its children.

verticalPadding: number

Applicable only on auto-layout frames. Determines the vertical padding between the borders of the frame and its children.

itemSpacing: number

Applicable only on auto-layout frames. Determines distance between children of the frame.

constraints: Constraints

Constraints of this node relative to its containing FrameNode, if any.

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>

Exports the node as an encoded image. [Read more]

Reaction prototyping-related properties

reactions: ReadonlyArray<Reaction> [readonly]

List of Reactions on this node, which includes both the method of interaction with this node in a prototype, and the behavior of that interaction. Currently, there is always at most one Reaction per node.

Frame prototyping-related properties

overflowDirection: OverflowDirection

Determines whether a frame will scroll in presentation mode when the frame contains content that exceed the frame's bounds. Reflects the value shown in "Overflow Behavior" in the Prototype tab. [Read more]

numberOfFixedChildren: number

Determines which children of the frame are fixed children in a scrolling frame. [Read more]

overlayPositionType: OverlayPositionType [readonly]

How this frame is positioned when opened as an overlay.

overlayBackground: OverlayBackground [readonly]

How this frame obscures the content under it when opened as an overlay.

overlayBackgroundInteraction: OverlayBackgroundInteraction [readonly]

How the user can interact with the content under this frame when opened as an overlay.