Traits

Search

Traits

Allow to get or edit node.

Traits represent the various properties and behaviors that can be applied to nodes in Framer. Each node type supports a specific set of traits that define its appearance, layout, and behavior.

Null Values

Setting a trait to null generally removes or resets that property:

backgroundColor: null - Removes the background color
layout: null - Disables any applied layout (stack or grid)
borderRadius: null - Removes border radius
border: null - Disables the border

CSS Dimensions

Many traits use CSS dimension values with specific units:

px - Pixels (e.g., "100px")
% - Percentage (e.g., "50%")
fr - Fraction (for grid/stack layouts, e.g., "1fr")
vh - Viewport height (e.g., "100vh")

Node Type Support Matrix

Trait	FrameNode	TextNode	SVGNode	ComponentInstanceNode	ComponentNode	WebPageNode	VectorSetNode	VectorSetItemNode
Basic Properties
name	✅	✅	✅	✅	✅	❌	✅	✅
visible	✅	✅	✅	✅	❌	❌	❌	✅
locked	✅	✅	✅	✅	❌	❌	❌	✅
Visual Properties
backgroundColor	✅	❌	❌	❌	❌	❌	❌	❌
backgroundImage	✅	❌	❌	❌	❌	❌	❌	❌
backgroundGradient	✅	❌	❌	❌	❌	❌	❌	❌
opacity	✅	✅	✅	✅	❌	❌	❌	❌
rotation	✅	✅	✅	✅	❌	❌	❌	❌
borderRadius	✅	❌	❌	❌	❌	❌	❌	❌
border	✅	❌	❌	❌	❌	❌	❌	❌
imageRendering	✅	❌	❌	❌	❌	❌	❌	❌
Position & Layout
position	✅	✅	✅	✅	❌	❌	❌	❌
top/right/bottom/left	✅	✅	✅	✅	❌	❌	❌	✅
centerX/centerY	✅	✅	✅	✅	❌	❌	❌	✅
width/height	✅	✅	✅	✅	❌	❌	❌	✅
Size Constraints	✅	✅	❌	✅	❌	❌	❌	❌
aspectRatio	✅	❌	❌	✅	❌	❌	❌	❌
Layout System
layout	✅	❌	❌	❌	❌	❌	❌	❌
gap	✅	❌	❌	❌	❌	❌	❌	❌
padding	✅	❌	❌	❌	❌	❌	❌	❌
Stack Properties	✅	❌	❌	❌	❌	❌	❌	❌
Grid Properties	✅	❌	❌	❌	❌	❌	❌	❌
Grid Item Properties	✅	✅	❌	❌	❌	❌	❌	❌
Type-Specific
svg	❌	❌	✅	❌	❌	❌	❌	❌
font	❌	✅	❌	❌	❌	❌	❌	❌
inlineTextStyle	❌	✅	❌	❌	❌	❌	❌	❌
link	✅	✅	❌	❌	❌	❌	❌	❌
linkOpenInNewTab	✅	✅	❌	❌	❌	❌	❌	❌
controls	❌	❌	❌	✅	❌	❌	❌	❌
Component Properties
componentIdentifier	❌	❌	❌	✅	✅	❌	❌	❌
componentName	❌	❌	❌	✅	✅	❌	❌	❌
isVariant	✅	❌	❌	❌	❌	❌	❌	❌
isBreakpoint	✅	❌	❌	❌	❌	❌	❌	❌
Web Page
path	❌	❌	❌	❌	❌	✅	❌	❌
collectionId	❌	❌	❌	❌	❌	✅	❌	❌

Methods & Properties

aspectRatio

Width-to-height ratio

aspectRatio

Width-to-height ratio

backgroundColor

Background color in RGBA format or as a ColorStyle instance

backgroundColor

Background color in RGBA format or as a ColorStyle instance

backgroundGradient

Background gradient

backgroundGradient

Background gradient

backgroundImage

Background image asset

backgroundImage

Background image asset

border

Border properties

border

Border properties

borderRadius

Border radius for rounded corners

borderRadius

Border radius for rounded corners

bottom

Distance from bottom edge when using absolute/fixed positioning

bottom

Distance from bottom edge when using absolute/fixed positioning

centerX

Center anchor position as percentage

centerX

Center anchor position as percentage

centerY

Center anchor position as percentage

centerY

Center anchor position as percentage

collectionId

Collection ID for the web page

collectionId

Collection ID for the web page

componentIdentifier

Identifier of the component

componentIdentifier

Identifier of the component

componentName

Name of the component

componentName

Name of the component

controls

Property control values for code components

controls

