figma/mcp-server-guide

Given: `https://www.figma.com/design/QiEF6w564ggoW8ftcLvdcu/MyDesignSystem?node-id=4185-3778`

Given: `https://www.figma.com/design/QiEF6w564ggoW8ftcLvdcu/MyDesignSystem?node-id=4185-3778`

// url=https://www.figma.com/file/{fileKey}/{fileName}?node-id={nodeId}

// url=https://www.figma.com/file/{fileKey}/{fileName}?node-id={nodeId}

Given URL: `https://figma.com/design/abc123/MyFile?node-id=42-100`

Given URL: `https://figma.com/design/abc123/MyFile?node-id=42-100`

// url=https://figma.com/design/abc123/MyFile?node-id=42-100

// url=https://figma.com/design/abc123/MyFile?node-id=42-100

// url=https://www.figma.com/design?node-id=7699-6920

// url=https://www.figma.com/design?node-id=7699-6921

// url=https://www.figma.com/design?node-id=7699-6922

// url=https://www.figma.com/file/abc123/MyFile?node-id=123-456

"codeConnect": {     "documentUrlSubstitutions": {       "<PROD_FILE>": "https://figma.com/design/abc123/Production",

"documentUrlSubstitutions": {       "<PROD_FILE>": "https://figma.com/design/abc123/Production",       "<TEST_FILE>": "https://figma.com/design/xyz789/Testing"

"<PROD_FILE>": "https://figma.com/design/abc123/Production",

"<TEST_FILE>": "https://figma.com/design/xyz789/Testing"

// url=https://www.figma.com/file/abc123/MyFile?node-id=123-456

// url=https://www.figma.com/file/abc123/MyFile?node-id=123-456

[Credential-related source omitted]

[Credential-related source omitted]

npx figma connect unpublish --node=https://figma.com/file/abc/File?node-id=123-456 --label=React

// url=https://www.figma.com/file/abc/Components?node-id=1-2

// url=https://www.figma.com/file/abc/Components?node-id=10-20

// url=https://www.figma.com/file/abc/Components?node-id=30-40

// url=https://www.figma.com/file/abc/Components?node-id=50-60

**Example:** Code Connect file contains `// url=https://figma.com/design/ABC123/File?node-id=609-35535`. Parse `fileKey` = `ABC123`, `nodeId` = `609:35535`. Run `use_figma` against the **library file** (fileKey `ABC123`, not the target file

**Example:** Code Connect file contains `// url=https://figma.com/design/ABC123/File?node-id=609-35535`. Parse `fileKey` = `ABC123`, `nodeId` = `609:35535`. Run `use_figma` against the **library file** (fileKey `ABC123`, not the target file

**Example:** Code Connect file contains `// url=https://figma.com/design/ABC123/File?node-id=609-35535`. Parse `fileKey` = `ABC123`, `nodeId` = `609:35535`. Run `use_figma` against the **library file** (fileKey `ABC123`, not the target file

// Import a codebase icon SVG as a vector, sized to a 24px slot const chevron = $fig.svg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

// Import a codebase icon SVG as a vector, sized to a 24px slot const chevron = $fig.svg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

// Import a codebase icon SVG as a vector, sized to a 24px slot const chevron = $fig.svg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

const chevron = $fig.svg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +   '<path d="m9 18 6-6-6-6" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></s

const chevron = $fig.svg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +   '<path d="m9 18 6-6-6-6" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></s

const chevron = $fig.svg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +   '<path d="m9 18 6-6-6-6" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></s

'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

[Credential-related source omitted]

// Create a simple icon component from SVG const svgNode = figma.createNodeFromSvg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

// Create a simple icon component from SVG const svgNode = figma.createNodeFromSvg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

const svgNode = figma.createNodeFromSvg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +   '<path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-l

const svgNode = figma.createNodeFromSvg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +   '<path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-l

'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

cs.documentationLinks = [   { uri: 'https://your-storybook.com/button' }

cs.documentationLinks = [   { uri: 'https://your-storybook.com/button' }

{ uri: 'https://your-storybook.com/button' }

{ uri: 'https://your-storybook.com/button' }

const cs = await figma.getNodeByIdAsync(CS_ID); cs.description = 'Buttons allow users to take actions and make choices with a single tap.'; cs.documentationLinks = [{ uri: 'https://your-storybook.com/button' }];

const cs = await figma.getNodeByIdAsync(CS_ID); cs.description = 'Buttons allow users to take actions and make choices with a single tap.'; cs.documentationLinks = [{ uri: 'https://your-storybook.com/button' }];

cs.description = 'Buttons allow users to take actions and make choices with a single tap.'; cs.documentationLinks = [{ uri: 'https://your-storybook.com/button' }]; // Add properties — save returned keys

cs.description = 'Buttons allow users to take actions and make choices with a single tap.'; cs.documentationLinks = [{ uri: 'https://your-storybook.com/button' }]; // Add properties — save returned keys

cs.documentationLinks = [{ uri: 'https://your-storybook.com/button' }];

cs.documentationLinks = [{ uri: 'https://your-storybook.com/button' }];

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

Executable file

`https://www.figma.com/file/new?try-tool-resource-content-id=<id>&try-tool-resource-type=gen_tool&type=design&mode=design`

- Figma MCP server connected and accessible. - Node ID parsed from the Figma URL the user provides. URL format: `https://figma.com/design/:fileKey/:fileName?node-id=1-2` — extract `fileKey` (the segment after `/design/`) and `nodeId` (the v

- Node ID parsed from the Figma URL the user provides. URL format: `https://figma.com/design/:fileKey/:fileName?node-id=1-2` — extract `fileKey` (the segment after `/design/`) and `nodeId` (the value of the `node-id` query parameter, e.g. `

4. **Validate one animation end-to-end before batching.** Build, reload, and watch one full timeline loop — confirm each animated node appears at the time its keyframe track says it should. "Renders without error" is not "renders correctly.

5. **Don't fabricate motion.** If a node has no motion data in the response, leave it static. Do not borrow easing/duration defaults from elsewhere in the design, and do not auto-animate "because the rest of the component is animated." 6. *

6. **Download assets and reference local files.** `get_design_context` / `get_motion_context` return assets as expiring URLs (`/api/mcp/asset/...`), often SVG. Download each asset into the project with `curl -L` and reference the downloaded

- **React**: [motion.dev](https://motion.dev) (the `motion` package). The tool returns motion.dev code directly — use it.

| Target | Default | Why | |---|---|---| | React | [motion.dev](https://motion.dev) (the `motion` package) | Tool emits motion.dev code directly. Supports keyframes, springs, scroll-linked, gesture, layout transitions. |

|---|---|---| | React | [motion.dev](https://motion.dev) (the `motion` package) | Tool emits motion.dev code directly. Supports keyframes, springs, scroll-linked, gesture, layout transitions. | | Vanilla / non-React web | CSS `@keyframes` w

| React | [motion.dev](https://motion.dev) (the `motion` package) | Tool emits motion.dev code directly. Supports keyframes, springs, scroll-linked, gesture, layout transitions. |

|---|---|---| | **Glass / glassmorphism** | CSS `backdrop-filter` first; reach for library only for refractive/liquid effects | Simple glass (blur + transparency + border) is a handful of CSS properties. Fancy liquid/refractive glass often 

| **Glass / glassmorphism** | CSS `backdrop-filter` first; reach for library only for refractive/liquid effects | Simple glass (blur + transparency + border) is a handful of CSS properties. Fancy liquid/refractive glass often needs WebGL or

| **Confetti / particle bursts** | [`canvas-confetti`](https://github.com/catdad/canvas-confetti), [`react-confetti`](https://github.com/alampros/react-confetti), [`party-js`](https://party.js.org/) | Trying to recreate in keyframes produce

| **Persistent particle systems** | [`tsParticles`](https://particles.js.org/), or `three.js` / `react-three-fiber` for 3D | Backgrounds, snow, embers, etc. Hand-rolled keyframes can't fake volume and depth well. |

| **Scroll-linked motion** | `motion/react`'s `useScroll` + `useTransform`; GSAP `ScrollTrigger` for complex sequences | Scroll-linked requires IntersectionObserver or RAF plumbing. Both listed libraries wrap this correctly including resize

| **Text reveal / typewriter / per-character animation** | [`splitting.js`](https://splitting.js.org/), `motion/react` `<TextReveal>` pattern, `anime.js` text plugins | Hand-rolling per-character animation is fragile (breaks on ligatures, R

| **SVG path morphing** | GSAP `MorphSVGPlugin`, [`flubber`](https://github.com/veltman/flubber), `motion/react` path utilities | Interpolating between arbitrary SVG paths is nontrivial math. Libraries handle point-count mismatch. |

**Fix**: When an animated element renders blank despite a correct opacity animation, inspect the asset bytes (`curl <asset-url>`) and check for hardcoded `opacity` / `transform` on the root group. Either inline the SVG with the static value

- Remove the `<img>` and fetch/inline the SVG markup from the asset URL (`curl <asset-url>`; don't pass the bytes to the Read tool — see the asset rule in SKILL.md).

`https://www.figma.com/file/new?try-tool-resource-content-id=<id>&try-tool-resource-type=<gen_effect|gen_fill>&type=design&mode=design`

2. **Pass Markdown as plain strings.** Never encode it with `Buffer`/base64 or decode it with `atob()`. Base64 is only for image data URLs inside Markdown.

- `![alt](data:image/png;base64,...)` embeds bytes that are decoded and uploaded. - `![alt](https://host/img.png)` is fetched server-side; disallowed hosts are rejected.

- `![alt](https://host/img.png)` is fetched server-side; disallowed hosts are rejected.

- **A leading JSX comment linking to HIG docs**, e.g. `{/* iOS and iPadOS 26 component\nDocs: https://developer.apple.com/design/human-interface-guidelines/buttons */}`. Unambiguous — when present, treat the wrapped component as a system co

The `imgFoo = "https://…/api/mcp/asset/<uuid>"` URLs in the response expire. Download each asset with `curl -L`, add it to the project's asset catalog, and reference it by asset name. Never reference the temporary URLs in app code. If an im

// Set hyperlink textNode.setRangeHyperlink(0, 5, { type: 'URL', value: 'https://figma.com' })

textNode.setRangeHyperlink(0, 5, { type: 'URL', value: 'https://figma.com' })

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

[Credential-related source omitted]

// Documentation links — array of {uri, label} shown as clickable links componentSet.documentationLinks = [   { uri: "https://example.com/docs", label: "Component Docs" }

componentSet.documentationLinks = [   { uri: "https://example.com/docs", label: "Component Docs" } ]

{ uri: "https://example.com/docs", label: "Component Docs" }

// ⚠<U+FE0F> uri MUST be a valid URL (https://...) — relative paths will throw

[Credential-related source omitted]

// CORRECT — import the SVG; createNodeFromSvg returns an editable FrameNode at the SVG's size const icon = figma.createNodeFromSvg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

// CORRECT — import the SVG; createNodeFromSvg returns an editable FrameNode at the SVG's size const icon = figma.createNodeFromSvg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

const icon = figma.createNodeFromSvg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +   '<path d="M12 5v14M19 12l-7 7-7-7" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke

const icon = figma.createNodeFromSvg(   '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +   '<path d="M12 5v14M19 12l-7 7-7-7" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke

'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +

/**  * @see https://developers.figma.com/docs/plugins/api/figma

Executable file

* @see https://developers.figma.com/docs/plugins/api/figma

readonly apiVersion: '1.0.0'   /**    * The currently executing command from the `manifest.json` file. It is the command string in the `ManifestMenuItem` (more details in the [manifest guide](https://developers.figma.com/docs/plugins/manife

/**    * The currently executing command from the `manifest.json` file. It is the command string in the `ManifestMenuItem` (more details in the [manifest guide](https://developers.figma.com/docs/plugins/manifest)). If the plugin does not ha

* The currently executing command from the `manifest.json` file. It is the command string in the `ManifestMenuItem` (more details in the [manifest guide](https://developers.figma.com/docs/plugins/manifest)). If the plugin does not have any 

readonly command: string   /**    * The current editor type this plugin is running in. See also [Setting editor type](https://developers.figma.com/docs/plugins/setting-editor-type).

/**    * The current editor type this plugin is running in. See also [Setting editor type](https://developers.figma.com/docs/plugins/setting-editor-type).    */

* The current editor type this plugin is running in. See also [Setting editor type](https://developers.figma.com/docs/plugins/setting-editor-type).

/**    * The file key of the current file this plugin is running on.    * **Only [private plugins](https://help.figma.com/hc/en-us/articles/4404228629655-Create-private-organization-plugins) and Figma-owned resources (such as the Jira and A

* The file key of the current file this plugin is running on.    * **Only [private plugins](https://help.figma.com/hc/en-us/articles/4404228629655-Create-private-organization-plugins) and Figma-owned resources (such as the Jira and Asana wi

* **Only [private plugins](https://help.figma.com/hc/en-us/articles/4404228629655-Create-private-organization-plugins) and Figma-owned resources (such as the Jira and Asana widgets) have access to this.**

* This property contains methods used to read and set the viewport, the user-visible area of the current page.    *    * Read more in the [viewport section](https://developers.figma.com/docs/plugins/api/figma-viewport).

*    * Read more in the [viewport section](https://developers.figma.com/docs/plugins/api/figma-viewport).    */

* Read more in the [viewport section](https://developers.figma.com/docs/plugins/api/figma-viewport).

* This property contains convenience functions for common operations.    *    * Read more in the [util section](https://developers.figma.com/docs/plugins/api/figma-util).

*    * Read more in the [util section](https://developers.figma.com/docs/plugins/api/figma-util).    */

* Read more in the [util section](https://developers.figma.com/docs/plugins/api/figma-util).

readonly util: UtilAPI   /**    * This property contains methods to handle user inputs when a plugin is launched in query mode. See [Accepting Parameters as Input](https://developers.figma.com/docs/plugins/plugin-parameters) for more detail

/**    * This property contains methods to handle user inputs when a plugin is launched in query mode. See [Accepting Parameters as Input](https://developers.figma.com/docs/plugins/plugin-parameters) for more details.    */

* This property contains methods to handle user inputs when a plugin is launched in query mode. See [Accepting Parameters as Input](https://developers.figma.com/docs/plugins/plugin-parameters) for more details.

* This property contains methods for reading Motion animation styles available in the current document.    *    * Read more in the [Motion section](https://developers.figma.com/docs/plugins/api/figma-motion).

*    * Read more in the [Motion section](https://developers.figma.com/docs/plugins/api/figma-motion).    */

* Read more in the [Motion section](https://developers.figma.com/docs/plugins/api/figma-motion).

* ```    *    * Note: Your plugin never needs to know what the actual value of `figma.mixed` is, only that it is a unique, constant value that can be compared against. That being said, this value returns an object of type `symbol` which is 

*    * Note: Your plugin never needs to know what the actual value of `figma.mixed` is, only that it is a unique, constant value that can be compared against. That being said, this value returns an object of type `symbol` which is a more ad

* Note: Your plugin never needs to know what the actual value of `figma.mixed` is, only that it is a unique, constant value that can be compared against. That being said, this value returns an object of type `symbol` which is a more advance

* @remarks    *    * By default, parented under `figma.currentPage`. Without setting additional properties, the vector has a bounding box but doesn't have any vertices. There are two ways to assign vertices to a vector node - [`vectorPaths`

*    * By default, parented under `figma.currentPage`. Without setting additional properties, the vector has a bounding box but doesn't have any vertices. There are two ways to assign vertices to a vector node - [`vectorPaths`](https://deve

* By default, parented under `figma.currentPage`. Without setting additional properties, the vector has a bounding box but doesn't have any vertices. There are two ways to assign vertices to a vector node - [`vectorPaths`](https://developer

* @remarks    *    * By default, parented under `figma.currentPage`. Without setting additional properties, the text has no characters. You can assign a string, to the [`characters`](https://developers.figma.com/docs/plugins/api/properties/

*    * By default, parented under `figma.currentPage`. Without setting additional properties, the text has no characters. You can assign a string, to the [`characters`](https://developers.figma.com/docs/plugins/api/properties/TextNode-chara

* By default, parented under `figma.currentPage`. Without setting additional properties, the text has no characters. You can assign a string, to the [`characters`](https://developers.figma.com/docs/plugins/api/properties/TextNode-characters

* You can either pass in a hardcoded font, a font loaded via `listAvailableFontsAsync`, or the font stored on an existing text node.    *    * Read more about how to work with fonts, when to load them, and how to load them in the [Working w

*    * Read more about how to work with fonts, when to load them, and how to load them in the [Working with Text](https://developers.figma.com/docs/plugins/working-with-text) page.    *

* Read more about how to work with fonts, when to load them, and how to load them in the [Working with Text](https://developers.figma.com/docs/plugins/working-with-text) page.

* This function only works to load fonts _already accessible in the Figma editor_ available to _plugins_. It does not load fonts from the internet.    *    * Tip: to load multiple fonts at the same time, you may find [Promise.all](https://d

*    * Tip: to load multiple fonts at the same time, you may find [Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) helpful.    *

* Tip: to load multiple fonts at the same time, you may find [Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) helpful.    *    * A common question is whether a plugin needs to be ca

loadFontAsync(fontName: FontNameInput): Promise<void>   /**    * Returns the [OpenType variation axis](https://fonts.google.com/knowledge/glossary/axis_in_variable_fonts) tags a variable font family exposes, or `null` for a static family. T

/**    * Returns the [OpenType variation axis](https://fonts.google.com/knowledge/glossary/axis_in_variable_fonts) tags a variable font family exposes, or `null` for a static family. These are the tags accepted by {@link FontName.variationS

* Returns the [OpenType variation axis](https://fonts.google.com/knowledge/glossary/axis_in_variable_fonts) tags a variable font family exposes, or `null` for a static family. These are the tags accepted by {@link FontName.variationSettings

readonly hasMissingFont: boolean   /**    * Creates a new node from an SVG string. This is equivalent to the SVG import feature in the editor. See the [official documentation on SVG paths](https://www.w3.org/TR/SVG/paths.html) for more deta

/**    * Creates a new node from an SVG string. This is equivalent to the SVG import feature in the editor. See the [official documentation on SVG paths](https://www.w3.org/TR/SVG/paths.html) for more details.    */

* Creates a new node from an SVG string. This is equivalent to the SVG import feature in the editor. See the [official documentation on SVG paths](https://www.w3.org/TR/SVG/paths.html) for more details.

/**    * Creates an `Image` object from the raw bytes of a file content. Note that `Image` objects **are not nodes**. They are handles to images stored by Figma. Frame backgrounds, or fills of shapes (e.g. a rectangle) may contain images.  

* Creates an `Image` object from the raw bytes of a file content. Note that `Image` objects **are not nodes**. They are handles to images stored by Figma. Frame backgrounds, or fills of shapes (e.g. a rectangle) may contain images.    * [Ex

* [Example: how to work with images](https://developers.figma.com/docs/plugins/working-with-images).

} /**  * @see https://developers.figma.com/docs/plugins/api/figma-variables

/**  * @see https://developers.figma.com/docs/plugins/api/figma-variables  */

* @see https://developers.figma.com/docs/plugins/api/figma-variables

} /**  * @see https://developers.figma.com/docs/plugins/api/figma-annotations

/**  * @see https://developers.figma.com/docs/plugins/api/figma-annotations  */

* @see https://developers.figma.com/docs/plugins/api/figma-annotations

} /**  * @see https://developers.figma.com/docs/plugins/api/figma-teamlibrary

/**  * @see https://developers.figma.com/docs/plugins/api/figma-teamlibrary  */

* @see https://developers.figma.com/docs/plugins/api/figma-teamlibrary

* The Motion API is available in Beta. This API is subject to change.  *  * @see https://developers.figma.com/docs/plugins/api/figma-motion

*  * @see https://developers.figma.com/docs/plugins/api/figma-motion  */

* @see https://developers.figma.com/docs/plugins/api/figma-motion

} /**  * @see https://developers.figma.com/docs/plugins/api/figma-util

/**  * @see https://developers.figma.com/docs/plugins/api/figma-util  */

* @see https://developers.figma.com/docs/plugins/api/figma-util

} /**  * @see https://developers.figma.com/docs/plugins/api/figma-viewport

/**  * @see https://developers.figma.com/docs/plugins/api/figma-viewport  */

* @see https://developers.figma.com/docs/plugins/api/figma-viewport

} /**  * @see https://developers.figma.com/docs/plugins/api/figma-parameters

/**  * @see https://developers.figma.com/docs/plugins/api/figma-parameters  */

* @see https://developers.figma.com/docs/plugins/api/figma-parameters

* make the first item in the array passed to `setSuggestions` simply be the string in `query`.    *    * For a full example of what this can look like, see the [Resizer sample plugin](https://github.com/figma/plugin-samples/blob/master/resi

*    * For a full example of what this can look like, see the [Resizer sample plugin](https://github.com/figma/plugin-samples/blob/master/resizer/code.ts)    */

* For a full example of what this can look like, see the [Resizer sample plugin](https://github.com/figma/plugin-samples/blob/master/resizer/code.ts)

} /**  * @see https://developers.figma.com/docs/plugins/api/figma-parameters

/**  * @see https://developers.figma.com/docs/plugins/api/figma-parameters  */

* @see https://developers.figma.com/docs/plugins/api/figma-parameters

interface ParametersAPI {} /**  * @see https://developers.figma.com/docs/plugins/api/NodeChangeProperty

/**  * @see https://developers.figma.com/docs/plugins/api/NodeChangeProperty  */

* @see https://developers.figma.com/docs/plugins/api/NodeChangeProperty

} /**  * @see https://developers.figma.com/docs/plugins/api/RGB

/**  * @see https://developers.figma.com/docs/plugins/api/RGB  */

* @see https://developers.figma.com/docs/plugins/api/RGB

} /**  * @see https://developers.figma.com/docs/plugins/api/RGB

/**  * @see https://developers.figma.com/docs/plugins/api/RGB  */

* @see https://developers.figma.com/docs/plugins/api/RGB

} /**  * @see https://developers.figma.com/docs/plugins/api/FontName

/**  * @see https://developers.figma.com/docs/plugins/api/FontName  *

* @see https://developers.figma.com/docs/plugins/api/FontName

* @remarks  *  * Reads always include `family` and `style`. For [variable fonts](https://fonts.google.com/knowledge/glossary/variable_fonts), they also include {@link FontName.variationSettings} with every axis the family defines. Static fo

*  * Reads always include `family` and `style`. For [variable fonts](https://fonts.google.com/knowledge/glossary/variable_fonts), they also include {@link FontName.variationSettings} with every axis the family defines. Static fonts omit `va

* Reads always include `family` and `style`. For [variable fonts](https://fonts.google.com/knowledge/glossary/variable_fonts), they also include {@link FontName.variationSettings} with every axis the family defines. Static fonts omit `varia

} /**  * @see https://developers.figma.com/docs/plugins/api/FontName

/**  * @see https://developers.figma.com/docs/plugins/api/FontName  *

* @see https://developers.figma.com/docs/plugins/api/FontName

*  * Variable font axis values keyed by [OpenType variation axis](https://fonts.google.com/knowledge/glossary/axis_in_variable_fonts) tag, mirroring the CSS `font-variation-settings` property. A tag is always four ASCII characters.  */

* Variable font axis values keyed by [OpenType variation axis](https://fonts.google.com/knowledge/glossary/axis_in_variable_fonts) tag, mirroring the CSS `font-variation-settings` property. A tag is always four ASCII characters.

} /**  * @see https://developers.figma.com/docs/plugins/api/FontName

/**  * @see https://developers.figma.com/docs/plugins/api/FontName  *

* @see https://developers.figma.com/docs/plugins/api/FontName

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

type BlurEffect = BlurEffectNormal | BlurEffectProgressive /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

type NoiseEffect = NoiseEffectMonotone | NoiseEffectDuotone | NoiseEffectMultitone /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

* A shader applied to a node's `effects`.  *  * @see https://developers.figma.com/docs/plugins/api/Effect

*  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

} /**  * @see https://developers.figma.com/docs/plugins/api/Effect

/**  * @see https://developers.figma.com/docs/plugins/api/Effect  */

* @see https://developers.figma.com/docs/plugins/api/Effect

| ShaderEffect /**  * @see https://developers.figma.com/docs/plugins/api/Constraints

/**  * @see https://developers.figma.com/docs/plugins/api/Constraints  */

* @see https://developers.figma.com/docs/plugins/api/Constraints

type ConstraintType = 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'SCALE' /**  * @see https://developers.figma.com/docs/plugins/api/Constraints

/**  * @see https://developers.figma.com/docs/plugins/api/Constraints  */

* @see https://developers.figma.com/docs/plugins/api/Constraints

} /**  * @see https://developers.figma.com/docs/plugins/api/Paint

/**  * @see https://developers.figma.com/docs/plugins/api/Paint  */

* @see https://developers.figma.com/docs/plugins/api/Paint

} /**  * @see https://developers.figma.com/docs/plugins/api/Paint

/**  * @see https://developers.figma.com/docs/plugins/api/Paint  */

* @see https://developers.figma.com/docs/plugins/api/Paint

} /**  * @see https://developers.figma.com/docs/plugins/api/Paint

/**  * @see https://developers.figma.com/docs/plugins/api/Paint  */

* @see https://developers.figma.com/docs/plugins/api/Paint

} /**  * @see https://developers.figma.com/docs/plugins/api/Paint

/**  * @see https://developers.figma.com/docs/plugins/api/Paint  */

* @see https://developers.figma.com/docs/plugins/api/Paint

} /**  * @see https://developers.figma.com/docs/plugins/api/Paint

/**  * @see https://developers.figma.com/docs/plugins/api/Paint  */

* @see https://developers.figma.com/docs/plugins/api/Paint

} /**  * @see https://developers.figma.com/docs/plugins/api/Paint

/**  * @see https://developers.figma.com/docs/plugins/api/Paint  */

* @see https://developers.figma.com/docs/plugins/api/Paint

} /**  * @see https://developers.figma.com/docs/plugins/api/Paint

/**  * @see https://developers.figma.com/docs/plugins/api/Paint  */

* @see https://developers.figma.com/docs/plugins/api/Paint

* A shader applied to a node's `fills` or `strokes`.  *  * @see https://developers.figma.com/docs/plugins/api/Paint

*  * @see https://developers.figma.com/docs/plugins/api/Paint  */

* @see https://developers.figma.com/docs/plugins/api/Paint

} /**  * @see https://developers.figma.com/docs/plugins/api/Paint

/**  * @see https://developers.figma.com/docs/plugins/api/Paint  */

* @see https://developers.figma.com/docs/plugins/api/Paint

* A single value assignable to a shader property, read from or written to the `properties` map of a {@link ShaderEffect} or {@link ShaderPaint}. The shape that's valid for a given property depends on that property's declared `type` in its {

*  * @see https://developers.figma.com/docs/plugins/api/Shader  */

* @see https://developers.figma.com/docs/plugins/api/Shader

* A read-only description of one property declared by a shader. Surfaced via the `propertyDefinitions` field of a {@link Shader}, keyed by property-definition id.  *  * @see https://developers.figma.com/docs/plugins/api/Shader

*  * @see https://developers.figma.com/docs/plugins/api/Shader  */

* @see https://developers.figma.com/docs/plugins/api/Shader

* A shader available to the current file, as returned by {@link PluginAPI.listAvailableShaders} and {@link PluginAPI.importShaderById}.  *  * @see https://developers.figma.com/docs/plugins/api/Shader

*  * @see https://developers.figma.com/docs/plugins/api/Shader  */

* @see https://developers.figma.com/docs/plugins/api/Shader

} /**  * @see https://developers.figma.com/docs/plugins/api/LayoutGrid

/**  * @see https://developers.figma.com/docs/plugins/api/LayoutGrid  */

* @see https://developers.figma.com/docs/plugins/api/LayoutGrid

} /**  * @see https://developers.figma.com/docs/plugins/api/LayoutGrid

/**  * @see https://developers.figma.com/docs/plugins/api/LayoutGrid  */

* @see https://developers.figma.com/docs/plugins/api/LayoutGrid

} /**  * @see https://developers.figma.com/docs/plugins/api/LayoutGrid

/**  * @see https://developers.figma.com/docs/plugins/api/LayoutGrid  */

* @see https://developers.figma.com/docs/plugins/api/LayoutGrid

type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid /**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings

/**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings  */

* @see https://developers.figma.com/docs/plugins/api/ExportSettings

} /**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings

/**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings  */

* @see https://developers.figma.com/docs/plugins/api/ExportSettings

*    * - `"DOCUMENT"`: Use the color profile of {@link DocumentNode.documentColorProfile}.    * - `"SRGB"`: Use sRGB colors. This was the previous behavior of Figma before [color management](https://help.figma.com/hc/en-us/articles/36003982

* - `"DOCUMENT"`: Use the color profile of {@link DocumentNode.documentColorProfile}.    * - `"SRGB"`: Use sRGB colors. This was the previous behavior of Figma before [color management](https://help.figma.com/hc/en-us/articles/360039825114)

* - `"SRGB"`: Use sRGB colors. This was the previous behavior of Figma before [color management](https://help.figma.com/hc/en-us/articles/360039825114).

} /**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings

/**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings  */

* @see https://developers.figma.com/docs/plugins/api/ExportSettings

} /**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings

/**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings  */

* @see https://developers.figma.com/docs/plugins/api/ExportSettings

} /**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings

/**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings  */

* @see https://developers.figma.com/docs/plugins/api/ExportSettings

} /**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings

/**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings  */

* @see https://developers.figma.com/docs/plugins/api/ExportSettings

interface ExportSettingsREST {   /**    * Returns the equivalent REST API response of hitting the endpoint `https://api.figma.com/v1/files/:file_key/nodes?ids=:id`.

/**    * Returns the equivalent REST API response of hitting the endpoint `https://api.figma.com/v1/files/:file_key/nodes?ids=:id`.    *

* Returns the equivalent REST API response of hitting the endpoint `https://api.figma.com/v1/files/:file_key/nodes?ids=:id`.

* ```    *    * For more information on the shape of the output of the 'JSON_REST_V1' format, see the [files](https://developers.figma.com/docs/rest-api/files) documentation.

*    * For more information on the shape of the output of the 'JSON_REST_V1' format, see the [files](https://developers.figma.com/docs/rest-api/files) documentation.    */

* For more information on the shape of the output of the 'JSON_REST_V1' format, see the [files](https://developers.figma.com/docs/rest-api/files) documentation.

} /**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings

/**  * @see https://developers.figma.com/docs/plugins/api/ExportSettings  */

* @see https://developers.figma.com/docs/plugins/api/ExportSettings

type ExportSettings = ExportSettingsImage | ExportSettingsSVG | ExportSettingsPDF /**  * @see https://developers.figma.com/docs/plugins/api/properties/VectorPath-windingrule

/**  * @see https://developers.figma.com/docs/plugins/api/properties/VectorPath-windingrule  */

* @see https://developers.figma.com/docs/plugins/api/properties/VectorPath-windingrule

type WindingRule = 'NONZERO' | 'EVENODD' /**  * @see https://developers.figma.com/docs/plugins/api/VectorNetwork

/**  * @see https://developers.figma.com/docs/plugins/api/VectorNetwork  */

* @see https://developers.figma.com/docs/plugins/api/VectorNetwork

} /**  * @see https://developers.figma.com/docs/plugins/api/VectorNetwork

/**  * @see https://developers.figma.com/docs/plugins/api/VectorNetwork  */

* @see https://developers.figma.com/docs/plugins/api/VectorNetwork

} /**  * @see https://developers.figma.com/docs/plugins/api/VectorNetwork

/**  * @see https://developers.figma.com/docs/plugins/api/VectorNetwork  */

* @see https://developers.figma.com/docs/plugins/api/VectorNetwork

} /**  * @see https://developers.figma.com/docs/plugins/api/VectorNetwork

/**  * @see https://developers.figma.com/docs/plugins/api/VectorNetwork  */

* @see https://developers.figma.com/docs/plugins/api/VectorNetwork

} /**  * @see https://developers.figma.com/docs/plugins/api/VectorPath

/**  * @see https://developers.figma.com/docs/plugins/api/VectorPath  */

* @see https://developers.figma.com/docs/plugins/api/VectorPath

* ```    *    * Winding rules work off a concept called the winding number, which tells you for a given point how many times the path winds around that point. This is described in much more detail [here](https://oreillymedia.github.io/Using

*    * Winding rules work off a concept called the winding number, which tells you for a given point how many times the path winds around that point. This is described in much more detail [here](https://oreillymedia.github.io/Using_SVG/extr

* Winding rules work off a concept called the winding number, which tells you for a given point how many times the path winds around that point. This is described in much more detail [here](https://oreillymedia.github.io/Using_SVG/extras/ch

} /**  * @see https://developers.figma.com/docs/plugins/api/VectorPath

/**  * @see https://developers.figma.com/docs/plugins/api/VectorPath  */

* @see https://developers.figma.com/docs/plugins/api/VectorPath

type LeadingTrim = 'CAP_HEIGHT' | 'NONE' /**  * @see https://developers.figma.com/docs/plugins/api/TextWrapStyle

/**  * @see https://developers.figma.com/docs/plugins/api/TextWrapStyle  */

* @see https://developers.figma.com/docs/plugins/api/TextWrapStyle

} /**  * @see https://developers.figma.com/docs/plugins/api/TextListOptions

/**  * @see https://developers.figma.com/docs/plugins/api/TextListOptions  */

* @see https://developers.figma.com/docs/plugins/api/TextListOptions

type MaskType = 'ALPHA' | 'VECTOR' | 'LUMINANCE' /**  * @see https://developers.figma.com/docs/plugins/api/FontName

/**  * @see https://developers.figma.com/docs/plugins/api/FontName  */

* @see https://developers.figma.com/docs/plugins/api/FontName

} /**  * @see https://developers.figma.com/docs/plugins/api/TextStyleOverrides

/**  * @see https://developers.figma.com/docs/plugins/api/TextStyleOverrides  */

* @see https://developers.figma.com/docs/plugins/api/TextStyleOverrides

fontSize: number   /**    * The font family (e.g. `"Inter"`), font style (e.g. `"Regular"`). For [variable fonts](https://developers.figma.com/docs/plugins/api/FontName), also {@link FontName.variationSettings}.

/**    * The font family (e.g. `"Inter"`), font style (e.g. `"Regular"`). For [variable fonts](https://developers.figma.com/docs/plugins/api/FontName), also {@link FontName.variationSettings}.    */

* The font family (e.g. `"Inter"`), font style (e.g. `"Regular"`). For [variable fonts](https://developers.figma.com/docs/plugins/api/FontName), also {@link FontName.variationSettings}.

} /**  * @see https://developers.figma.com/docs/plugins/api/TextPathStartData

/**  * @see https://developers.figma.com/docs/plugins/api/TextPathStartData  *

* @see https://developers.figma.com/docs/plugins/api/TextPathStartData

} /**  * @see https://developers.figma.com/docs/plugins/api/Action

/**  * @see https://developers.figma.com/docs/plugins/api/Action  */

* @see https://developers.figma.com/docs/plugins/api/Action

} /**  * @see https://developers.figma.com/docs/plugins/api/Transition

/**  * @see https://developers.figma.com/docs/plugins/api/Transition  */

* @see https://developers.figma.com/docs/plugins/api/Transition

} /**  * @see https://developers.figma.com/docs/plugins/api/Transition

/**  * @see https://developers.figma.com/docs/plugins/api/Transition  */

* @see https://developers.figma.com/docs/plugins/api/Transition

} /**  * @see https://developers.figma.com/docs/plugins/api/Transition

/**  * @see https://developers.figma.com/docs/plugins/api/Transition  */

* @see https://developers.figma.com/docs/plugins/api/Transition

} /**  * @see https://developers.figma.com/docs/plugins/api/Action

/**  * @see https://developers.figma.com/docs/plugins/api/Action  */

* @see https://developers.figma.com/docs/plugins/api/Action

type Navigation = 'NAVIGATE' | 'SWAP' | 'OVERLAY' | 'SCROLL_TO' | 'CHANGE_TO' /**  * @see https://developers.figma.com/docs/plugins/api/Transition

/**  * @see https://developers.figma.com/docs/plugins/api/Transition  */

* @see https://developers.figma.com/docs/plugins/api/Transition

} /**  * @see https://developers.figma.com/docs/plugins/api/Transition

/**  * @see https://developers.figma.com/docs/plugins/api/Transition  */

* @see https://developers.figma.com/docs/plugins/api/Transition

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

type AnimationStylePropValue = string | number | boolean | MotionEasing | VariableAlias /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

type AvailableAnimationStylePropValue = string /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

FigmaAnimationStyleConfiguration | CustomAnimationStyleConfiguration /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

* `style.animationEntries` and created by `style.addAnimationEntryAsync()`.  *  * @see https://developers.figma.com/docs/plugins/api/Motion

*  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

type AnimationEntry = AppliedFigmaAnimationStyle /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

| 'PATH_TRIM_END' /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

| 'SECONDARY_COLOR' /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

type ComponentPropKeyframeTracks = Partial<Record<string, ManualKeyframeBinding>> /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

type ComponentPropKeyframeBindings = Partial<Record<string, KeyframeBinding>> /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

} /**  * @see https://developers.figma.com/docs/plugins/api/Motion

/**  * @see https://developers.figma.com/docs/plugins/api/Motion  */

* @see https://developers.figma.com/docs/plugins/api/Motion

type OverflowDirection = 'NONE' | 'HORIZONTAL' | 'VERTICAL' | 'BOTH' /**  * @see https://developers.figma.com/docs/plugins/api/Overlay

/**  * @see https://developers.figma.com/docs/plugins/api/Overlay  */

* @see https://developers.figma.com/docs/plugins/api/Overlay

| 'MANUAL' /**  * @see https://developers.figma.com/docs/plugins/api/Overlay

/**  * @see https://developers.figma.com/docs/plugins/api/Overlay  */

* @see https://developers.figma.com/docs/plugins/api/Overlay

} /**  * @see https://developers.figma.com/docs/plugins/api/Overlay

/**  * @see https://developers.figma.com/docs/plugins/api/Overlay  */

* @see https://developers.figma.com/docs/plugins/api/Overlay

type OverlayBackgroundInteraction = 'NONE' | 'CLOSE_ON_CLICK_OUTSIDE' /**  * @see https://developers.figma.com/docs/plugins/api/PublishStatus

/**  * @see https://developers.figma.com/docs/plugins/api/PublishStatus  */

* @see https://developers.figma.com/docs/plugins/api/PublishStatus

} /**  * @see https://developers.figma.com/docs/plugins/api/ConnectorEndpoint

/**  * @see https://developers.figma.com/docs/plugins/api/ConnectorEndpoint  */

* @see https://developers.figma.com/docs/plugins/api/ConnectorEndpoint

| ConnectorEndpointPositionAndEndpointNodeId /**  * @see https://developers.figma.com/docs/plugins/api/ConnectorStrokeCap

/**  * @see https://developers.figma.com/docs/plugins/api/ConnectorStrokeCap  */

* @see https://developers.figma.com/docs/plugins/api/ConnectorStrokeCap

| 'ERD_MANY' /**  * @see https://developers.figma.com/docs/plugins/api/node-properties

/**  * @see https://developers.figma.com/docs/plugins/api/node-properties  */

* @see https://developers.figma.com/docs/plugins/api/node-properties

* Returns true if Figma detects that a node is an asset, otherwise returns false. An asset is is either an icon or a raster image.    *    * This property is useful if you're building a [plugin for code generation](https://developers.figma.

*    * This property is useful if you're building a [plugin for code generation](https://developers.figma.com/docs/plugins/codegen-plugins).    *

* This property is useful if you're building a [plugin for code generation](https://developers.figma.com/docs/plugins/codegen-plugins).

readonly isAsset: boolean   /**    * Resolves to a JSON object of CSS properties of the node. This is the same CSS that Figma shows in the inspect panel and is helpful if you are building a [plugin for code generation](https://developers.fi

/**    * Resolves to a JSON object of CSS properties of the node. This is the same CSS that Figma shows in the inspect panel and is helpful if you are building a [plugin for code generation](https://developers.figma.com/docs/plugins/codegen

* Resolves to a JSON object of CSS properties of the node. This is the same CSS that Figma shows in the inspect panel and is helpful if you are building a [plugin for code generation](https://developers.figma.com/docs/plugins/codegen-plugin

} /**  * @see https://developers.figma.com/docs/plugins/api/node-properties

/**  * @see https://developers.figma.com/docs/plugins/api/node-properties  */

* @see https://developers.figma.com/docs/plugins/api/node-properties

} /**  * @see https://developers.figma.com/docs/plugins/api/node-properties

/**  * @see https://developers.figma.com/docs/plugins/api/node-properties  */

* @see https://developers.figma.com/docs/plugins/api/node-properties

| null   /**    * The variables bound to a particular field on this node. Please see the [Working with Variables](https://developers.figma.com/docs/plugins/working-with-variables) guide for how to get and set variable bindings.

/**    * The variables bound to a particular field on this node. Please see the [Working with Variables](https://developers.figma.com/docs/plugins/working-with-variables) guide for how to get and set variable bindings.    *

* The variables bound to a particular field on this node. Please see the [Working with Variables](https://developers.figma.com/docs/plugins/working-with-variables) guide for how to get and set variable bindings.

}   /**    * Binds the provided `field` on this node to the given variable. Please see the [Working with Variables](https://developers.figma.com/docs/plugins/working-with-variables) guide for how to get and set variable bindings.

/**    * Binds the provided `field` on this node to the given variable. Please see the [Working with Variables](https://developers.figma.com/docs/plugins/working-with-variables) guide for how to get and set variable bindings.    *

* Binds the provided `field` on this node to the given variable. Please see the [Working with Variables](https://developers.figma.com/docs/plugins/working-with-variables) guide for how to get and set variable bindings.

* @remarks    *    * Inferred variables are only returned for a field when it is not using a [bound variable](https://developers.figma.com/docs/plugins/api/node-properties#boundvariables).

*    * Inferred variables are only returned for a field when it is not using a [bound variable](https://developers.figma.com/docs/plugins/api/node-properties#boundvariables).    *

* Inferred variables are only returned for a field when it is not using a [bound variable](https://developers.figma.com/docs/plugins/api/node-properties#boundvariables).

* @remarks    *    * The set of resolved modes on a node includes the explicitly set modes on the node, as well as the explicitly set modes on ancestors of the node. By default, nodes [automatically inherit](https://help.figma.com/hc/en-us/

*    * The set of resolved modes on a node includes the explicitly set modes on the node, as well as the explicitly set modes on ancestors of the node. By default, nodes [automatically inherit](https://help.figma.com/hc/en-us/articles/15343

* The set of resolved modes on a node includes the explicitly set modes on the node, as well as the explicitly set modes on ancestors of the node. By default, nodes [automatically inherit](https://help.figma.com/hc/en-us/articles/1534381606

* Motion node properties and methods are available in Beta. This API is subject to change.  *  * @see https://developers.figma.com/docs/plugins/api/node-properties

*  * @see https://developers.figma.com/docs/plugins/api/node-properties  */

* @see https://developers.figma.com/docs/plugins/api/node-properties

type VariableBindableComponentPropertyDefinitionField = 'defaultValue' /**  * @see https://developers.figma.com/docs/plugins/api/node-properties

/**  * @see https://developers.figma.com/docs/plugins/api/node-properties  */

* @see https://developers.figma.com/docs/plugins/api/node-properties

} /**  * @see https://developers.figma.com/docs/plugins/api/node-properties

/**  * @see https://developers.figma.com/docs/plugins/api/node-properties  */

* @see https://developers.figma.com/docs/plugins/api/node-properties

* Prefer {@link ChildrenMixin.findAllWithCriteria} when you know the target node types, and use {@link ChildrenMixin.findAll} when you need callback-based logic.    *    * Note: If you are curious, the reason why inserting children has to b

*    * Note: If you are curious, the reason why inserting children has to be done via API calls is because our internal representation for the layer tree uses [fractional indexing](https://www.figma.com/blog/multiplayer-editing-in-figma/) a

* Note: If you are curious, the reason why inserting children has to be done via API calls is because our internal representation for the layer tree uses [fractional indexing](https://www.figma.com/blog/multiplayer-editing-in-figma/) and {@

* Nodes are included in **back-to-front** order. Parents always appear before their children, and children appear in same relative order before their children, and children appear in same relative order as in the {@link ChildrenMixin.childr

*    * This traversal method is known as ["pre-order traversal"](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order_(NLR)).    *

* This traversal method is known as ["pre-order traversal"](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order_(NLR)).

* Caution: ⚠ Large documents in Figma can have tens of thousands of nodes. Be careful using this function as it could be very slow.    * If you only need to search immediate children, it is much faster to call `node.children.filter(callback

* If you only need to search immediate children, it is much faster to call `node.children.filter(callback)` or `node.findChildren(callback)`.    * Please refer to our [recommendations](https://developers.figma.com/docs/plugins/accessing-doc

* Please refer to our [recommendations](https://developers.figma.com/docs/plugins/accessing-document#full-document-traversal) for how to optimize document traversals.

* Caution: ⚠ Large documents in Figma can have tens of thousands of nodes. Be careful using this function as it could be very slow.    * If you only need to search immediate children, it is much faster to call `node.children.find(callback)`

* If you only need to search immediate children, it is much faster to call `node.children.find(callback)` or `node.findChild(callback)`.    * Please refer to our [recommendations](https://developers.figma.com/docs/plugins/accessing-document

* Please refer to our [recommendations](https://developers.figma.com/docs/plugins/accessing-document#full-document-traversal) for how to optimize document traversals.

* This is a faster but more limited search compared to {@link ChildrenMixin.findAll}, which lets you search nodes based on any logic you can include in a callback.    *    * When paired with [`figma.skipInvisibleInstanceChildren = true`](ht

*    * When paired with [`figma.skipInvisibleInstanceChildren = true`](https://developers.figma.com/docs/plugins/api/properties/figma-skipinvisibleinstancechildren), this method can be hundreds of times faster in large documents with tens o

* When paired with [`figma.skipInvisibleInstanceChildren = true`](https://developers.figma.com/docs/plugins/api/properties/figma-skipinvisibleinstancechildren), this method can be hundreds of times faster in large documents with tens of tho

* Nodes are included in **back-to-front** order, which is the same order as in {@link ChildrenMixin.findAll}. Parents always appear before their children, and children appear in same relative order before their children, and children appear

*    * This traversal method is known as ["pre-order traversal"](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order_(NLR)).    *

* This traversal method is known as ["pre-order traversal"](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order_(NLR)).

} /**  * @see https://developers.figma.com/docs/plugins/api/node-properties

/**  * @see https://developers.figma.com/docs/plugins/api/node-properties  */

* @see https://developers.figma.com/docs/plugins/api/node-properties

} /**  * @see https://developers.figma.com/docs/plugins/api/node-properties

/**  * @see https://developers.figma.com/docs/plugins/api/node-properties  */

* @see https://developers.figma.com/docs/plugins/api/node-properties

} /**  * @see https://developers.figma.com/docs/plugins/api/node-properties

/**  * @see https://developers.figma.com/docs/plugins/api/node-properties  */

* @see https://developers.figma.com/docs/plugins/api/node-properties

* This function will not cause its children to resize. Use {@link LayoutMixin.resize} if you need to apply constraints.    *    * Caution: ⚠<U+FE0F> If this node is a text node with a missing font, the text node will be resized but the text will n

*    * Caution: ⚠<U+FE0F> If this node is a text node with a missing font, the text node will be resized but the text will not re-layout until the next time the text node is opened on a machine that _has_ the font. This can cause the text node to 

* Caution: ⚠<U+FE0F> If this node is a text node with a missing font, the text node will be resized but the text will not re-layout until the next time the text node is opened on a machine that _has_ the font. This can cause the text node to re-la

} /**  * @see https://developers.figma.com/docs/plugins/api/node-properties

/**  * @see https://developers.figma.com/docs/plugins/api/node-properties  */

* @see https://developers.figma.com/docs/plugins/api/node-properties

* const image = await figma.createNodeFromJSXAsync(    *   <figma.widget.Image    *     src="https://picsum.photos/200/300"