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.

The Variable object has been extended with with the ability to read and define a variable's code syntax field. Code syntax allows you to represent design variables in code using custom, syntactically correct variable names to support a seamless handoff experience. It can be configured for different contexts, including CSS, SwiftUI, and Compose. A variable's code syntax will appear in Dev Mode's code snippets when inspecting elements using the variable.

New:

• Variable.codeSyntax describes the current code syntax of a variable.
• Variable.setVariableCodeSyntax and Variable.removeVariableCodeSyntax let you modify the the codeSyntax field.

This update contains a small change for users of the Variables API public beta.

When getting or assigning elements to the Variable.scopes array, please update your code to use 'STROKE_COLOR' instead of 'STROKE'. The meaning is the same. The value 'STROKE' is deprecated and will no longer be supported in our type definitions.

For a full list of possible values, see VariableScope.

Color management is now supported within Figma! This version introduces properties for the color profiles of documents and exports.

New:

• Read-only access to the document's color profile.
• Read/write access to colorProfile for ExportSettings.

This version introduces utility functions that allow you to set color properties using a variety of familiar encodings, including CSS hex strings and rgb()/hsl()-style function strings. The new functions include:

• figma.util.rgb(): converts a color encoding into an RGB object.
• figma.util.rgba(): converts a color encoding into an RGBA object.
• figma.util.solidPaint(): converts a color encoding into a SolidPaint object.

Examples:

const paint = {
  type: 'SOLID',
  color: figma.util.rgb('#FF0')
}
const layoutGrid = {
  pattern: 'GRID',
  sectionSize: 1,
  color: figma.util.rgba('rgb(25% 25% 25%)')
}

You can alias these functions for more concise code:

const rgb = figma.util.rgb
const rgba = figma.util.rgba

const paint = {
  type: 'SOLID',
  color: rgb('#FF0')
}
const layoutGrid = {
  pattern: 'GRID',
  sectionSize: 1,
  color: rgba('rgb(25% 25% 25%)')
}

A common use case is to set a node fill. Use the figma.util.solidPaint() function when you want to update the color of a fill while preserving other properties of the fill object:

if (node.fills[0].type === 'SOLID') {
  node.fills = [
    // Merge the original fill with a new color and opacity
    figma.util.solidPaint("#FF00FF88", node.fills[0])
  ]
}

Other changes in this version:

• Add new assignable values for ShapeWithTextNode.shapeTypes: TRAPEZOID, PREDEFINED_PROCESS, SHIELD, DOCUMENT_SINGLE, DOCUMENT_MULTIPLE, MANUAL_INPUT, HEXAGON, CHEVRON, PENTAGON, OCTAGON, STAR, PLUS, ARROW_LEFT, ARROW_RIGHT, SUMMING_JUNCTION, OR, SPEECH_BUBBLE, INTERNAL_STORAGE

New:

• node.findAllWithCriteria now supports searching by pluginData as well as sharedPluginData. This should make it much more performant if you're trying to find all nodes that have pluginData / sharedPluginData.
• Add hiddenFromPublishing as a property on Variable and VariableCollection.
• Add getPublishStatusAsync() as a method on Variable and VariableCollection which returns a promise.
• Add sectionContentsHidden as a property on SectionNode.

New:

• StickyNode interface now has an isWideWidth property, indicating whether the sticky note uses a wide rectangular shape, or the regular square shape.

Coinciding with the roll-out of AutoLayout v5 in Figma, we're excited to bring you plugin support for these new enhancements! This update includes various new properties to our Plugin API which will allow for more precise control of layout and positioning parameters using AutoLayout v5.

New:

• Nodes that support width and height now include optional properties like minWidth, maxWidth, minHeight, and maxHeight.
• LayoutMixin interface has been supplemented with 'layoutSizingHorizontal' and layoutSizingVertical properties supporting 'FIXED', 'HUG', and 'FILL' values. This means that most nodes that accept children and can be made the child of an auto layout node support these properties.
• FrameNodes with auto layout enabled now support layoutWrap, counterAxisAlignContent, and counterAxisSpacing.
• TextNode interface has been expanded to include textTruncation and maxLines.

Coinciding with the launch of Figma design's new Dev Mode, and Figma's launch of variables, this update adds a number of new APIs and methods for plugins to extend Dev Mode and interact with variables!

Variables in Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows.

And Dev Mode is a mode in Figma design files that is dedicated to giving front-end developers everything they need to navigate design files and implement designs into code. Plugins in Dev Mode can be used for inspection and code generation.

Inspection: Plugins can take over the Inspect panel in Dev Mode and pull in relevant context and information from other tools or APIs.

Code generation: Plugins can customize code generation using languages and frontend frameworks that Figma doesn’t support natively, and Figma will handle things like syntax highlighting for these plugins out of the box.

For a general overview of how to build plugins for Dev Mode, check out the new Working in Dev Mode guide.

New:

• figma.editorType can now return dev, when a plugin is running in Dev Mode.
• figma.getSelectionColors() will tell you all of the colors and paint styles in the user’s current selection.
• node.isAsset tells you if Figma detects that a node is an icon or image.
• node.getCSSAsync() will give you the CSS that Figma generates for that node.
• node.getDevResourcesAsync(), node.addDevResourceAsync(), node.editDevResourceAsync(), and node.deleteDevResourceAsync() methods for interacting with Dev resources.
• manifest.capabilities can now include "inspect" when you want your plugin to run in the Plugins panel in Dev Mode, or "codegen" when you want to build a plugin for code generation, which runs in the Code section of the Inspect panel in Dev Mode.
• figma.mode can now return "inspect" when your plugin runs in the Plugins panel in Dev Mode, or "codegen" when your plugin runs in the Code section of the Inspect panel in Dev Mode.
• manifest.codegenLanguages, which specifies the languages your plugin supports for code generation.
• manifest.codegenPreferences, allows plugins for code generation to define custom commands that show up in the native language dropdown in Dev Mode. In these commands, you can run plugin code, including the ability to open an iFrame using the new figma.codegen.preferences method. This is helpful for allowing users to customize the generated code from your plugin.
• node.inferredAutoLayout will let you get estimated auto layout properties on a FrameNode and its children, even if they do not use auto layout. If you are building a plugin for code generation, this will help you generate better code.
• A bunch of other methods and events specific to plugins for code generation.
• node.exportAsync() now accepts format: "JSON_REST_V1", which returns the same REST formatted JSON for a node as the Figma REST API.

Variables: Plugins can create, modify, and bind variables to various node properties and styles.

For a general guide on the features that variables can unlock in your design files, see the new Working with variables guide.

New:

• figma.variables defines several functions to create and manipulate local variables.
• SceneNode.boundVariables enumerates the variables bound on a given Scene node.
• SceneNode.setBoundVariable can set a bound variable on various node properties.
• SceneNode.explicitVariableModes enumerates the explicit (non-inherited) variable modes for a given node.
• SolidPaint.boundVariables enumerates the variables bound on a given SolidPaint.
• ComponentProperties.boundVariables enumerates the variables controlling component properties on an InstanceNode.

Team library API: Plugins can now query the available library variable collections and variables via the Plugin API. See figma.teamLibrary for more info.

New:

• figma.teamLibrary defines several functions to query your library assets and files
• manifest.permissions now includes a permission to control the figma.teamLibrary Plugin API.