New:

• componentPropertyReferences now also apply to instance sublayers. For applicable instance sublayers, these will match the corresponding layer on the instance's main component.

New:

• New method createImageAsync to create an image from a url string.
• Add new field consumers to BaseStyle, which refers to the field where the style is applied.

Updates to fetch:

• Add headers property to fetch request.
• Add json method to fetch response.
• body can now take a string.

In tandem with our launch of spell check in Figma and FigJam, we are adding support for text review plugins! A text review plugin is a plugin that can extend or replace the native spell check functionality to do things like grammar checking and brand guideline checking, or even check spelling in languages Figma doesn't support. And something unique about text review plugins compared to other plugins is that they start automatically anytime a user starts editing text in a document.

This comes with a few new APIs:

• figma.on('textreview') listeners to suggest corrections while a user types
• The figma.textreview object that has methods to manage if the plugin is enabled for text review by the user.

For more information on writing a text review plugin see our guide.

Other enhancements:

• Add absoluteBoundingBox property to SectionNode, StickyNode, ShapeWithTextNode, CodeBlockNode, ConnectorNode, EmbedNode, LinkUnfurlNode, MediaNode, and WidgetNode

New:

• Added support for variant properties in addComponentProperty
• Added a global fetch async function which closely mimics the browser API
• Node strokeWeight can now return figma.mixed

Fixed:

• HyperlinkTarget now works with more than just regular frames when using type NODE. For example, you can link to SECTION, SYMBOL and INSTANCE nodes too. The existing restriction where you can't link to a sublayer of an instance still applies.

New

• Added VideoPaint type for adding video fills to nodes.
• Added figma.createVideoAsync to create a Video handle from an array of bytes.
• Added resetVideoPosition property to Prototyping Actions.
• Added UPDATE_MEDIA_RUNTIME action type for pausing, playing, and toggling a video's playback state

This release adds support for four new APIs:

• InstanceNode.overrides returns a list of overrides on an instance.
• InstanceNode.resetOverrides resets all of the overrides on an instance.
• editComponentProperty for component set nodes now supports renaming variant properties.
• new documentchange option in figma.on

documentchange will trigger when a node or style change is made to the currently open file.

The callback will be passed with a DocumentChangeEvent with the below interface:

interface DocumentChangeEvent {
  documentChanges: DocumentChange[]
}

Example:

  figma.on("documentchange", (event) => {
    for (const change of event.documentChanges) {
      console.log("document changes: ", change.id, change.origin, change.type);
      // Node changes also have change.node, style changes have change.style
    }
  })

This release adds support for two new APIs:

• figma.createNodeFromJSXAsync
• ComponentNode.instances

figma.createNodeFromJSXAsync​

figma.createNodeFromJSXAsync lets you create nodes using the same JSX API that widgets use. This is a declarative, HTML-like API that should be more ergonomic when using the plugin API to create deeply nested node structures. Here is a quick example:

const { Image, AutoLayout } = figma.widget

const node = await figma.createNodeFromJSXAsync(
  <AutoLayout fill="#F00" padding={20}>
    <Image src="https://picsum.photos/200" width={200} height={200} />
  </AutoLayout>,
)

You can pair figma.createNodeFromJSXAsync with our Widget Code Generator plugin to to turn designs from Figma files into code you can embed into your plugin.

Note that using this API requires setting up your build system to compile JSX. You can learn more about this by following along with the documentation here.

ComponentNode.instances​

ComponentNode.instances returns a list of instance nodes in the file for a given main component node.

This release adds support for the component properties beta features and adds the the ability to read the fontWeight of text nodes.

Component Properties​

Exposed Instances

• isExposedInstance: indicates whether this InstanceNode has been marked as exposed to its containing ComponentNode or ComponentSetNode
• exposedInstances: all nested instances that have been exposed to this InstanceNode's level

Preferred Values

• componentPropertyDefinitions: updated to return InstanceSwapPreferredValue[] for 'INSTANCE_SWAP' component property definitions
• addComponentProperty: updated to accept InstanceSwapPreferredValue[] when adding an 'INSTANCE_SWAP' component property
• editComponentProperty: updated to accept InstanceSwapPreferredValue[] when editing an 'INSTANCE_SWAP' component property

Font Weight​

• fontWeight: The weight of the font (e.g. 400 for "Regular", 700 for "Bold"). This property is readonly and cannot be set directly.
• getRangeFontWeight: gets the fontWeight from characters in range start (inclusive) to end (exclusive).

New:

• You can now add a button with a custom action to the notifications created by notify. You can also add an onDequeue function that runs when the notification is removed. This function has a string parameter that represents the reason why the notification was removed.

New​

• You can now retrieve the author of a StampNode, with getAuthorAsync
• BASH is now a supported codeLanguage for CodeBlockNode
• A new absoluteBoundingBox property has been added to several nodes
• A new attachedConnectors property has been added to nodes that can have connectors

Bug fixes​

Previously, stuckNodes were not marked readonly in the typings. It was a runtime error to try to set this property, and the typings now reflect this.

Breaking interface rename​

LayerSublayerNode has been renamed to LabelSublayerNode. The previous name was a typo.