Property control values for code components

font

Font selection for text

font

Font selection for text

gap

Spacing between items in a layout

gap

Spacing between items in a layout

gesture

Gesture state for component variants

gesture

Gesture state for component variants

gridAlignment

How items are aligned within the grid

gridAlignment

How items are aligned within the grid

gridColumnCount

Number of columns in the grid

gridColumnCount

Number of columns in the grid

gridColumnMinWidth

Minimum width of grid columns in pixels

gridColumnMinWidth

Minimum width of grid columns in pixels

gridColumnWidth

Width of grid columns in pixels

gridColumnWidth

Width of grid columns in pixels

gridColumnWidthType

Type of column width sizing

gridColumnWidthType

Type of column width sizing

gridItemColumnSpan

Number of columns to span

gridItemColumnSpan

Number of columns to span

gridItemFillCellHeight

Whether to fill the grid cell height

gridItemFillCellHeight

Whether to fill the grid cell height

gridItemFillCellWidth

Whether to fill the grid cell width

gridItemFillCellWidth

Whether to fill the grid cell width

gridItemHorizontalAlignment

Horizontal alignment within grid cell

gridItemHorizontalAlignment

Horizontal alignment within grid cell

gridItemRowSpan

Number of rows to span

gridItemRowSpan

Number of rows to span

gridItemVerticalAlignment

Vertical alignment within grid cell

gridItemVerticalAlignment

Vertical alignment within grid cell

gridRowCount

Number of rows in the grid

gridRowCount

Number of rows in the grid

gridRowHeight

Height of grid rows in pixels

gridRowHeight

Height of grid rows in pixels

gridRowHeightType

Type of row height sizing

gridRowHeightType

Type of row height sizing

height

Height of the node

height

Height of the node

imageRendering

How images should be rendered when scaled

imageRendering

How images should be rendered when scaled

inheritsFromId

ID of the node this variant inherits from

inheritsFromId

ID of the node this variant inherits from

inlineTextStyle

Apply a text style preset

inlineTextStyle

Apply a text style preset

isBreakpoint

Whether this is a breakpoint

isBreakpoint

Whether this is a breakpoint

isPrimaryBreakpoint

Whether this is the primary breakpoint

isPrimaryBreakpoint

Whether this is the primary breakpoint

isPrimaryVariant

Whether this is the primary variant

isPrimaryVariant

Whether this is the primary variant

isVariant

Whether this is a component variant

isVariant

Whether this is a component variant

layout

Enables stack or grid layout

layout

Enables stack or grid layout

left

Distance from left edge when using absolute/fixed positioning

left

Distance from left edge when using absolute/fixed positioning

link

URL or internal page link

link

URL or internal page link

linkOpenInNewTab

Whether to open link in new tab

linkOpenInNewTab

Whether to open link in new tab

locked

Whether the node is locked for editing

locked

Whether the node is locked for editing

maxHeight

Maximum height constraint

maxHeight

Maximum height constraint

maxWidth

Maximum width constraint

maxWidth

Maximum width constraint

minHeight

Minimum height constraint

minHeight

Minimum height constraint

minWidth

Minimum width constraint

minWidth

Minimum width constraint

name

The name of the node displayed in the layers panel

name

The name of the node displayed in the layers panel

opacity

Opacity of the node

opacity

Opacity of the node

padding

Inner spacing of a container with layout

padding

Inner spacing of a container with layout

path

URL path for the web page

path

URL path for the web page

position

Positioning behavior of the node

position

Positioning behavior of the node

right

Distance from right edge when using absolute/fixed positioning

right

Distance from right edge when using absolute/fixed positioning

rotation

Rotation angle in degrees

rotation

Rotation angle in degrees

stackAlignment

How items are aligned perpendicular to the stack direction

stackAlignment

How items are aligned perpendicular to the stack direction

stackDirection

Direction of items in a stack layout

stackDirection

Direction of items in a stack layout

stackDistribution

How items are distributed in a stack layout

stackDistribution

How items are distributed in a stack layout

stackWrapEnabled

Whether items should wrap to the next line

stackWrapEnabled

Whether items should wrap to the next line

svg

SVG markup content

svg

SVG markup content

top

Distance from top edge when using absolute/fixed positioning

top

Distance from top edge when using absolute/fixed positioning

visible

Whether the node is visible on the canvas

visible

Whether the node is visible on the canvas

width

Width of the node

width

Width of the node

subscribeToIsAllowedTo

aspectRatio

subscribeToIsAllowedTo

aspectRatio

Search

Search

Traits

Methods & Properties

Previous

Next

Previous

Next