Styles

The Styles object holds visual properties for an element. Every property is optional. Which properties are evaluated depends on the element type.

type Styles = Partial<{ /* 48 properties */ }>;

Properties

Combined view: every style property, grouped by category and then by name, with the element-type categories it is evaluated for. container covers COMPONENT/FRAME/SLOT/INSTANCE; vectors covers RECTANGLE/VECTOR/ELLIPSE/STAR/POLYGON; text, glyph, and line cover their like-named element types.

Category	Name	container	text	glyph	vectors	line
Border	cornerRadius	✓
Border	cornerSmoothing	✓			✓
Border	strokeAlign	✓			✓	✓
Border	strokeWeight	✓			✓	✓
Color	backgroundColor	✓			✓
Color	fillColor			✓	✓	✓
Color	strokes	✓			✓	✓
Color	textColor		✓
Effects	effects	✓	✓	✓	✓	✓
Layout (child)	bottom	✓	✓	✓	✓	✓
Layout (child)	centerHorizontalOffset	✓	✓	✓	✓	✓
Layout (child)	centerVerticalOffset	✓	✓	✓	✓	✓
Layout (child)	end	✓	✓	✓	✓	✓
Layout (child)	layoutSizingHorizontal	✓	✓	✓	✓	✓
Layout (child)	layoutSizingVertical	✓	✓	✓	✓	✓
Layout (child)	position	✓	✓	✓	✓	✓
Layout (child)	start	✓	✓	✓	✓	✓
Layout (child)	top	✓	✓	✓	✓	✓
Layout (parent)	crossAxisAlignment	✓
Layout (parent)	itemReverseZIndex	✓
Layout (parent)	layoutMode	✓
Layout (parent)	mainAxisAlignment	✓
Layout (parent)	primaryAxisSizingMode	✓
Layout (parent)	wrap	✓
Layout (parent)	wrapAlignment	✓
Size	aspectRatio	✓	✓	✓	✓
Size	height	✓	✓	✓	✓
Size	maxHeight	✓	✓	✓	✓	✓
Size	maxWidth	✓	✓	✓	✓	✓
Size	minHeight	✓	✓	✓	✓	✓
Size	minWidth	✓	✓	✓	✓	✓
Size	width	✓	✓	✓	✓	✓
Spacing	itemSpacing	✓
Spacing	padding	✓
Text	textAlignHorizontal		✓
Text	textAlignVertical		✓
Text	typography		✓
Transform	rotation	✓	✓	✓	✓	✓
Visibility	clipContent	✓
Visibility	locked	✓	✓	✓	✓	✓
Visibility	opacity	✓	✓	✓	✓	✓
Visibility	visible	✓	✓	✓	✓	✓

Note on the vectors column. This column unions RECTANGLE with the vector-family element types (VECTOR, ELLIPSE, STAR, POLYGON), which share most styling but split on color: backgroundColor is evaluated only for RECTANGLE, while fillColor is evaluated only for the vector family. Both show ✓ under vectors here, but a given element of one subtype will only honor one or the other.

Key Mapping from Figma

Several spec style keys differ from the Figma node property they read from. Specs renames these to be more semantic and self-describing. Keys not listed here pass through unchanged (e.g. opacity reads node.opacity).

Spec key	Figma property	ADR
backgroundColor	fills	ADR 009
textColor	fills	ADR 009
fillColor	fills	ADR 013
wrap	layoutWrap	ADR 039
wrapAlignment	counterAxisAlignContent	ADR 039
mainAxisAlignment	primaryAxisAlignItems	ADR 040
crossAxisAlignment	counterAxisAlignItems	ADR 040
position	layoutPositioning	ADR 041
top	y (constraint MIN/STRETCH/SCALE)	ADR 041
bottom	y (constraint MAX/STRETCH)	ADR 041
start	x (constraint MIN/STRETCH/SCALE)	ADR 041
end	x (constraint MAX/STRETCH)	ADR 041
centerHorizontalOffset	x (constraint CENTER)	ADR 041
centerVerticalOffset	y (constraint CENTER)	ADR 041

All other style keys — width, height, opacity, padding, itemSpacing, cornerRadius, strokeWeight, rotation, etc. — use the same name as the Figma node property.

Values

Most properties accept a Style value. Some properties accept specialized shapes instead of or in addition to Style.

Name	Description	Example
string	Literal string value	"HORIZONTAL"
number	Literal number value	16
boolean	Literal boolean value	true
null	Absent or cleared value	null
TokenReference	Reference to a design token	{ $token: "DS.Space.400", $type: "dimension" }
PropBinding	Dynamic link to a prop value	{ $binding: "#/props/label" }
Conditional	Value that depends on a prop’s state	{ if: { condition: ..., then: 8, else: 12 } }
GradientValue	Linear, radial, or angular gradient	{ type: "LINEAR", angle: 90, stops: [...] }
Typography	Text style object with individual properties	{ fontSize: 14, fontFamily: "Inter" }
Effects	Shadows and blurs	{ shadows: [...], layerBlur: { ... } }
Sides	Per-side values for padding or stroke weight	{ top: 8, end: 12, bottom: 8, start: 12 }
Corners	Per-corner values for corner radius	{ topStart: 4, topEnd: 4, bottomEnd: 0, bottomStart: 0 }
ItemSpacing	Per-axis gap values	{ horizontal: 16, vertical: 8 }
LayoutMode	Auto-layout direction enum	"NONE", "HORIZONTAL", "VERTICAL"
WrapAlignment	Wrap line distribution enum	"START", "SPACE_BETWEEN"
MainAxisAlignment	Main axis alignment enum	"START", "END", "CENTER", "SPACE_BETWEEN"
CrossAxisAlignment	Cross axis alignment enum	"START", "END", "CENTER", "STRETCH", "BASELINE"
Position	Layout positioning mode enum	"AUTO", "ABSOLUTE"
PositionOffset	Positional offset value	24 (px), "25%" (SCALE), null
AspectRatio	Width-to-height ratio	{ x: 16, y: 9 }

Relating properties to values

• Most properties accept any Style (literal, token, binding, or conditional).
• backgroundColor, fillColor, strokes, textColor accept string | TokenReference | GradientValue | null.
• typography accepts TokenReference | Typography.
• effects accepts TokenReference | Effects.
• padding, strokeWeight accept Style | Sides.
• cornerRadius accepts Style | Corners.
• itemSpacing accepts Style | ItemSpacing.
• layoutMode accepts LayoutMode | null — not token-bindable.
• wrapAlignment accepts WrapAlignment | null — not token-bindable.
• mainAxisAlignment accepts MainAxisAlignment | null — not token-bindable.
• crossAxisAlignment accepts CrossAxisAlignment | null — not token-bindable.
• position accepts Position | null — not token-bindable.
• top, bottom, start, end, centerHorizontalOffset, centerVerticalOffset accept PositionOffset (number | string | null) — not token-bindable.
• aspectRatio accepts AspectRatio | null.