New:

• Add a figma.createComponentFromNode function to create a component from an existing node, preserving all of its properties and children.

New:

• Measurements can be added to pin distances between nodes in Dev Mode. See Measurement.
• Private beta only: annotations can be set on nodes to leave notes and pin properties in Dev Mode. See Annotation. More details on the public beta release of these APIs will be announced soon.

• null is now supported for the variable field in setBoundVariableForPaint, setBoundVariableForEffect, and setBoundVariableForLayoutGrid. Passing in null will detach the bound variables.

• For plugins that can run in VSCode, we now recommend replacing alert() and confirm() dialogs in the plugin UI with custom UI, since VS Code blocks native dialogs. The Working in Dev Mode page is updated accordingly.

Updates:

• Plugins can now view and set explicit modes for each variable collection on PageNodes.
• The BaseStyle type is now defined as a union of all possible derived style interfaces, such as PaintStyle and GridStyle. This allows you to use type narrowing on the the type property to go from an instance of BaseStyle to a child style type.
• Updated the color token values in the CSS Variables and Theming page for the “Figma Design: Light” and “Figma Design: Dark” modes to reflect recent formatting changes to token values injected into the plugin iframe (rgba() values were changed to #rrggbbaa format).
• Variables can now be bound to Effect and Layout Grid styles. On a selection, variables bound to a given style are populated in boundVariables keyed by style type (effects or layoutGrids).

This update includes changes to the Variables API to support binding variables to effects, layout grids, stroke weights, and layer opacity. We are also releasing support to run Dev Mode plugins in the Figma for VS Code extension.

Changes to the Variables API:

• FLOAT and COLOR variables can be bound to Effects via the setBoundVariablesForEffect() helper.
• FLOAT variables can be bound to LayoutGrids via the setBoundVariablesForLayoutGrid() helper.
• New VariableBindableNodeField types, FLOAT variables can be bound to layer opacity, stroke weights, and individual stroke weights.
• New VariableScope types for scoping variables to layer opacity, stroke weights, and effects.

Dev Mode plugins can now run in the Figma for VS Code extension with some minor manifest and code changes:

• manifest.json changes - added new vscode capability
• figma.vscode - this new namespace allows the plugin to determine whether it's running in the VS Code Extension or not.
• figma.openExternal - this API enables opening a URL externally and is necessary to use in the VS Code Extension.
• See all of the details in Dev Mode Plugins in VS Code

Fixes:

• fillGeometry and strokeGeometry properties are correctly marked as readonly

New:

• We are introducing NEGATE as a Prototyping ExpressionFunction type!

New:

• Plugins are now able to explicitly unbind variables from nodes. See setBoundVariable.
• variableIds are now returned in a similar order to the Figma Design UI. See VariableCollection#variableIds
• Adds ability to set and query pluginData on Variable and Variable Collection nodes.
• Adds textRangeFills to the boundVariables structure. This will be populated on text nodes which have color variables bound to substrings.
• Plugins/widgets that touch straight connectors and set endpoint magnets other than CENTER or NONE will now error in development. Please update your code to use the CENTER or NONE magnets for straight connectors before 2024. See Version 1, Update 79 for more details.
• Added support for the devStatus field on Frames, Components, Component Sets, and Instances.

The Plugin API runtime has been updated to ensure proper usage of figma.showUI.

It is unsafe to call figma.showUI within an event handler for the figma.codegen.on("generate") event. In development, figma.showUI will now throw an error when called as a result of a figma.codegen.on("generate")

If you need to trigger code inside an iframe as the result of a generate callback, you should instead move the call to showUI outside of the event handler and use figma.ui.postMessage to communicate with the iframe from within the callback. This will ensure that your plugin can to handle concurrent generate events. Here's a code example for how to do this.

We're introducing an improved way to attach straight connectors to nodes in FigJam with a new CENTER magnet. Starting in 2024, straight connectors will only be able to attach to CENTER and NONE magnets. The magnets for elbowed connectors will remain unchanged.

Notice of breaking change:

New

• Add better documentation for resolving variable values. See resolveForConsumer and resolvedVariableNodes
• Add support for localhost in the manifest networkAccess allowedDomains field. See manifest networkAccess docs.
• Add the maskType property. For nodes that are used as masks (where node.isMask == true), maskType can be used to get/modify the masking type used (alpha, vector, or luminance) for the mask operation.