### Example Network Access Configuration Source: https://developers.figma.com/docs/plugins/manifest This snippet shows a complete example of the `networkAccess` object, including allowed domains for production and development. ```json { "networkAccess": { "allowedDomains": [ "figma.com", "*.google.com", "https://my-app.cdn.com", "wss://socket.io", "example.com/api/", "exact-path.com/content" ], "devAllowedDomains": [ "http://localhost:3000" ] } } ``` -------------------------------- ### Install Widget Typings Source: https://developers.figma.com/docs/plugins/api/properties/figma-createnodefromjsxasync Installs the necessary widget typings for your Figma plugin project. Run this command in your plugin's directory. ```bash npm i --save-dev @figma/widget-typings ``` -------------------------------- ### Install Project Dependencies with npm Source: https://developers.figma.com/docs/plugins/plugin-quickstart-guide Use this command to install all project dependencies listed in the package.json file. This is typically done after cloning a project or setting up a new development environment. ```bash npm install ``` -------------------------------- ### guides Source: https://developers.figma.com/docs/plugins/api/FrameNode Provides access to the array of `Guide` objects used within this FrameNode's frame. These guides are specific to the frame and separate from canvas-wide guides. ```APIDOC ## guides: ReadonlyArray ### Description 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. ``` -------------------------------- ### Check Node.js Installation Source: https://developers.figma.com/docs/plugins/plugin-quickstart-guide Verify that Node.js has been successfully installed by checking its version in the terminal. This command is run after Node.js installation. ```bash node ``` -------------------------------- ### Install Project Dependencies Source: https://developers.figma.com/docs/plugins/samples Installs project dependencies, including the Figma typings file, which is essential for developing typed Figma plugins. ```bash $ npm install ``` -------------------------------- ### Example tsconfig.json with JSX Options Source: https://developers.figma.com/docs/plugins/api/properties/figma-createnodefromjsxasync A complete example of a tsconfig.json file including the required JSX compiler options for Figma plugins. ```json { "compilerOptions": { "jsx": "react", "jsxFactory": "figma.widget.h", "jsxFragmentFactory": "figma.widget.Fragment", "target": "es6", "lib": [ "es6" ], "strict": true, "typeRoots": [ "./node_modules/@types", "./node_modules/@figma" ] } } ``` -------------------------------- ### Check TypeScript Installation Source: https://developers.figma.com/docs/plugins/plugin-quickstart-guide Verify that TypeScript has been successfully installed by checking its version in the terminal. This command is run after TypeScript installation. ```bash tsc -v ``` -------------------------------- ### Install Webpack and Webpack CLI Source: https://developers.figma.com/docs/plugins/libraries-and-bundling These commands install Webpack and the Webpack CLI as development dependencies for your project. Webpack is used for bundling modules, and the CLI provides tools to run Webpack from the command line. ```bash npm install webpack webpack-cli --save-dev ``` -------------------------------- ### TextPathStartData Source: https://developers.figma.com/docs/plugins/api/TextPathStartData Defines the starting point of a text path. ```APIDOC ## TextPathStartData ### Description Represents the starting point of a text path within a segment. ### Properties #### segment (number) - **segment**: The index of the segment where the text path begins. #### position (number) - **position**: The position along the segment (ranging from 0 to 1) where the text path starts. ``` -------------------------------- ### Add a New Guide to a PageNode Source: https://developers.figma.com/docs/plugins/api/properties/PageNode-guides Demonstrates how to add a new guide to a PageNode by creating a new array using `.concat()`. This method is necessary because the `guides` property is read-only. ```typescript function addNewGuide(page: PageNode, guide: Guide) { // .concat() creates a new array page.guides = page.guides.concat(guide) } ``` -------------------------------- ### Install TypeScript and ts-loader Source: https://developers.figma.com/docs/plugins/libraries-and-bundling Install the TypeScript compiler and loader as development dependencies. ```bash npm install --save-dev typescript ts-loader ``` -------------------------------- ### flowStartingPoints Source: https://developers.figma.com/docs/plugins/api/properties/PageNode-flowstartingpoints The sorted list of flow starting points used when accessing Presentation view. The default starting point is the first one in the list. ```APIDOC ## flowStartingPoints ### Description Returns a sorted list of flow starting points for Presentation view. This is supported on PageNode objects. ### Signature `flowStartingPoints: ReadonlyArray<{ nodeId: string; name: string }>` ### Remarks The default starting point is the first one in the list. This is used, for example, when no frames are selected and the user clicks the play icon in the toolbar to enter Presentation view. ``` -------------------------------- ### guides Source: https://developers.figma.com/docs/plugins/api/node-properties 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: ReadonlyArray ### Description 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. ### Supported on: * ComponentNode * ComponentSetNode * FrameNode * InstanceNode * SlideNode * SlotNode ``` -------------------------------- ### Install TypeScript Globally Source: https://developers.figma.com/docs/plugins/samples Installs the TypeScript compiler globally using npm. This is a prerequisite for compiling TypeScript code for Figma plugins. ```bash $ npm install -g typescript ``` -------------------------------- ### Codegen Plugin Example Source: https://developers.figma.com/docs/plugins/samples A basic example of a plugin designed for code generation tasks within Figma. ```typescript // Source code for Codegen plugin ``` -------------------------------- ### Example CSS Variables: Color Role Source: https://developers.figma.com/docs/plugins/css-variables Shows example CSS variables incorporating the 'brand' color role for background and the 'danger' color role for icons. ```css --figma-color-bg-brand --figma-color-icon-danger ``` -------------------------------- ### Text Path Start Data Source: https://developers.figma.com/docs/plugins/updates/2026/01/26/version-1-update-123 Gets and sets the starting position data for text on a path node. ```APIDOC ## textOnPathNode.textPathStartData ### Description Gets and sets the starting position data for text on a path node. ### Property Type `TextPathStartData` ``` -------------------------------- ### Check Payment Status and Initiate Checkout Source: https://developers.figma.com/docs/plugins/requiring-payment This example checks if a user has paid for the plugin or is within a free trial period. If the trial has ended (more than 3 days since first run), it initiates the checkout flow. Otherwise, it notifies the user about their trial status. ```typescript async function run() { if (figma.payments.status.type === "PAID") { figma.notify("USER HAS PAID"); } else { // figma.payments.status.type === "UNPAID" const ONE_DAY_IN_SECONDS = 60 * 60 * 24; const secondsSinceFirstRun = figma.payments.getUserFirstRanSecondsAgo(); const daysSinceFirstRun = secondsSinceFirstRun / ONE_DAY_IN_SECONDS; if (daysSinceFirstRun > 3) { await figma.payments.initiateCheckoutAsync({ interstitial: "TRIAL_ENDED", }); if (figma.payments.status.type === "UNPAID") { figma.notify("USER CANCELLED CHECKOUT"); } else { figma.notify("USER JUST PAID"); } } else { figma.notify("USER IS IN THREE DAY TRIAL PERIOD"); } } figma.closePlugin(); } run(); ``` -------------------------------- ### getStyledTextSegments(fields, start, end) Source: https://developers.figma.com/docs/plugins/api/node-properties Gets text segments along with specified text properties. Allows filtering by start and end character indices. ```APIDOC ## getStyledTextSegments)[]>(fields: StyledTextSegmentFields, start?: number, end?: number) ### Description Get text segments along with the desired text properties (font size, text case, etc...) ### Method GET (conceptual) ### Endpoint N/A (SDK method) ### Parameters #### Path Parameters - **fields** (Array>) - Required - An array of strings specifying which text segment properties to retrieve. - **start** (number) - Optional - The starting character index for the segments. - **end** (number) - Optional - The ending character index for the segments. ### Response #### Success Response - **Array>** - An array of styled text segments, each including the requested fields, characters, start, and end indices. ### Response Example ```json [ { "characters": "Hello", "start": 0, "end": 5, "fontSize": 16, "fontName": "Inter" } ] ``` ``` -------------------------------- ### Create a Styled 'Hello World!' Text Node Source: https://developers.figma.com/docs/plugins/api/properties/figma-createtext This snippet demonstrates how to create a text node, set its position, load a font, assign characters, and style it with a larger font size and red color. Ensure the font is loaded asynchronously before setting text content. ```typescript (async () => { const text = figma.createText() // Move to (50, 50) text.x = 50 text.y = 50 // Load the font in the text node before setting the characters await figma.loadFontAsync(text.fontName) text.characters = 'Hello world!' // Set bigger font size and red color text.fontSize = 18 text.fills = [{ type: 'SOLID', color: { r: 1, g: 0, b: 0 } }] })() ``` -------------------------------- ### figma.timer.remaining Source: https://developers.figma.com/docs/plugins/api/figma-timer Gets the time remaining on the timer in seconds. Returns 0 if the timer has not been started. ```APIDOC ## figma.timer.remaining ### Description Gets the time remaining on the timer in seconds. If the timer has not been started, returns 0. ### Property - **remaining** (number) - Readonly. Time remaining on timer, in seconds. ``` -------------------------------- ### Get Bound Variables from a Node Source: https://developers.figma.com/docs/plugins/working-with-variables This example shows how to retrieve all variables currently bound to a specific node using the `boundVariables` property. It also includes an example of the structure of the returned object. ```typescript const exampleNode = await figma.getNodeByIdAsync("1:4") const exampleNodeVariables = exampleNode.boundVariables /* Example boundVariables object: { "strokes": [ { "type": "VARIABLE_ALIAS", "id": "VariableID:1:7" } ] } */ ``` -------------------------------- ### Async/Await Fetch Example Source: https://developers.figma.com/docs/plugins/async-tasks Illustrates fetching data using async/await syntax with try...catch for error handling. The plugin is closed after the operation. ```javascript async function fetchData(){ try { const response = await fetch("https://httpbin.org/anything"); const text = await response.text(); console.log(`Response text is: ${text}`); } catch (error) { console.error(error); } figma.closePlugin(); } fetchData(); ``` -------------------------------- ### figma.timer.total Source: https://developers.figma.com/docs/plugins/api/figma-timer Gets the total time set for the timer in seconds. Returns 0 if the timer has not been started. ```APIDOC ## figma.timer.total ### Description Gets the total time set for the timer in seconds. If the timer has not been started, returns 0. The total time is defined as the time the timer was initially started at, plus or minus any time that may have been added or removed from the timer. ### Property - **total** (number) - Readonly. Total time on timer, in seconds. ``` -------------------------------- ### Instance Component Properties for Components Output Source: https://developers.figma.com/docs/plugins/api/properties/ComponentPropertiesMixin-componentpropertydefinitions Example output of `instance.componentProperties` for an instance of a main component, showing the current values for boolean and instance swap properties. ```json { ImageVisible#0:0: { type: 'BOOLEAN', value: true, }, Icon#0:1: { type: 'INSTANCE_SWAP', value: '1:24', }, } ``` -------------------------------- ### boundVariables Source: https://developers.figma.com/docs/plugins/api/LineNode Retrieves the variables bound to specific fields on this node. Refer to the Working with Variables guide for details on getting and setting variable bindings. ```APIDOC ## boundVariables ### Description The variables bound to a particular field on this node. Please see the Working with Variables guide for how to get and set variable bindings. ### Property Type { readonly [field in VariableBindableNodeField]?: VariableAlias} & { readonly [field in VariableBindableTextField]?: VariableAlias[]} & { fills?: VariableAlias[]; strokes?: VariableAlias[]; effects?: VariableAlias[]; layoutGrids?: VariableAlias[]; componentProperties?: { [propertyName: string]: VariableAlias }; textRangeFills?: VariableAlias[] } [readonly] ``` -------------------------------- ### gridColumnAnchorIndex Source: https://developers.figma.com/docs/plugins/api/EllipseNode Gets the read-only starting column index for a node within its parent grid, applicable only on direct children of grid auto-layout frames. ```APIDOC ## gridColumnAnchorIndex: number [readonly] Applicable only on direct children of grid auto-layout frames. Determines the starting column index for this node within the parent grid. ``` -------------------------------- ### Creating a New Plugma Project Source: https://developers.figma.com/docs/plugins/libraries-and-bundling Initializes a new Figma plugin project using the Plugma toolkit. Follow the prompts to configure your project. ```bash npm create plugma@latest ``` -------------------------------- ### gridRowAnchorIndex Source: https://developers.figma.com/docs/plugins/api/EllipseNode Gets the read-only starting row index for a node within its parent grid, applicable only on direct children of grid auto-layout frames. ```APIDOC ## gridRowAnchorIndex: number [readonly] Applicable only on direct children of grid auto-layout frames. Determines the starting row index for this node within the parent grid. ``` -------------------------------- ### Creating a New Project with Create Figma Plugin Source: https://developers.figma.com/docs/plugins/libraries-and-bundling Initializes a new Figma plugin project using the Create Figma Plugin toolkit. This toolkit comes with pre-configured bundling and UI components. ```bash npx --yes create-figma-plugin ``` -------------------------------- ### gridRowAnchorIndex Source: https://developers.figma.com/docs/plugins/api/properties/nodes-gridrowanchorindex Gets or sets the starting row index for a node within a parent grid. This property is applicable only to direct children of grid auto-layout frames. ```APIDOC ## gridRowAnchorIndex ### Description Gets or sets the starting row index for a node within a parent grid. This property is applicable only to direct children of grid auto-layout frames. The row index is 0-based, where 0 is the first row in the grid. This property works in conjunction with gridRowSpan to determine the node's row position and size in the grid. ### Signature `gridRowAnchorIndex: number` [readonly] ### Remarks If the index provided is greater than the number of rows in the grid, the setter will throw an error. If the index provided results in the node overlapping with another node in the grid, the setter will throw an error. ### Supported Nodes * BooleanOperationNode * ComponentNode * ComponentSetNode * EllipseNode * FrameNode * GroupNode * HighlightNode * InstanceNode * LineNode * PolygonNode * RectangleNode * SliceNode * SlideNode * SlotNode * StampNode * StarNode * TextNode * TextPathNode * TransformGroupNode * VectorNode * WashiTapeNode ``` -------------------------------- ### gridColumnAnchorIndex Source: https://developers.figma.com/docs/plugins/api/properties/nodes-gridcolumnanchorindex Gets or sets the starting column index for a node within a parent grid. This property is applicable only to direct children of grid auto-layout frames. ```APIDOC ## gridColumnAnchorIndex ### Description Determines the starting column index for this node within the parent grid. Applicable only on direct children of grid auto-layout frames. ### Signature `gridColumnAnchorIndex: number [readonly]` ### Remarks The column index is 0-based, where 0 is the first column in the grid. This property works in conjunction with `gridColumnSpan` to determine the node's column position and size in the grid. If the index provided is greater than the number of columns in the grid, the setter will throw an error. If the index provided results in the node overlapping with another node in the grid, the setter will throw an error. ### Supported on: * BooleanOperationNode * ComponentNode * ComponentSetNode * EllipseNode * FrameNode * GroupNode * HighlightNode * InstanceNode * LineNode * PolygonNode * RectangleNode * SliceNode * SlideNode * SlotNode * StampNode * StarNode * TextNode * TextPathNode * TransformGroupNode * VectorNode * WashiTapeNode ``` -------------------------------- ### Basic Promise Fetch Example Source: https://developers.figma.com/docs/plugins/async-tasks Demonstrates fetching data from an API using Promises and handling the response. The plugin is closed after the data is processed. ```javascript const fetchPromise = fetch("https://httpbin.org/anything"); fetchPromise.then((response) => { const textPromise = response.text(); textPromise.then((data) => { console.log(data); figma.closePlugin(); }); }); ``` -------------------------------- ### Plugin Operations Valid in Dev Mode Source: https://developers.figma.com/docs/plugins/working-in-dev-mode These are examples of operations that are permitted in Dev Mode, including getting nodes, reading properties, showing the UI, and listening to events. ```typescript // Get a node const node = await figma.getNodeByIdAsync('1:12'); // Read a property console.log(node.name) // showUI figma.showUI(__html__) // listen to events figma.on('selectionchange', () => { // Do something }) ``` -------------------------------- ### Component Property Definitions for Components Output Source: https://developers.figma.com/docs/plugins/api/properties/ComponentPropertiesMixin-componentpropertydefinitions Example output of `component.componentPropertyDefinitions`, showing boolean and instance swap properties available on a main component. ```json { ImageVisible#0:0: { type: 'BOOLEAN', defaultValue: true, }, Icon#0:1: { type: 'INSTANCE_SWAP', defaultValue: '7:23', }, } ``` -------------------------------- ### InstanceNode Methods Source: https://developers.figma.com/docs/plugins/api/InstanceNode Methods for resizing, rescaling, and managing aspect ratio and exports. ```APIDOC ## InstanceNode Methods ### 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. ### 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). ### rescale(scale: number): void Rescales the node. This API function is the equivalent of using the Scale Tool from the toolbar. ### lockAspectRatio(): void Locks the node's `targetAspectRatio` to the current ratio of its width and height. ### unlockAspectRatio(): void Unlocks the node's `targetAspectRatio`. ### exportAsync(settings?: ExportSettings): Promise ### exportAsync(settings: ExportSettingsSVGString): Promise ### exportAsync(settings: ExportSettingsREST): Promise