Skip to main content

TextNode

The text node represents text where both the whole node or individual character ranges can have properties such as color (fills), font size, font name, etc.

When working with text nodes, there are a lot of things to consider, including mixed styles, loading fonts, and missing fonts. Please refer to the Working with Text page for more information.

Text node properties

type: 'TEXT' [readonly]

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


clone(): TextNode

Duplicates the text node. By default, the duplicate will be parented under figma.currentPage.


hasMissingFont: boolean [readonly]

Returns whether the text uses a font currently not available to the document.


textAlignHorizontal: 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFIED'

The horizontal alignment of the text with respect to the textbox. Setting this property requires the font the be loaded.


textAlignVertical: 'TOP' | 'CENTER' | 'BOTTOM'

The vertical alignment of the text with respect to the textbox. Setting this property requires the font the be loaded.


textAutoResize: 'NONE' | 'WIDTH_AND_HEIGHT' | 'HEIGHT' | 'TRUNCATE'

The behavior of how the size of the text box adjusts to fit the characters. Setting this property requires the font the be loaded.

View more →

paragraphIndent: number

The indentation of paragraphs (offset of the first line from the left). Setting this property requires the font the be loaded.


paragraphSpacing: number

The vertical distance between paragraphs. Setting this property requires the font to be loaded.


listSpacing: number

The vertical distance between lines of a list.


hangingPunctuation: boolean

Whether punctuation, like quotation marks, hangs outside the text box.


hangingList: boolean

Whether numbered list counters or unordered list bullets hang outside the text box.


autoRename: boolean

Whether updating the characters in the text node should update the name of the node. If this is set to true, name will be auto-derived from characters.

View more →

Text content

characters: string

The raw characters in the text node. Setting this property requires the font the be loaded.

View more →

insertCharacters(start: number, characters: string, useStyle?: 'BEFORE' | 'AFTER'): void

Insert characters at index start in the text.

View more →

deleteCharacters(start: number, end: number): void

Remove characters in the text from start (inclusive) to end (exclusive).

View more →

Text and text range properties

These properties can be applied to the whole text node, or parts of the text on specific character ranges.

fontSize: number | figma.mixed

The size of the font. Has minimum value of 1.


fontName: FontName | figma.mixed

The font family (e.g. "Inter"), and font style (e.g. "Regular"). Setting this property to a different value requires the new font to be loaded.


fontWeight: number | figma.mixed [readonly]

The weight of the font (e.g. 400 for "Regular", 700 for "Bold").


textCase: TextCase | figma.mixed

Overrides the case of the raw characters in the text node. Requires the font to be loaded.


textDecoration: TextDecoration | figma.mixed

Whether the text is underlined or has a strikethrough. Requires the font to be loaded.


letterSpacing: LetterSpacing | figma.mixed

The spacing between the individual characters. Requires the font to be loaded.


lineHeight: LineHeight | figma.mixed

The spacing between the lines in a paragraph of text. Requires the font to be loaded.


leadingTrim: LeadingTrim | figma.mixed

The removal of the vertical space above and below text glyphs. Requires the font to be loaded.


textStyleId: string | figma.mixed

The id of the TextStyle object that the text properties of this node are linked to. Requires the font to be loaded.


A HyperlinkTarget if the text node has exactly one hyperlink, or null if the node has none.


Text range functions

These functions allow you to get and set text properties on parts of the text.

getStyledTextSegments<StyledTextSegmentFields extends (keyof Omit< StyledTextSegment, 'characters' | 'start' | 'end' >)[]>(fields: StyledTextSegmentFields, start?: number, end?: number): Array<Pick<StyledTextSegment, StyledTextSegmentFields[number] | 'characters' | 'start' | 'end'>>

Get text segments along with the desired text properties (font size, text case, etc...)

View more →

getRangeFontSize(start: number, end: number): number | figma.mixed

Get the fontSize from characters in range start (inclusive) to end (exclusive).


setRangeFontSize(start: number, end: number, value: number): void

Set the fontSize from characters in range start (inclusive) to end (exclusive). Requires the font to be loaded.


getRangeFontName(start: number, end: number): FontName | figma.mixed

Get the fontName from characters in range start (inclusive) to end (exclusive).


setRangeFontName(start: number, end: number, value: FontName): void

Set the fontName from characters in range start (inclusive) to end (exclusive). Requires the new font to be loaded.


getRangeAllFontNames(start: number, end: number): FontName[]

Get the fontNames from characters in range start (inclusive) to end (exclusive).


getRangeFontWeight(start: number, end: number): number | figma.mixed

Get the fontWeight from characters in range start (inclusive) to end (exclusive).


getRangeTextCase(start: number, end: number): TextCase | figma.mixed

Get the textCase from characters in range start (inclusive) to end (exclusive).


setRangeTextCase(start: number, end: number, value: TextCase): void

Set the textCase from characters in range start (inclusive) to end (exclusive). Requires the font to be loaded.


getRangeTextDecoration(start: number, end: number): TextDecoration | figma.mixed

Get the textDecoration from characters in range start (inclusive) to end (exclusive).


setRangeTextDecoration(start: number, end: number, value: TextDecoration): void

Set the textDecoration from characters in range start (inclusive) to end (exclusive). Requires the font to be loaded.


getRangeLetterSpacing(start: number, end: number): LetterSpacing | figma.mixed

Get the letterSpacing from characters in range start (inclusive) to end (exclusive).


setRangeLetterSpacing(start: number, end: number, value: LetterSpacing): void

Set the letterSpacing from characters in range start (inclusive) to end (exclusive). Requires the font to be loaded.


getRangeLineHeight(start: number, end: number): LineHeight | figma.mixed

Get the lineHeight from characters in range start (inclusive) to end (exclusive).


setRangeLineHeight(start: number, end: number, value: LineHeight): void

Set the lineHeight from characters in range start (inclusive) to end (exclusive). Requires the font to be loaded.


Get the hyperlink from characters in range start (inclusive) to end (exclusive). Returns a HyperlinkTarget if the range contains exactly one hyperlink, or null if the range contains none.


Set the hyperlink from characters in range start (inclusive) to end (exclusive). Removes the hyperlink in range if value is null.


getRangeFills(start: number, end: number): Paint[] | figma.mixed

Get the fills from characters in range start (inclusive) to end (exclusive).


setRangeFills(start: number, end: number, value: Paint[]): void

Set the fills from characters in range start (inclusive) to end (exclusive). Requires font to be loaded.


getRangeTextStyleId(start: number, end: number): string | figma.mixed

Get the textStyleId from characters in range start (inclusive) to end (exclusive).


setRangeTextStyleId(start: number, end: number, value: string): void

Set the textStyleId from characters in range start (inclusive) to end (exclusive). Requires the font to be loaded.


getRangeFillStyleId(start: number, end: number): string | figma.mixed

Get the fillStyleId from characters in range start (inclusive) to end (exclusive).


setRangeFillStyleId(start: number, end: number, value: string): void

Set the fillStyleId from characters in range start (inclusive) to end (exclusive). Requires the font to be loaded.


getRangeListOptions(start: number, end: number): TextListOptions | figma.mixed

Get the textListOptions from characters in range start (inclusive) to end (exclusive). Returns a TextListOptions


setRangeListOptions(start: number, end: number, value: TextListOptions): void

Set the textListOptions from characters in range start (inclusive) to end (exclusive).


getRangeIndentation(start: number, end: number): number | figma.mixed

Get the indentation from characters in range start (inclusive) to end (exclusive).


setRangeIndentation(start: number, end: number, value: number): void

Set the indentation from characters in range start (inclusive) to end (exclusive).


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.

View 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.

View more →

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.

View 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.

View 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.

View more →

remove(): void

Removes this node and all of its children from the document.

View more →

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 {}.

info

In Figma, this shows up in the properties panel. In FigJam, this shows up in the property menu. See here for examples.

View more →

getRelaunchData(): { [command: string]: string }

