Skip to main content

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: