Frame | figma-js

A node of fixed size containing other nodes

Hierarchy

FrameBase
- Frame

Index

Properties

Readonly absoluteBoundingBox

absoluteBoundingBox: Rect

Bounding box of the node in absolute space coordinates

Readonly background

background: ReadonlyArray<Paint>

Background of the node. This is deprecated, as backgrounds for frames are now in the fills field.

Readonly backgroundColor

backgroundColor: Color

Background color of the node. This is deprecated, as frames now support more than a solid color as a fills. Please use the fills field instead.

Readonly blendMode

blendMode: BlendMode

How this node blends with nodes behind it in the scene (see blend mode section for more details)

Readonly children

children: ReadonlyArray<Node>

An array of nodes that are direct children of this node

Readonly clipsContent

clipsContent: boolean

Does this node clip content outside of its bounds?

Readonly constraints

constraints: LayoutConstraint

Horizontal and vertical layout constraints for node

Optional Readonly cornerRadius

cornerRadius: undefined | number

Radius of each corner of the frame if a single radius is set for all corners

Optional Readonly counterAxisAlignItems

counterAxisAlignItems: "MIN" | "CENTER" | "MAX"

When autolayout is enabled

Optional Readonly counterAxisSizingMode

counterAxisSizingMode: "FIXED" | "AUTO"

The padding betweeen the bottom border of the frame and its children. This property is only applicable for auto-layout frames.

default: 0

Readonly effects

effects: ReadonlyArray<Effect>

An array of effects attached to this node (see effects sectionfor more details)

default: []

Optional Readonly exportSettings

exportSettings: ReadonlyArray<ExportSetting>

An array of export settings representing images to export from node

default: []

Readonly fills

fills: ReadonlyArray<Paint>

An array of fill paints applied to the node

default: []

Optional Readonly horizontalPadding

horizontalPadding: undefined | number

The horizontal padding between the borders of the frame and its children. This property is only applicable for auto-layout frames.

default: 0

Readonly id

id: string

a string uniquely identifying this node within the document

Optional Readonly isMask

isMask: undefined | false | true

Does this node mask sibling nodes in front of it?

default: false

Optional Readonly itemSpacing

itemSpacing: undefined | number

The distance between children of the frame. This property is only applicable for auto-layout frames.

default: 0

Optional Readonly layoutAlign

layoutAlign: undefined | string

How the layer is aligned inside an auto-layout frame. This property is only provided for direct children of auto-layout frames. MIN CENTER MAX STRETCH In horizontal auto-layout frames, "MIN" and "MAX" correspond to "TOP" and "BOTTOM". * In vertical auto-layout frames, "MIN" and "MAX" correspond to "LEFT" and "RIGHT".

Optional Readonly layoutGrids

layoutGrids: ReadonlyArray<LayoutGrid>

An array of layout grids attached to this node (see layout grids section for more details). GROUP nodes do not have this attribute

default: []

Optional Readonly layoutMode

layoutMode: "NONE" | "HORIZONTAL" | "VERTICAL"

Whether this layer uses auto-layout to position its children.

default: NONE

Readonly name

name: string

the name given to the node by the user in the tool.

Optional Readonly opacity

opacity: undefined | number

Opacity of the node

default: 1

Optional Readonly overflowDirection

overflowDirection: undefined | string

Defines the scrolling behavior of the frame, if there exist contents outside of the frame boundaries. The frame can either scroll vertically, horizontally, or in both directions to the extents of the content contained within it. This behavior can be observed in a prototype. HORIZONTAL_SCROLLING VERTICAL_SCROLLING HORIZONTAL_AND_VERTICAL_SCROLLING

default: NONE

Optional Readonly paddingBottom

paddingBottom: undefined | number

The padding betweeen the top border of the frame and its children. This property is only applicable for auto-layout frames.

default: 0

Optional Readonly paddingLeft

paddingLeft: undefined | number

When autolayout is enabled

Optional Readonly paddingRight

paddingRight: undefined | number

The padding betweeen the left border of the frame and its children. This property is only applicable for auto-layout frames.

default: 0

Optional Readonly paddingTop

paddingTop: undefined | number

The padding betweeen the right border of the frame and its children. This property is only applicable for auto-layout frames.

default: 0

Optional Readonly pluginData

pluginData: any

data written by plugins that is visible only to the plugin that wrote it. Requires the pluginData to include the ID of the plugin.

Optional Readonly preserveRatio

preserveRatio: undefined | false | true

Keep height and width constrained to same ratio

default: false

Optional Readonly primaryAxisAlignItems

primaryAxisAlignItems: "MIN" | "CENTER" | "MAX" | "SPACE_BETWEEN"

When autolayout is enabled

Optional Readonly primaryAxisSizingMode

primaryAxisSizingMode: "FIXED" | "AUTO"

Whether the counter axis has a fixed length (determined by the user) or an automatic length (determined by the layout engine). This property is only applicable for auto-layout frames

default: AUTO

Optional Readonly rectangleCornerRadii

rectangleCornerRadii: readonly [number, number, number, number]

Array of length 4 of the radius of each corner of the frame, starting in the top left and proceeding clockwise

Optional Readonly relativeTransform

relativeTransform: Transform

The top two rows of a matrix that represents the 2D transform of this node relative to its parent. The bottom row of the matrix is implicitly always (0, 0, 1). Use to transform coordinates in geometry. Only present if geometry=paths is passed

Optional Readonly sharedPluginData

sharedPluginData: any

data written by plugins that is visible to all plugins. Requires the pluginData parameter to include the string "shared".

Optional Readonly size

size: Vector2

Width and height of element. This is different from the width and height of the bounding box in that the absolute bounding box represents the element after scaling and rotation. Only present if geometry=paths is passed

Readonly strokeAlign

strokeAlign: "INSIDE" | "OUTSIDE" | "CENTER"

Position of stroke relative to vector outline, as a string enum "INSIDE": stroke drawn inside the shape boundary "OUTSIDE": stroke drawn outside the shape boundary "CENTER": stroke drawn centered along the shape boundary

Readonly strokeWeight

strokeWeight: number

The weight of strokes on the node

Readonly strokes

strokes: ReadonlyArray<Paint>

An array of stroke paints applied to the node

default: []

Optional Readonly transitionDuration

transitionDuration: number | null

The duration of the prototyping transition on this node (in milliseconds)

default: null

Optional Readonly transitionEasing

transitionEasing: EasingType | null

The easing curve used in the prototyping transition on this node

default: null

Optional Readonly transitionNodeID

transitionNodeID: string | null

Node ID of node to transition to in prototyping

default: null

Readonly type

type: "FRAME"

Optional Readonly verticalPadding

verticalPadding: undefined | number

The vertical padding between the borders of the frame and its children. This property is only applicable for auto-layout frames.

default: 0

Optional Readonly visible

visible: undefined | false | true

whether or not the node is visible on the canvas