Retreives the reluanch data stored on this node using setRelaunchData


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.


Scene node properties

visible: boolean

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

View 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.

View more →

stuckNodes: SceneNode[] [readonly]

An array of nodes that are "stuck" to this node. In FigJam, stamps, highlights, and some widgets can "stick" to other nodes if they are dragged on top of another node.

View more →

attachedConnectors: ConnectorNode[] [readonly]

An array of ConnectorNodes that are attached to a node.


componentPropertyReferences: { [nodeProperty in 'visible' | 'characters' | 'mainComponent']?: string } | null

All component properties that are attached on this node. A node can only have componentPropertyReferences if it is a component sublayer or an instance sublayer. It will be null otherwise. The value in the key-value pair refers to the component property name as returned by componentPropertyDefinitions on the containing component, component set or main component (for instances).


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. In addition to the blend modes that paints & effects support, the layer blend mode can also have the value PASS_THROUGH.


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.


fills: ReadonlyArray<Paint> | figma.mixed

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

View more →

fillStyleId: string | figma.mixed

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

View 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.


strokeStyleId: string

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


strokeWeight: number | figma.mixed

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

caution

For rectangle nodes or frame-like nodes using different individual stroke weights, this property will return figma.mixed.

info

For rectangle nodes or frame-like nodes, individual stroke weights can be set for each side using the following properties:


strokeJoin: StrokeJoin | figma.mixed

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

View more →

strokeAlign: 'CENTER' | 'INSIDE' | 'OUTSIDE'

The alignment of the stroke with respect to the boundaries of the shape.

View more →

dashPattern: ReadonlyArray<number>

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


strokeGeometry: VectorPaths

An array of paths representing the object strokes relative to the node. StrokeGeometry is always from the center regardless of the nodes strokeAlign.


strokeCap: StrokeCap | figma.mixed

The decoration applied to vertices which have only one connected segment.

View more →

strokeMiterLimit: number

The miter limit on the stroke. This is the same as the SVG miter limit.


outlineStroke(): VectorNode | null

This method performs an action similar to using the "Outline Stroke" function in the editor from the right-click menu. However, this method creates and returns a new node while leaving the original intact. Returns null if the node has no strokes.


fillGeometry: VectorPaths

An array of paths representing the object fills relative to the node.


x: number

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

View more →

y: number

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

View 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.


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.

View more →

absoluteTransform: Transform [readonly]

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


absoluteBoundingBox: Rect | null [readonly]

The bounds of the node that does not include rendered properties like drop shadows or strokes. The x and y inside this property represent the absolute position of the node on the page.


absoluteRenderBounds: Rect | null [readonly]

The actual bounds of a node accounting for drop shadows, thick strokes, and anything else that may fall outside the node's regular bounding box defined in x, y, width, and height. The x and y inside this property represent the absolute position of the node on the page. This value will be null if the node is invisible.


constrainProportions: boolean

When toggled, causes the layer to keep its proportions when the user resizes it via the properties panel.


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.

View more →

layoutAlign: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'INHERIT'

Applicable only on direct children of auto-layout frames, ignored otherwise. Determines if the layer should stretch along the parent’s counter axis. Defaults to “INHERIT”.

View more →

layoutGrow: number

This property is applicable only for direct children of auto-layout frames, ignored otherwise. Determines whether a layer should stretch along the parent’s primary axis. 0 corresponds to a fixed size and 1 corresponds to stretch.

View more →

layoutPositioning: 'AUTO' | 'ABSOLUTE'

This property is applicable only for direct children of auto-layout frames. Determines whether a layer's size and position should be dermined by auto-layout settings or manually adjustable.

View 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.

View 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).

View more →

rescale(scale: number): void

Rescales the node. This API function is the equivalent of using the Scale Tool from the toolbar.

View more →

constraints: Constraints

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

View more →

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>

Exports the node as an encoded image.

View more →

reactions: ReadonlyArray<Reaction>

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. For help on how to change this value, see Editing Properties.

View more →