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.

This update adds two parameters for the "NODE" prototyping Action:

• resetScrollPosition: Whether to reset the scroll position of any scrollable elements. The parameter only applies if the current node and the destination have the same layout.
• resetInteractiveComponents: Whether to reset the state of any interactive components. The parameter only applies if the destination has interactive components.

Use the parameters to manage the scroll behavior and component state of nodes in your prototype.

The resetScrollPosition parameter replaces preserveScrollPosition, which remains supported only for backwards compatibility. Instead of preserveScrollPosition, if you want to preserve the current scroll position in the prototype, set resetScrollPosition to false.

For more information about the parameters and state management for prototypes, see:

• "NODE" Action
• State management for prototypes

This update introduces the optional networkAccess key to the plugin manifest.

Add the networkAccess to your plugin's manifest.json file to specify the domains that your plugin is permitted to access. When networkAccess is applied, if your plugin makes a network request to a domain that is not specified in the list of permitted domains, that request is blocked.

For example:

{
  "name": "MyPlugin",
  "id": "737805260747778092",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "networkAccess": {
    "allowedDomains": ["https://my-app.cdn.com", "wss://socket.io", "*.example.com", "example.com/api/",  "exact-path.com/content"]
  }
}

When you publish your plugin, the list of domains that you specify for networkAccess is displayed on your plugin's Community page. This information is also visible for org admins when plugins are reviewed for approval.

To try this out:

1. In the manifest.json file for your plugin, add the following:

   "networkAccess": {
     "allowedDomains": ["none"]
   }
   

none is a special keyword for allowedDomains that prevents any network access from your plugin. 2. In Figma, create a new Figma or FigJam file and add your plugin. Try to use the plugin as normal. 3. Check the developer console. If your plugin makes network requests, such as calls to an API or fetching images, Figma blocks the requests and throws content-security policy (CSP) errors. 4. To fix the CSP errors, in your plugin manifest, replace ["none"] with the domains that your plugin needs to access.

For more information about network access, see:

• How Plugins Run
• Making Network Requests
• Plugin Manifest