Version 1, Update 15
New:
- As per popular request, the default typings have moved have moved to NPM. See the Typings page for more information.
- Added
getPublishStatusAsync
to components and styles.
New:
getPublishStatusAsync
to components and styles.Last update erroneously set the typings file to update 13, so this skips ahead to update 14.
New:
setRelaunchData
API is now available on the DocumentNode. Relaunch buttons set on this node will appear on every page when nothing is selected.New:
selectedTextRange
API that allows you to get and set the current text selection.insertCharacters
and deleteCharacters
that make it easier to edit text while preserving existing styles.setRelaunchData
API (plugin inspector) introduced at Config."STRETCH"
is now a valid value for layoutAlign
in children of frames.Fixed:
clipsContent
, guides
, layoutGrids
, gridStyleId
.New:
figma.root.name
.findChild
and findChildren
to search immediate children.constrainProportions
as a node property.strokeMiterLimit
property and outlineStroke()
method as node properties.scaleFactor
as an instance property.expanded
property on nodes with children.Rect
(x, y, width, height) to the typings.Fixed:
getRange
/setRange
functions handle unicode characters. Previously, those function took a start
and end
parameter which were interpreted as unicode code points (UCS4). However, node.characters
returns a JavaScript string which is encoded as UTF16. This created an inconsistency where calling getRange
/setRange
could end up referencing a different range than the one you would expect, if characters that encode differently were present in your strings (such as emojis). Most plugins should simply work better as a result of this change. If you had added workaround code in your plugin, you may now need to remove the workaround.We also recently released a new version of the desktop app, which uses Electron 6 and Chrome 76. This gives you access to newer Chrome APIs that weren't previously available in the desktop app.
New:
Fixed:
New:
FrameNode
documentation.Fixed:
FrameNode
and GroupNode
objects now have separate prototypes, which means that code such as 'strokes' in group
will correctly return false. Note that we still recommend checking the .type
property of node objects over using the in
operator. We expect this to be an implementation detail -- however, let us know if this is causing you any issues.Proposed API (how do they work?):
Figma has released auto-layout!
As always, we try to make sure plugins don't break when we release new features. That being said, this release affects a lot of the core functionality of Figma and you may need to update your plugin to be aware of those concepts.
Auto-layout frames introduces new types of relations between layers. Existing APIs around size, positioning and children order have different behavior:
x
and y
position set automatically. Writing to the position of those nodes via the API will no-op. Similarly, setting relativeTransform
may ignore the translation component (but retain the rotation component).resize(w, h)
and resizeWithoutConstraints(w, h)
will no-op in one or both dimensions if the auto-layout frame has a size set automatically by auto-layout.The plugin API is intended to always return the most up to date value for all properties (i.e. has auto-layout applied). As such, be aware of these new restrictions and side effects when setting properties.
Frame-like containers (frames, components & instances) now support new properties! The properties listed below now exist on nodes of type "FRAME"
, "COMPONENT"
and "INSTANCE"
. Note that they are not available on nodes of type "GROUP"
.
Note that adding these new properties required re-organizing type definitions in the typings file. Notably, we've split FrameNode
into FrameNode
and GroupNode
because a lot of properties are not supported on group nodes.
fills
fillStyleId
strokes
strokeStyleId
strokeWeight
strokeAlign
strokeCap
strokeJoin
dashPattern
cornerRadius
topLeftRadius
topRightRadius
bottomLeftRadius
bottomRightRadius
cornerSmoothing
Tip: don't write code like if ('fills' in node) { ... }
to check if a property exists on a node. This is not guaranteed to work, especially with group nodes. Compare against the node type instead. It also helps TypeScript infer properties about the node better.
function isFrameLike(node: BaseNode): node is FrameNode | ComponentNode | InstanceNode {
return node.type === 'FRAME' || node.type === 'COMPONENT' || node.type === 'INSTANCE'
}
if (isFrameLike(node)) {
console.log(node.fills, node.strokes, node.cornerRadius)
}
backgrounds
propertyOn frame-like nodes, the backgrounds
and backgroundStyleId
properties are marked as DEPRECATED. Use the newly-introduced fills
and fillStyleId
properties instead. We made this change to be consistent with other types of nodes that also use the fills
properties. We may remove the property entirely in a new version so you should not use it. In the meantime, backgrounds
and backgroundStyleId
will keep working as an alias for fills
and fillStyleId
(i.e. they read and write to the same value).
On group nodes, backgrounds
and backgroundStyleId
are no longer supported, both in the editor and the API. If you have existing frames with a background, you will notice that the backgrounds panel in the properties panel has been changed with a message prompting you to replace it with a fill. Consequently, in the API, writing to the backgrounds
and backgroundStyleId
properties of a group node will no-op.
On page nodes, backgrounds
is not deprecated.
Coming soon!
(Also included: update 6)
New:
| symbol
with PluginAPI['mixed']
for all properties that can return the special figma.mixed
value. This new syntax also fixes the problem where TypeScript's control flow analysis was not able to understand if (node.prop !== figma.mixed)
and narrow down the type.selectionchanged
event could sometimes fire multiple times when the selection changed.Proposed API (how do they work?):
position
option in figma.showUI()
. Instead, plugins now always remember their last opened position by default.New:
figma.ui.on('message')
, figma.on('selectionchange')
and figma.on('currentpagechange')
APIs, which were previously proposed APIs can now be used in published plugins.figma.on('close')
API for allowing you to run shutdown actions when the plugin closes.Proposed API (how do they work?):
position
option in figma.showUI()
with possible values 'default' | 'last' | 'auto'
New:
figma.on('selection')
) as a proposed API.Fixed: