Styles
The Styles object holds visual properties for an element. Every property is optional. Which properties are evaluated depends on the element type. Source: packages/schema/types/Styles.ts.
| Property | Value type | Figma key (if different) |
|---|---|---|
aspectRatio | AspectRatioValue | — |
backgroundBlur | Blur | (via effects) |
backgroundColor | ColorStyle | fills ADR 009 |
backgroundImage | ImageValueTokenReference | fills (IMAGE) ADR 063 |
bottom | PositionOffset | y and constraints ADR 041 |
centerHorizontalOffset | PositionOffset | x and constraints ADR 041 |
centerVerticalOffset | PositionOffset | y and constraints ADR 041 |
clipsContent | Style | — |
cornerRadius | StyleCorners | — |
cornerSmoothing | Style | — |
crossAxisAlignment | CrossAxisAlignment | counterAxisAlignItems ADR 040 |
effects | TokenReferenceEffects | — |
end | PositionOffset | x and constraints ADR 041 |
fillColor | ColorStyle | fills ADR 013 |
fontFamily | stringTokenReference | (via typography) |
fontSize | numberTokenReference | (via typography) |
fontStyle | stringTokenReference | (via typography) |
hangingList | boolean | (via typography) |
hangingPunctuation | boolean | (via typography) |
height | Style | — |
itemReverseZIndex | Style | — |
itemSpacing | StyleItemSpacing | — |
layerBlur | Blur | (via effects) |
layoutMode | LayoutMode | — |
layoutSizingHorizontal | Style | — |
layoutSizingVertical | Style | — |
leadingTrim | string | (via typography) |
letterSpacing | numberTokenReference | (via typography) |
lineHeight | numberstringTokenReference | (via typography) |
listSpacing | number | (via typography) |
locked | Style | — |
mainAxisAlignment | MainAxisAlignment | primaryAxisAlignItems ADR 040 |
maxHeight | Style | — |
maxLines | Style | — |
maxWidth | Style | — |
minHeight | Style | — |
minWidth | Style | — |
opacity | Style | — |
padding | StyleSides | — |
paragraphIndent | numberTokenReference | (via typography) |
paragraphSpacing | numberTokenReference | (via typography) |
position | Position | layoutPositioning ADR 041 |
primaryAxisSizingMode | Style | — |
rotation | Style | — |
shadows | Shadow[] | (via effects) |
start | PositionOffset | x and constraints ADR 041 |
strokeAlign | Style | — |
strokeDashPattern | StrokeDashPattern | strokeDashes ADR 059 |
strokeWeight | StyleSides | — |
strokes | ColorStyle | — |
textAlignHorizontal | TextAlignHorizontal | textAlignHorizontal (remapped) ADR 064 |
textAlignVertical | Style | — |
textCase | string | (via typography) |
textColor | ColorStyle | fills ADR 009 |
textDecoration | string | (via typography) |
textOverflow | TextOverflow | textTruncation (remapped) ADR 062 |
top | PositionOffset | y and constraints ADR 041 |
typography | TokenReferenceTypography | — |
visible | booleanTokenReferencePropBindingConditional | — |
width | Style | — |
wrap | Style | layoutWrap ADR 039 |
wrapAlignment | WrapAlignment | counterAxisAlignContent ADR 039 |
Element-type applicability (container/text/glyph/vectors/line) moves to per-property pages once those exist.