Skip to main content

Version 1, Update 54

This release adds support for four new APIs:

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
    }
  })

Version 1, Update 53

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.

Version 1, Update 52

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

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).

Version 1, Update 51

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.

Version 1, Update 50

New​

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.

Version 1, Update 49

This release adds support for the component properties feature with new properties and functions on each of the following node types:

ComponentSetNode

ComponentNode (non-variants only)

SceneNode (must be a component sublayer and not nested within an instance node)

InstanceNode

The setProperties function on InstanceNode was also updated to work with component properties.

The variantGroupProperties property on ComponentSetNode is now deprecated. It will continue to the return the variant group properties but it is recommended to use the new componentPropertyDefinitions property.

The variantProperties property will continue to be supported on ComponentNode but is now deprecated on InstanceNodes. It will continue to return the variant properties on an instance but it is now recommended to the use the new componentProperties property.

Version 1, Update 48

This release adds support for the individual strokes feature with new properties for each side of a rectangle or frame-like node:

Assigning a value to the strokeWeight property will apply the same weight to all four sides.

caution

⚠️ strokeWeight may return a stale value if the node is using individual stroke weights. In the near future, we will be changing this to return figma.mixed but are leaving it as an inaccurate number for now. If you want accurate stroke widths, please use the new properties above going forward.

New:

  • Support for individual strokes
  • Added figma.ungroup for ungrouping nodes, which is roughly equivalent to Ctrl-Shift-G/⌘⇧G in the editor.
  • Added new autolayout properties:
    • layoutPositioning: Determines whether a layer's size and position should be determined by auto-layout settings or manually adjustable
    • strokesIncludedInLayout: Determines whether strokes are included in layout calculations
    • itemReverseZIndex: Determines the canvas stacking order of layers in this frame
  • Updated autolayout properties:
    • counterAxisAlignItems: Added "BASELINE" option for aligning all children along the text baseline on horizontal auto-layout frames.
    • textAutoResize: Added "TRUNCATE" option for truncating overflowing text with an ellipse.

Fixes to the plugin typings: