Skip to main content

Version 1, Update 8

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.

New layout constraints​

Auto-layout frames introduces new types of relations between layers. Existing APIs around size, positioning and children order have different behavior:

  • Children of auto-layout frames have a 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).
  • Calling 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.
  • Changing the size of a node will have the side effect of changing the size of its parent if the parent is an auto-layout frame.
  • Changing the order of children in an auto-layout frame will have the side effect of changing the position of its children.

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.

New frame 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.

  • Fill properties
    • fills
    • fillStyleId
  • Stroke properties
    • strokes
    • strokeStyleId
    • strokeWeight
    • strokeAlign
    • strokeCap
    • strokeJoin
    • dashPattern
  • Corner properties
    • 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)
}

Deprecation of backgrounds property​

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

Auto-layout properties​

Coming soon!