Skip to main content

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.