We're introducing plugin support for tables in FigJam!
New:
- TableNode type. Create a TableNode with createTable
We're introducing plugin support for tables in FigJam!
New:
Following up on the new video functionality recently added for prototyping, we have added some updates to our video plugin APIs, which include:
ON_MEDIA_HIT
and ON_MEDIA_END
prototyping triggers that fire when a video hits a certain timestamp and ends, respectivelyMUTE
, UNMUTE
, and TOGGLE_MUTE_UNMUTE
prototyping actions prototyping actionsfigma.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:
For more information on requiring payment in your plugins and widgets, please read this guide.
New:
New:
BaseStyle
, which refers to the field where the style is applied.Updates to fetch:
headers
property to fetch request.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 typesfigma.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:
absoluteBoundingBox
property to SectionNode
, StickyNode
, ShapeWithTextNode
, CodeBlockNode
, ConnectorNode
, EmbedNode
, LinkUnfurlNode
, MediaNode
, and WidgetNode
New:
addComponentProperty
fetch
async function which closely mimics the browser APIstrokeWeight
can now return figma.mixed
Fixed:
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
VideoPaint
type for adding video fills to nodes.figma.createVideoAsync
to create a Video
handle from an array of bytes.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.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.