Skip to main content

Version 1, Update 69

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.

Version 1, Update 68

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:

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:

Version 1, Update 67

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:

Version 1, Update 66

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:

Version 1, Update 63

We now have plugin support for the text improvements launched with Little Big Updates!

New:

Version 1, Update 61

Following up on the new video functionality recently added for prototyping, we have added some updates to our video plugin APIs, which include: