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

New:

• Add detachedInfo to detached instances to indicate if a node is detached from the main component, and to identify its original main component.
• Add figma.constants.colors, which maps color palette names to ColorPalette. We provide figJamBase and figJamBaseLight, a set of official FigJam colors.
• Each Reaction object has an actions array replacing the existing action property for executing multiple actions on the same trigger
• The Action object supports two new action types:
  • "SET_VARIABLE" for modifying the value of a variable based on a static value, another variable, or an expression
  • "CONDITIONAL" for checking if a condition is met before performing an action
  • For a general guide on using the new action types, see the updated guide for the Action object.

See the reactions property page for more details and code samples.

Notice of breaking change:

This update fixes a bug with the optional networkAccess key in the plugin manifest. Previously, we had an error where we would treat local worker scripts as well as blob: URLs as external resources. If you were affected by this, you can now update your networkAccess field.

New:

• Figma will now return inferred variables when there are variables in the file that match the raw values used in your design.
• Add openTypeFeatures property for text nodes to expose OpenType features that have been explicitly enabled or disabled.