### Adding a New Guide to a Page Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/PageNode.md This example demonstrates how to add a new guide to a PageNode. It utilizes the .concat() method to create a new array with the added guide, as the guides property returns a read-only array. ```typescript function addNewGuide(page: PageNode, guide: Guide) { // .concat() creates a new array page.guides = page.guides.concat(guide); } ``` -------------------------------- ### Get and Import Library Variables Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TeamLibraryAPI.md This example demonstrates how to query all published collections from libraries enabled for the current file, select a library variable collection, and then import a specific variable by its key. Ensure libraries with variables are enabled in the UI, as this cannot be done via the API. ```typescript const libraryCollections = await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync(); const variablesInFirstLibrary = await figma.teamLibrary.getVariablesInLibraryCollectionAsync( libraryCollections[0].key ); const variableToImport = variablesInFirstLibrary.find( (libVar) => libVar.resolvedType === "FLOAT" ); const importedVariable = await figma.variables.importVariableByKeyAsync( variableToImport.key ); ``` -------------------------------- ### Changing the transition duration in a prototyping action Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/WashiTapeNode.md This example demonstrates how to access and modify the `reactions` property of a node to change the duration of a prototyping transition. It shows how to get the current reactions, clone them, update a specific transition duration, and then apply the changes asynchronously. ```APIDOC ## Changing the transition duration in a prototyping action ### Description This snippet shows how to modify the `duration` property within a prototyping `transition` object for a node's reaction. It involves accessing the `reactions` array, cloning it, updating the desired duration, and then using `setReactionsAsync` to apply the changes. ### Method `node.setReactionsAsync(newReactions: ReadonlyArray) ` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body `newReactions` (ReadonlyArray) - An array of Reaction objects representing the updated reactions for the node. ### Request Example ```typescript const node = figma.currentPage.selection[0]; const newReactions = clone(node.reactions); newReactions[0].actions[0].transition.duration = 0.5; await node.setReactionsAsync(newReactions); ``` ### Response #### Success Response (200) This method does not return a value upon successful completion, but the node's reactions are updated asynchronously. #### Response Example None ``` -------------------------------- ### guides Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/InstanceNode.md Array of Guide objects used inside the frame. Each frame has its own guides, separate from the canvas-wide guides. ```APIDOC ## guides ### Description Array of [Guide](Guide.md) used inside the frame. Note that each frame has its own guides, separate from the canvas-wide guides. For help on how to change this value, see [Editing Properties](https://www.figma.com/plugin-docs/editing-properties). ### Type readonly [`Guide`](Guide.md)[] ### Inherited from [`DefaultFrameMixin`](DefaultFrameMixin.md).[`guides`](DefaultFrameMixin.md#guides) ``` -------------------------------- ### guides Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/BaseFrameMixin.md Array of Guide used inside the frame. Note that each frame has its own guides, separate from the canvas-wide guides. For help on how to change this value, see Editing Properties. ```APIDOC ## guides ### Description Array of [Guide](Guide.md) used inside the frame. Note that each frame has its own guides, separate from the canvas-wide guides. For help on how to change this value, see [Editing Properties](https://www.figma.com/plugin-docs/editing-properties). ``` -------------------------------- ### start(seconds) Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TimerAPI.md Starts the timer with a specified number of seconds remaining. This method can also adjust the total time if the timer is already running. ```APIDOC ## start(seconds) ### Description Starts the timer with `seconds` seconds remaining. If the timer is not currently started, will start the timer with this total time. If the timer is currently started, will set the remaining time to this value, and increment or decrement the timer's total time based on how much time was added or removed from the remaining time. If the timer was previously paused, will also unpause the timer. ### Method `start` ### Parameters #### seconds - **seconds** (number) - The number of seconds to set for the timer. ### Returns `void` ``` -------------------------------- ### Get Styled Text Segments with Letter Spacing (Partial Range 1) Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/BaseNonResizableTextMixin.md Retrieves styled text segments with letterSpacing for a specific range. This example shows how requesting a range that starts or ends mid-surrogate pair results in raw Unicode code points. ```typescript textNode.getStyledTextSegments(["letterSpacing"], 1, 3) ``` -------------------------------- ### getRangeFontWeight(start, end) Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextNode.md Get the fontWeight from characters in range start (inclusive) to end (exclusive). ```APIDOC ## getRangeFontWeight(start, end) ### Description Get the `fontWeight` from characters in range `start` (inclusive) to `end` (exclusive). ### Parameters #### start `number` #### end `number` ### Returns `number` | _typeof_ [`mixed`](PluginAPI.md#mixed) ### Inherited from [`NonResizableTextMixin`](NonResizableTextMixin.md).[`getRangeFontWeight`](NonResizableTextMixin.md#getrangefontweight) ``` -------------------------------- ### TypeScript for Setting Relaunch Data Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/CodeBlockNode.md Adds relaunch buttons with descriptions or without, and demonstrates how to remove them. Ensure the commands match those defined in the manifest. ```typescript // Add two buttons (ordered by the above array from the manifest): // * an "Edit shape" button with a description of "Edit this trapezoid // with Shaper" that runs the plugin with `figma.command === 'edit'`. // * an "Open Shaper" button with no description that runs the plugin with // `figma.command === 'open'`. node.setRelaunchData({ edit: 'Edit this trapezoid with Shaper', open: '' }) ``` ```typescript // Pass an empty description to show only a button node.setRelaunchData({ relaunch: '' }) ``` ```typescript // Remove the button and description node.setRelaunchData({}) ``` -------------------------------- ### getRangeFontSize(start, end) Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextNode.md Get the fontSize from characters in range start (inclusive) to end (exclusive). ```APIDOC ## getRangeFontSize(start, end) ### Description Get the `fontSize` from characters in range `start` (inclusive) to `end` (exclusive). ### Parameters #### start `number` #### end `number` ### Returns `number` | _typeof_ [`mixed`](PluginAPI.md#mixed) ### Inherited from [`NonResizableTextMixin`](NonResizableTextMixin.md).[`getRangeFontSize`](NonResizableTextMixin.md#getrangefontsize) ``` -------------------------------- ### on() Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/DevResourcesAPI.md Creates an event handler for 'linkpreview', 'auth', or 'open' events. ```APIDOC ## on() ### Description Creates a handler for when the linkpreview, auth, and open events are triggered. ### Method `on(type: "linkpreview" | "auth" | "open", callback: Function): void` ### Parameters #### type - **type** (string) - Required - The type of event to attach the handler to. Accepts "linkpreview", "auth", or "open". #### callback - **callback** (Function) - Required - The handler function to execute when the event is triggered. ### Returns `void` ``` -------------------------------- ### getRangeFontName(start, end) Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextNode.md Get the fontName from characters in range start (inclusive) to end (exclusive). ```APIDOC ## getRangeFontName(start, end) ### Description Get the `fontName` from characters in range `start` (inclusive) to `end` (exclusive). ### Parameters #### start `number` #### end `number` ### Returns _typeof_ [`mixed`](PluginAPI.md#mixed) | [`FontName`](FontName.md) ### Inherited from [`NonResizableTextMixin`](NonResizableTextMixin.md).[`getRangeFontName`](NonResizableTextMixin.md#getrangefontname) ``` -------------------------------- ### timerstart Event Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/PluginAPI.md This event will trigger when somebody starts a timer in the document. This can happen either by a user or triggered by plugin code. ```APIDOC ## timerstart ### Description This event will trigger when somebody starts a timer in the document. This can happen either by a user (either the current user or a multiplayer user) starting the timer from the UI, or triggered by plugin code. To inspect the current state of the timer when this event fires, use the `figma.timer` interface. For example: ```ts figma.on("timerstart", () => console.log(figma.timer.remaining)); figma.timer.start(300); // Output: // 300 ``` ### Method `figma.on` ### Parameters #### type - **"timerstart"** (string) - Required - The event type to listen for. #### callback - **() => void** - Required - The function to execute when the event is triggered. ### Returns - **void** ``` -------------------------------- ### getRangeFillStyleId(start, end) Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextNode.md Get the fillStyleId from characters in range start (inclusive) to end (exclusive). ```APIDOC ## getRangeFillStyleId(start, end) ### Description Get the `fillStyleId` from characters in range `start` (inclusive) to `end` (exclusive). ### Parameters #### start `number` #### end `number` ### Returns `string` | _typeof_ [`mixed`](PluginAPI.md#mixed) ### Inherited from [`NonResizableTextMixin`](NonResizableTextMixin.md).[`getRangeFillStyleId`](NonResizableTextMixin.md#getrangefillstyleid) ``` -------------------------------- ### getRangeFills(start, end) Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextNode.md Get the fills from characters in range start (inclusive) to end (exclusive). ```APIDOC ## getRangeFills(start, end) ### Description Get the `fills` from characters in range `start` (inclusive) to `end` (exclusive). ### Parameters #### start `number` #### end `number` ### Returns _typeof_ [`mixed`](PluginAPI.md#mixed) | [`Paint`](../type-aliases/Paint.md)[] ### Inherited from [`NonResizableTextMixin`](NonResizableTextMixin.md).[`getRangeFills`](NonResizableTextMixin.md#getrangefills) ``` -------------------------------- ### Set and Clear Documentation Links Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/BaseStyleMixin.md Demonstrates how to set a single documentation link and how to clear all documentation links for a style or component. ```typescript node.documentationLinks = [{ uri: "https://www.figma.com" }]; // clear documentation links node.documentationLinks = []; ``` -------------------------------- ### getRangeAllFontNames(start, end) Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextNode.md Get the fontNames from characters in range start (inclusive) to end (exclusive). ```APIDOC ## getRangeAllFontNames(start, end) ### Description Get the `fontName`s from characters in range `start` (inclusive) to `end` (exclusive). ### Parameters #### start `number` #### end `number` ### Returns [`FontName`](FontName.md)[] ### Inherited from [`NonResizableTextMixin`](NonResizableTextMixin.md).[`getRangeAllFontNames`](NonResizableTextMixin.md#getrangeallfontnames) ``` -------------------------------- ### Create a Rectangle with Basic Styles Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/PluginAPI.md Shows how to create a rectangle, set its position, size, and fill color using the Figma API. ```ts const rect = figma.createRectangle(); // Move to (50, 50) rect.x = 50; rect.y = 50; // Set size to 200 x 100 rect.resize(200, 100); // Set solid red fill rect.fills = [{ type: "SOLID", color: { r: 1, g: 0, b: 0 } }]; ``` -------------------------------- ### GroupNode Bound Variables Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/GroupNode.md The `boundVariables` property on a GroupNode provides access to variables that are programmatically bound to specific properties of the node. This includes properties like radii, dimensions, opacity, padding, and more. Refer to the 'Working with Variables' guide for detailed examples on how to get and set these variable bindings. ```APIDOC ## GroupNode.boundVariables ### Description Provides access to variables bound to specific properties of the GroupNode. ### Type `object` ### Properties - **bottomLeftRadius** (`VariableAlias` | `undefined`): The variable bound to the bottom-left radius. - **bottomRightRadius** (`VariableAlias` | `undefined`): The variable bound to the bottom-right radius. - **characters** (`VariableAlias` | `undefined`): The variable bound to the characters property. - **counterAxisSpacing** (`VariableAlias` | `undefined`): The variable bound to the counter-axis spacing. - **height** (`VariableAlias` | `undefined`): The variable bound to the height. - **itemSpacing** (`VariableAlias` | `undefined`): The variable bound to the item spacing. - **maxHeight** (`VariableAlias` | `undefined`): The variable bound to the maximum height. - **maxWidth** (`VariableAlias` | `undefined`): The variable bound to the maximum width. - **minHeight** (`VariableAlias` | `undefined`): The variable bound to the minimum height. - **minWidth** (`VariableAlias` | `undefined`): The variable bound to the minimum width. - **opacity** (`VariableAlias` | `undefined`): The variable bound to the opacity. - **paddingBottom** (`VariableAlias` | `undefined`): The variable bound to the bottom padding. - **paddingLeft** (`VariableAlias` | `undefined`): The variable bound to the left padding. - **paddingRight** (`VariableAlias` | `undefined`): The variable bound to the right padding. - **paddingTop** (`VariableAlias` | `undefined`): The variable bound to the top padding. - **strokeBottomWeight** (`VariableAlias` | `undefined`): The variable bound to the bottom stroke weight. - **strokeLeftWeight** (`VariableAlias` | `undefined`): The variable bound to the left stroke weight. - **strokeRightWeight** (`VariableAlias` | `undefined`): The variable bound to the right stroke weight. - **strokeTopWeight** (`VariableAlias` | `undefined`): The variable bound to the top stroke weight. - **strokeWeight** (`VariableAlias` | `undefined`): The variable bound to the stroke weight. - **topLeftRadius** (`VariableAlias` | `undefined`): The variable bound to the top-left radius. - **topRightRadius** (`VariableAlias` | `undefined`): The variable bound to the top-right radius. - **visible** (`VariableAlias` | `undefined`): The variable bound to the visibility. - **width** (`VariableAlias` | `undefined`): The variable bound to the width. - **fontFamily** (`VariableAlias`[] | `undefined`): Variables bound to font families. - **fontSize** (`VariableAlias`[] | `undefined`): Variables bound to font sizes. - **fontStyle** (`VariableAlias`[] | `undefined`): Variables bound to font styles. - **fontWeight** (`VariableAlias`[] | `undefined`): Variables bound to font weights. - **letterSpacing** (`VariableAlias`[] | `undefined`): Variables bound to letter spacing. - **lineHeight** (`VariableAlias`[] | `undefined`): Variables bound to line height. - **paragraphIndent** (`VariableAlias`[] | `undefined`): Variables bound to paragraph indent. - **paragraphSpacing** (`VariableAlias`[] | `undefined`): Variables bound to paragraph spacing. - **componentProperties** (`object` | `undefined`): An object where keys are property names and values are `VariableAlias`, representing component property variables. - **effects** (`VariableAlias`[] | `undefined`): Variables bound to effects. - **fills** (`VariableAlias`[] | `undefined`): Variables bound to fills. - **layoutGrids** (`VariableAlias`[] | `undefined`): Variables bound to layout grids. - **strokes** (`VariableAlias`[] | `undefined`): Variables bound to strokes. - **textRangeFills** (`VariableAlias`[] | `undefined`): Variables bound to text range fills. ### See Also - [Working with Variables](https://www.figma.com/plugin-docs/working-with-variables) ``` -------------------------------- ### Set Relaunch Data with Descriptions Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/SliceNode.md Configure relaunch buttons with associated descriptions based on the manifest.json configuration. Use an empty string for the description to display only the button. ```json // With the following in the manifest: "relaunchButtons": [ {"command": "edit", "name": "Edit shape"}, {"command": "open", "name": "Open Shaper", "multipleSelection": true} ] ``` ```typescript // Add two buttons (ordered by the above array from the manifest): // * an "Edit shape" button with a description of "Edit this trapezoid // with Shaper" that runs the plugin with `figma.command === 'edit' // `. // * an "Open Shaper" button with no description that runs the plugin with // `figma.command === 'open'`. node.setRelaunchData({ edit: 'Edit this trapezoid with Shaper', open: '' }) ``` -------------------------------- ### show() Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/UIAPI.md Makes the plugin's UI visible. Use this to show the UI if it was created with `visible: false`, or after a call to `figma.ui.hide()`. ```APIDOC ## show() ### Description Makes the plugin's UI visible. Use this to show the UI if it was created using `figma.showUI(..., { visible: false })`, or after a call to `figma.ui.hide()`. ### Method show() ### Returns `void` ``` -------------------------------- ### getRangeBoundVariable(start, end, field) Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextNode.md Get the boundVariable for a given field from characters in range start (inclusive) to end (exclusive). ```APIDOC ## getRangeBoundVariable(start, end, field) ### Description Get the `boundVariable` for a given field from characters in range `start` (inclusive) to `end` (exclusive). ### Parameters #### start `number` #### end `number` #### field [`VariableBindableTextField`](../type-aliases/VariableBindableTextField.md) ### Returns `null` | _typeof_ [`mixed`](PluginAPI.md#mixed) | [`VariableAlias`](VariableAlias.md) ### Inherited from [`NonResizableTextMixin`](NonResizableTextMixin.md).[`getRangeBoundVariable`](NonResizableTextMixin.md#getrangeboundvariable) ``` -------------------------------- ### figma.parameters Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/PluginAPI.md Provides methods to handle user inputs when a plugin is launched in query mode. This is essential for plugins that require specific parameters to be provided at launch. ```APIDOC ## parameters ### Description This property contains methods to handle user inputs when a plugin is launched in query mode. See [Accepting Parameters as Input](https://www.figma.com/plugin-docs/plugin-parameters) for more details. ### Type [`ParametersAPI`](ParametersAPI.md) ``` -------------------------------- ### getRangeFontWeight Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextPathNode.md Get the fontWeight from characters in range start (inclusive) to end (exclusive). ```APIDOC ## getRangeFontWeight(start, end) ### Description Get the `fontWeight` from characters in range `start` (inclusive) to `end` (exclusive). ### Method GET ### Endpoint Not applicable (SDK method) ### Parameters #### Path Parameters None #### Query Parameters - **start** (number) - Required - The starting index of the range (inclusive). - **end** (number) - Required - The ending index of the range (exclusive). ### Returns `number` | _typeof_ [`mixed`](PluginAPI.md#mixed) - The font weight for the specified range, or mixed if the range contains different font weights. ``` -------------------------------- ### Configuring Component Instance Properties Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/ComponentPropertiesMixin.md Demonstrates using `setProperties` on an instance to update its component properties. The `componentProperties` will reflect the changes. ```typescript // Use setProperties on an instance to configure it instance.setProperties({ Size: 'Large', 'ButtonText#0:1': 'login' }) instance.componentProperties // Output { Size: { type: 'VARIANT', value: 'Large', }, IconVisible#0:0: { type: 'BOOLEAN', value: false, }, ButtonText#0:1: { type: 'TEXT', value: 'login', }, } instance.setProperties({ 'IconVisible#0:0': true }) instance.componentProperties // Output { Size: { type: 'VARIANT', value: 'Large', }, IconVisible#0:0: { type: 'BOOLEAN', value: true, }, ButtonText#0:1: { type: 'TEXT', value: 'login', }, } ``` -------------------------------- ### getRangeFills Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextPathNode.md Get the fills from characters in range start (inclusive) to end (exclusive). ```APIDOC ## getRangeFills(start, end) ### Description Get the `fills` from characters in range `start` (inclusive) to `end` (exclusive). ### Method GET ### Endpoint Not applicable (SDK method) ### Parameters #### Path Parameters None #### Query Parameters - **start** (number) - Required - The starting index of the range (inclusive). - **end** (number) - Required - The ending index of the range (exclusive). ### Returns _typeof_ [`mixed`](PluginAPI.md#mixed) | [`Paint`](../type-aliases/Paint.md)[] - An array of Paint objects representing the fills for the specified range. ``` -------------------------------- ### getRangeBoundVariable Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextPathNode.md Get the boundVariable for a given field from characters in range start (inclusive) to end (exclusive). ```APIDOC ## getRangeBoundVariable(start, end, field) ### Description Get the `boundVariable` for a given field from characters in range `start` (inclusive) to `end` (exclusive). ### Method GET ### Endpoint Not applicable (SDK method) ### Parameters #### Path Parameters None #### Query Parameters - **start** (number) - Required - The starting index of the range (inclusive). - **end** (number) - Required - The ending index of the range (exclusive). - **field** ([`VariableBindableTextField`](../type-aliases/VariableBindableTextField.md)) - Required - The field for which to retrieve the bound variable. ### Returns `null` | _typeof_ [`mixed`](PluginAPI.md#mixed) | [`VariableAlias`](VariableAlias.md) - The bound variable for the specified field, or null if none is found. ``` -------------------------------- ### figma.parameters.on() Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/ParametersAPI.md Registers a handler for user input events in the quick action UI. This function allows you to listen for and respond to user interactions within the quick action interface. ```APIDOC ## on() ### Description Register a handler for user input events in the quick action UI. ### Method `on(type: "input", callback: (event) => void): void` ### Parameters #### type - **"input"** (string) - Required - Specifies the event type to listen for. #### callback - **(event) => void** (function) - Required - The function to be called when the input event occurs. It receives an event object. ### Returns `void` ``` -------------------------------- ### Get fontName and indentation segments Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextSublayerNode.md Retrieves both font name and indentation segments. This example demonstrates how the output can contain multiple segments when either font or indentation changes. ```javascript textNode.getStyledTextSegments(["fontName", "indentation"])[ // Output: contains 3 segments because the font / indentation changes // before and after the second "Item" ({ characters: "Item 1\n", start: 0, end: 7, fontName: { family: "Inter", style: "Regular" }, indentation: 1, }, { characters: "Item", start: 7, end: 11, fontName: { family: "Inter", style: "Bold" }, indentation: 2, }, { characters: " 1.1", start: 11, end: 15, fontName: { family: "Inter", style: "Regular" }, indentation: 2, }) ]; ``` -------------------------------- ### Get Measurements for a Node Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/MeasurementsMixin.md Fetches all measurements associated with a specific node, including those where the node is either the start or end point. This method is accessible outside of Dev Mode. ```typescript const nodeMeasurements = figma.currentPage.getMeasurementsForNode(someNode); ``` -------------------------------- ### InstanceNode Properties Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/InstanceNode.md This snippet outlines the key properties of an InstanceNode, providing details on their types, descriptions, and inheritance. ```APIDOC ## InstanceNode Properties ### locked > **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. #### Remarks The value that this property returns is independent from the node's parent. i.e.: - The node isn't necessarily locked if this is `.locked === true`. - The node isn't necessarily unlocked if this is `.locked === false`. - An object is locked if `.locked == true` for itself or **any** of its parents. #### Inherited from [`DefaultFrameMixin`](DefaultFrameMixin.md).[`locked`](DefaultFrameMixin.md#locked) --- ### mainComponent > **mainComponent**: `null` | [`ComponentNode`](ComponentNode.md) 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. If the plugin manifest contains `"documentAccess": "dynamic-page"`, this property is **write-only**. Use [InstanceNode.getMainComponentAsync](#getmaincomponentasync) to read the value. --- ### maskType > **maskType**: [`MaskType`](../type-aliases/MaskType.md) Type of masking to use if this node is a mask. Defaults to `"ALPHA"`. You must check `isMask` to verify that this is a mask; changing `maskType` does not automatically turn on `isMask`, and a node that is not a mask can still have a `maskType`. #### Inherited from [`DefaultFrameMixin`](DefaultFrameMixin.md).[`maskType`](DefaultFrameMixin.md#masktype) --- ### maxHeight > **maxHeight**: `null` | `number` Applicable only to auto-layout frames and their direct children. Value must be positive. Set to `null` to remove `maxHeight`. #### Inherited from [`DefaultFrameMixin`](DefaultFrameMixin.md).[`maxHeight`](DefaultFrameMixin.md#maxheight) --- ### maxWidth > **maxWidth**: `null` | `number` Applicable only to auto-layout frames and their direct children. Value must be positive. Set to `null` to remove `maxWidth`. #### Inherited from [`DefaultFrameMixin`](DefaultFrameMixin.md).[`maxWidth`](DefaultFrameMixin.md#maxwidth) --- ### minHeight > **minHeight**: `null` | `number` Applicable only to auto-layout frames and their direct children. Value must be positive. Set to null to remove `minHeight`. #### Inherited from [`DefaultFrameMixin`](DefaultFrameMixin.md).[`minHeight`](DefaultFrameMixin.md#minheight) --- ### minWidth > **minWidth**: `null` | `number` Applicable only to auto-layout frames and their direct children. Value must be positive. Set to `null` to remove `minWidth`. #### Inherited from [`DefaultFrameMixin`](DefaultFrameMixin.md).[`minWidth`](DefaultFrameMixin.md#minwidth) --- ### name > **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. #### Remarks If the node is a [TextNode](TextNode.md), the name will update automatically by default based on the `characters` property (`autoRename` is true). If you manually override the text node's name, it will set `autoRename` to false. This matches the behavior in the editor. If the node is a [PageNode](PageNode.md) with no children and the name is a page divider name, it will set `isPageDivider` to true. A page divider name consists of all asterisks, all en dashes, all em dashes, or all spaces. #### Inherited from [`DefaultFrameMixin`](DefaultFrameMixin.md).[`name`](DefaultFrameMixin.md#name) --- ### numberOfFixedChildren > **numberOfFixedChildren**: `number` Determines which children of the frame are fixed children in a scrolling frame. #### Remarks In Figma, fixed children are always on top of scrolling (non-fixed) children. Despite the "Fix position when scrolling" checkbox in the UI, fixed layers are not represented as a boolean property on individual layers. Instead, what we really have are two sections of children inside each frame. These section headers are visible in the layers panel when a frame has at least one fixed child. #### Inherited from [`DefaultFrameMixin`](DefaultFrameMixin.md).[`numberOfFixedChildren`](DefaultFrameMixin.md#numberoffixedchildren) --- ### opacity > **opacity**: `number` Opacity of the node, as shown in the Layer panel. Must be between 0 and 1. #### Inherited from [`DefaultFrameMixin`](DefaultFrameMixin.md).[`opacity`](DefaultFrameMixin.md#opacity) --- ``` -------------------------------- ### Get fontName segments Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/TextSublayerNode.md Retrieves font name segments from a text node. This example shows how the output contains multiple segments when the font style changes within the text. ```javascript textNode.getStyledTextSegments(["fontName"])[ // Output: contains 2 segments because the text is no longer bolded after "hello" ({ characters: "hello", start: 0, end: 5, fontName: { family: "Inter", style: "Bold" }, }, { characters: " world", start: 5, end: 11, fontName: { family: "Inter", style: "Regular" }, }) ]; ``` -------------------------------- ### Get letterSpacing for emoji text segments Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/NonResizableTextMixin.md Retrieves letter spacing for text segments containing emojis. This example highlights that some emojis have a JavaScript length of 2, affecting segment boundaries. ```javascript textNode.getStyledTextSegments(["letterSpacing"])[ // Output: many emoji have length 2 in Javascript ({ characters: "😁😭", start: 0, end: 4, letterSpacing: { unit: "PERCENT", value: 50 }, }, { characters: "😅😂😳😎", start: 4, end: 12, letterSpacing: { unit: "PERCENT", value: 0 }, }) ]; ``` -------------------------------- ### createInstance Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/ComponentNode.md Creates an instance of this component. The new instance is parented under figma.currentPage by default. ```APIDOC ## createInstance() ### Description Creates an instance of this component. By default, the instance will be parented under `figma.currentPage`. ### Method (Implicitly a method call on a ComponentNode object) ### Parameters (None) ### Returns - **InstanceNode** - The newly created InstanceNode. ``` -------------------------------- ### Setting Relaunch Data on a Node Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/BaseNodeMixin.md Use this method to associate a command and its description with a node. Ensure the command exists in your plugin's manifest. ```typescript figma.getNodeById('123')?.setRelaunchData({ myCommand: 'Short description' }) ``` -------------------------------- ### PageNode Properties Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/PageNode.md This snippet details the properties available on the PageNode interface, including backgrounds, children, explicit variable modes, export settings, flow starting points, focused slide, and guides. ```APIDOC ## PageNode Properties ### backgrounds > **backgrounds**: readonly [`Paint`](../type-aliases/Paint.md)[] The background color of the canvas (currently only supports a single solid color paint). ### children > `readonly` **children**: readonly [`SceneNode`](../type-aliases/SceneNode.md)[] The list of children, sorted back-to-front. If the manifest contains `"documentAccess": "dynamic-page"`, and the node is a PageNode, you must first call [PageNode.loadAsync](#loadasync) to access this property. ### explicitVariableModes > **explicitVariableModes**: `object` The explicitly set modes for this node. For `SceneNodes`, represents a subset of [SceneNodeMixin.resolvedVariableModes](SceneNodeMixin.md#resolvedvariablemodes). ### exportSettings > **exportSettings**: readonly [`ExportSettings`](../type-aliases/ExportSettings.md)[] List of export settings stored on the node. ### flowStartingPoints > **flowStartingPoints**: readonly `object`[] The sorted list of flow starting points used when accessing Presentation view. ### focusedSlide? > `optional` **focusedSlide**: `null` | [`SlideNode`](SlideNode.md) Note: This API is only available in Figma Slides. When in single slide view, the Slide that is currently focused is accessible via this property. ### guides > **guides**: readonly [`Guide`](Guide.md)[] The guides on this page. ``` -------------------------------- ### Get fontName for styled text segments Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/NonResizableTextMixin.md Retrieves the font name for different segments of text. This example shows how the output contains separate segments when the font style changes, such as from bold to regular. ```javascript textNode.getStyledTextSegments(["fontName"])[ // Output: contains 2 segments because the text is no longer bolded after "hello" ({ characters: "hello", start: 0, end: 5, fontName: { family: "Inter", style: "Bold" }, }, { characters: " world", start: 5, end: 11, fontName: { family: "Inter", style: "Regular" }, }) ]; ``` -------------------------------- ### Manifest JSON for Relaunch Buttons Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/CodeBlockNode.md Defines relaunch buttons in the manifest file, specifying commands, names, and whether multiple selections are allowed. ```json // With the following in the manifest: "relaunchButtons": [ {"command": "edit", "name": "Edit shape"}, {"command": "open", "name": "Open Shaper", "multipleSelection": true} ] ``` ```json // With the following in the manifest: "relaunchButtons": [ {"command": "relaunch", "name": "Run again", "multipleSelection": true} ] ``` -------------------------------- ### Listen to Timer Start Event Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/PluginAPI.md Subscribe to the 'timerstart' event to log the remaining time when a timer begins. This event can be triggered by user interaction or plugin code. Use `figma.timer.remaining` to inspect the timer's state. ```typescript figma.on("timerstart", () => console.log(figma.timer.remaining)); figma.timer.start(300); // Output: // 300 ``` -------------------------------- ### Get Styled Text Segments with Font Name Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/BaseNonResizableTextMixin.md Fetches styled text segments, specifically requesting the fontName. This example shows how font styles change within a text node, resulting in multiple segments. ```typescript textNode.getStyledTextSegments(["fontName"]) ``` -------------------------------- ### Get fontName and indentation for styled text segments Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/NonResizableTextMixin.md Retrieves both font name and indentation for text segments. This example demonstrates how multiple segments are returned when either font style or indentation changes, illustrating complex list structures. ```javascript textNode.getStyledTextSegments(["fontName", "indentation"])[ // Output: contains 3 segments because the font / indentation changes // before and after the second "Item" ({ characters: "Item 1\n", start: 0, end: 7, fontName: { family: "Inter", style: "Regular" }, indentation: 1, }, { characters: "Item", start: 7, end: 11, fontName: { family: "Inter", style: "Bold" }, indentation: 2, }, { characters: " 1.1", start: 11, end: 15, fontName: { family: "Inter", style: "Regular" }, indentation: 2, }) ]; ``` -------------------------------- ### Create a button with a Reaction object that updates the visibility of another Frame. Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/RectangleNode.md This advanced example demonstrates creating a button that toggles the visibility of a frame using a Figma variable and conditional prototyping actions. It involves creating a variable collection, a boolean variable, frames for the button and the target, and then setting up a complex reaction with conditional logic. ```APIDOC ## Create a button with a Reaction object that updates the visibility of another Frame. ### Description This example creates a button that, when clicked, toggles a boolean variable named "show". This variable controls the visibility of a red frame. The logic uses a conditional reaction to check the current value of "show" and set it to the opposite. ### Method `node.setReactionsAsync(reactions: ReadonlyArray) ` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```ts // Create collection with "show" variable inside const collection = figma.variables.createVariableCollection("prototyping"); const modeId = collection.modes[0].modeId; const showVariable = figma.variables.createVariable( "show", collection, "BOOLEAN" ); // Initialize "show" variable to true showVariable.setValueForMode(modeId, true); const parentFrame = figma.createFrame(); parentFrame.resize(350, 200); // Green "Click me" button const toggleButton = figma.createFrame(); parentFrame.appendChild(toggleButton); toggleButton.x = 50; toggleButton.y = 50; toggleButton.layoutMode = "HORIZONTAL"; toggleButton.layoutSizingHorizontal = "HUG"; toggleButton.layoutSizingVertical = "HUG"; toggleButton.fills = [{ type: "SOLID", color: { r: 0, g: 1, b: 0 } }]; const text = figma.createText(); await figma.loadFontAsync(text.fontName); text.characters = "Click me"; toggleButton.appendChild(text); // Red square const frame = figma.createFrame(); parentFrame.appendChild(frame); frame.x = 200; frame.y = 50; frame.fills = [{ type: "SOLID", color: { r: 1, g: 0, b: 0 } }]; // The "show" variable will now control the visibility of the frame frame.setBoundVariable("visible", showVariable); await toggleButton.setReactionsAsync([ { trigger: { type: "ON_CLICK" }, actions: [ { type: "CONDITIONAL", conditionalBlocks: [ { condition: { // Conditional: if "show" variable == true type: "EXPRESSION", resolvedType: "BOOLEAN", value: { expressionArguments: [ { type: "VARIABLE_ALIAS", resolvedType: "BOOLEAN", value: { type: "VARIABLE_ALIAS", id: showVariable.id, }, }, { type: "BOOLEAN", resolvedType: "BOOLEAN", value: true, }, ], expressionFunction: "EQUALS", }, }, actions: [ // then set "show" variable to false { type: "SET_VARIABLE", variableId: showVariable.id, variableValue: { resolvedType: "BOOLEAN", type: "BOOLEAN", value: false, }, }, ], }, { actions: [ // else set "show" variable to true { type: "SET_VARIABLE", variableId: showVariable.id, variableValue: { resolvedType: "BOOLEAN", type: "BOOLEAN", value: true, }, }, ], }, ], }, ], }, ]); ``` ### Response #### Success Response (200) Creates frames, a variable, and applies a complex reaction to the button to control the visibility of the red frame based on the "show" variable. #### Response Example None explicitly provided, but the operation is asynchronous and modifies the Figma document. ``` -------------------------------- ### Changing the transition duration in a prototyping action Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/BooleanOperationNode.md This example demonstrates how to access and modify the `reactions` property of a selected node to change the transition duration of a prototyping action. ```APIDOC ## Changing the transition duration in a prototyping action ### Description This code snippet shows how to read the current prototyping reactions of a selected node, modify the duration of a transition within a reaction, and then update the node with the new reactions. ### Method `node.setReactionsAsync(newReactions)` ### Parameters - `node`: The currently selected Figma node. - `newReactions`: An array of reaction objects with the modified transition duration. ### Request Example ```ts const node = figma.currentPage.selection[0]; console.log(node.reactions); // See clone() implementation from the Editing Properties page const newReactions = clone(node.reactions); newReactions[0].actions[0].transition.duration = 0.5; await node.setReactionsAsync(newReactions); ``` ### Response #### Success Response The node will be updated with the modified prototyping reactions. #### Response Example (No explicit response example provided, but the node's reactions will be updated.) ``` -------------------------------- ### Get letterSpacing with range in middle of surrogate pairs Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/NonResizableTextMixin.md Retrieves letter spacing for a specified range that starts or ends within a surrogate pair. This can result in raw Unicode code points being returned for characters that are split across the range boundary. ```javascript textNode.getStyledTextSegments(["letterSpacing"], 1, 3)[ // Output: if the requested range starts or ends in the middle // of surrogate pairs, those pairs will be trimmed and you will // see raw Unicode code points { characters: "\uDE01\uD83D", start: 1, end: 3, letterSpacing: { unit: "PERCENT", value: 50 }, } ]; ``` -------------------------------- ### Create a Red Octagon with Figma API Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/PluginAPI.md Demonstrates creating a polygon, setting its position, size, point count, and fill color using the Figma API. ```ts const polygon = figma.createPolygon(); // Move to (50, 50) polygon.x = 50; polygon.y = 50; // Set size to 200 x 200 polygon.resize(200, 200); // Make the polygon 8-sided polygon.pointCount = 8; // Set solid red fill polygon.fills = [{ type: "SOLID", color: { r: 1, g: 0, b: 0 } }]; ``` -------------------------------- ### Get Styled Text Segments with Letter Spacing (Full Range) Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/BaseNonResizableTextMixin.md Fetches styled text segments, focusing on letterSpacing across the entire text node. This example highlights how emoji characters can affect segment boundaries due to their length in JavaScript. ```typescript textNode.getStyledTextSegments(["letterSpacing"]) ``` -------------------------------- ### Changing the transition duration in a prototyping action Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/HighlightNode.md This example demonstrates how to access and modify the `duration` property of a prototyping transition for a selected node. It reads the current reactions, clones them, updates the duration, and then applies the changes asynchronously. ```APIDOC ## Changing the transition duration in a prototyping action ### Description This example demonstrates how to access and modify the `duration` property of a prototyping transition for a selected node. It reads the current reactions, clones them, updates the duration, and then applies the changes asynchronously. ### Method `node.setReactionsAsync(newReactions: ReadonlyArray) ` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```ts const node = figma.currentPage.selection[0]; console.log(node.reactions); // See clone() implementation from the Editing Properties page const newReactions = clone(node.reactions); newReactions[0].actions[0].transition.duration = 0.5; await node.setReactionsAsync(newReactions); ``` ### Response #### Success Response (200) None explicitly documented, but the operation is asynchronous. #### Response Example None ``` -------------------------------- ### createVideoAsync() Source: https://github.com/naygoni/figma-plugin-api/blob/main/interfaces/PluginAPI.md Creates a Video object from raw file bytes. Videos can be used as fills for shapes or backgrounds. ```APIDOC ## createVideoAsync() ### Description Creates a `Video` object from the raw bytes of a file content. Videos can be used as fills for shapes or backgrounds. ### Method `createVideoAsync(data: Uint8Array): Promise