Search
FrameNode
FrameNode
A frame layer on the canvas, the most common container node.
Frames can contain children, have layout settings, backgrounds, borders, and can serve as breakpoint or component variants.
Methods & Properties
The name of the node displayed in the layers panel.
Whether the node is visible on the canvas.
Whether the node is locked for editing.
Background color in RGBA format (e.g. rgba(242, 59, 57, 1)) or as a ColorStyle instance.
Background image asset. Supported by FrameNode.
Background gradient (linear, radial, or conic). Supported by FrameNode.
Rotation angle in degrees.
Opacity of the node, from 0 (fully transparent) to 1 (fully opaque).
Border radius for rounded corners.
Border properties including width, color, and style.
How images should be rendered when scaled: "auto" or "pixelated".
Positioning behavior of the node. - "relative": Default for nodes in stack/grid layouts - "absolute": Positioned relative to parent - "fixed": Positioned relative to viewport - "sticky": Sticks to viewport edges when scrolling
Distance from top edge when using absolute/fixed positioning.
Distance from right edge when using absolute/fixed positioning.
Distance from bottom edge when using absolute/fixed positioning.
Distance from left edge when using absolute/fixed positioning.
Center anchor horizontal position as percentage (e.g. "50%").
Center anchor vertical position as percentage (e.g. "50%").
Width of the node.
Height of the node.
Maximum width constraint. Supported by FrameNode, TextNode, ComponentInstanceNode.
Minimum width constraint. Supported by FrameNode, TextNode, ComponentInstanceNode.
Maximum height constraint. Supported by FrameNode, TextNode, ComponentInstanceNode.
Minimum height constraint. Supported by FrameNode, TextNode, ComponentInstanceNode.
Width-to-height ratio (e.g. 1.5 for 3:2).
Stacking order of positioned elements.
URL or internal page link.
Whether to open the link in a new tab.
Whether to use smooth scrolling for scroll-to-section links. Supported by FrameNode, TextNode.
Click tracking identifier for analytics. Supported by FrameNode, TextNode.
Array of rel attribute values for the link. Supported by FrameNode, TextNode.
Whether to preserve URL query parameters when navigating. Supported by FrameNode, TextNode.
Controls how content that exceeds the element's box is handled.
Controls horizontal overflow behavior.
Controls vertical overflow behavior.
Enables stack or grid layout.
Spacing between items in a layout.
Inner spacing of a container with layout.
Direction of items in a stack layout. Requires layout: "stack". Supported by FrameNode.
How items are distributed in a stack layout. Requires layout: "stack". Supported by FrameNode.
How items are aligned perpendicular to the stack direction. Requires layout: "stack". Supported by FrameNode.
Whether items should wrap to the next line. Requires layout: "stack". Supported by FrameNode.
Number of columns in the grid. Requires layout: "grid". Supported by FrameNode.
Number of rows in the grid. Requires layout: "grid". Supported by FrameNode.
How items are aligned within the grid. Requires layout: "grid". Supported by FrameNode.
Type of column width sizing: "fixed" or "minmax". Requires layout: "grid". Supported by FrameNode.
Width of grid columns in pixels. Requires layout: "grid". Supported by FrameNode.
Minimum width of grid columns in pixels. Requires layout: "grid". Supported by FrameNode.
Type of row height sizing: "fixed", "auto", or "fit". Requires layout: "grid". Supported by FrameNode.
Height of grid rows in pixels. Requires layout: "grid". Supported by FrameNode.
Whether to fill the grid cell width.
Whether to fill the grid cell height.
Horizontal alignment within grid cell.
Vertical alignment within grid cell.
Number of columns to span, or "all" for all columns.
Number of rows to span.
Whether this is a breakpoint. Supported by FrameNode.
Whether this is the primary breakpoint. Supported by FrameNode.
Remove this node from the canvas tree.
Select this node on the canvas.
Clone this node, creating a duplicate in the canvas tree.
Set the attributes of this node.
Get the bounding box of this node.
Pans and zooms the viewport to center the node.
Navigate to this node.
Get the parent of this node in the canvas tree.
Get the children of this node in the canvas tree.
Get descendants of this node that match the given type.
Get the descendants of this node that support attribute.
Get the descendants of this node that have attribute set to a non-null value.
Walk this node and its descendants recursively.
Get plugin data by key.
Set plugin data by key.
Get all plugin data keys stored on this node.