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.

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.