We're introducing plugin support for tables in FigJam!

New:

• TableNode type. Create a TableNode with createTable

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

• New ON_MEDIA_HIT and ON_MEDIA_END prototyping triggers that fire when a video hits a certain timestamp and ends, respectively
• Added support for prototyping actions on the same Frame node as an existing prototyping trigger
• New MUTE, UNMUTE, and TOGGLE_MUTE_UNMUTE prototyping actions prototyping actions
• figma.createVideoAsync now supports .MOV and .WebM videos up to 100MB in size.

As part of our launch to allow creators to sell resources directly on Figma Community, we're releasing a Payments API. This API will allow you to create custom time or usage-based free trials for plugins and widgets.

You can use this API to:

• Read metadata about a user’s payment status and usage of your resource
• Kick off a checkout flow so a user can pay for your resource

For more information on requiring payment in your plugins and widgets, please read this guide.

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.