<Text />

Text components support the vast majority of properties that can be applied to text in Figma and is the primary way to include text in your widget!

Usage Example

Usage example
<Text fontFamily="Inter" fontSize={20}>
  Hello Widget
</Text>

Text Style Props

href?: string

If specified, turns the text node into a link that navigates to the specified href on click.

fontFamily?: string

The font family (e.g. "Inter"). The supported fonts are all the fonts in the Google Fonts library.

letterSpacing?: number | string

The spacing between the individual characters.

textDecoration?: 'none' | 'strikethrough' | 'underline'

Whether the text is underlined or has a strikethrough.

fontSize?: number

The size of the font. Has minimum value of 1.

italic?: boolean

Whether or not to italicize the text content.

textCase?: 'upper' | 'lower' | 'title' | 'original' | 'small-caps' | 'small-caps-forced'

Overrides the case of the raw characters in the text node.

fontWeight?: FontWeight

The font weight eg. 400, 500 or 'medium', 'bold'.

fill?: HexCode | Color | Paint | (SolidPaint | GradientPaint)[]

The paints used to fill in the text.

paragraphIndent?: number

The indentation of paragraphs (offset of the first line from the left).

paragraphSpacing?: number

The vertical distance between paragraphs.

horizontalAlignText?: 'left' | 'right' | 'center' | 'justified'

The horizontal alignment of the text with respect to the Text node.

verticalAlignText?: 'top' | 'center' | 'bottom'

The vertical alignment of the text with respect to the Text node.

lineHeight?: number | string | 'auto'

The spacing between the lines in a paragraph of text.

truncate?: boolean | number

Whether the text should truncate if it overflows the size of the node. Set to a number to truncate after a specific number of lines.

stroke?: HexCode | Color | SolidPaint | GradientPaint | (SolidPaint | GradientPaint)[]

The paints used to fill the area of the node's stroke.

strokeWidth?: number

The thickness of the stroke, in pixels. This value must be non-negative and can be fractional.

strokeAlign?: StrokeAlign

The alignment of the stroke with respect to the boundaries of the node.

Center-aligned stroke means the center of the stroke falls exactly on the geometry. Inside-aligned stroke shifts the stroke so it lies completely inside the shape, and outside-aligned stroke is vice versa.

info

Inside and outside stroke are actually implemented by doubling the stroke weight and masking the stroke by the fill. This means inside-aligned stroke will never draw strokes outside the fill and outside-aligned stroke will never draw strokes inside the fill.

`SizeProps`

width?: AutolayoutSize

The width of the component.

height?: AutolayoutSize

The height of the component.

minWidth?: number

The minWidth of this component. Only affects AutoLayout and its children.

maxWidth?: number

The maxWidth of this component. Only affects AutoLayout and its children.

minHeight?: number

The minHeight of this component. Only affects AutoLayout and its children.

maxHeight?: number

The maxHeight of this component. Only affects AutoLayout and its children.

rotation?: number

The rotation of the node in degrees. Expects values from -180 to 180.

The rotation is with respect to the top-left of the object. Therefore, it is independent from the position of the object.

`BaseProps`

name?: string

The name of the component. This is useful to specify a data-layer attribute to make things more debuggable when you inspect the sublayers of your widget.

hidden?: boolean

Toggles whether to show the component.

onClick?: (event: WidgetClickEvent) => Promise<any> | void

Attach a click handler on the given node. If the given function is async or returns a promise, the widget is only terminated when the async function has completed and the promise has been resolved. The click handler is also passed a WidgetClickEvent object that contains additional information about the click.

key?: string | number

The key of the component.

hoverStyle?: HoverStyle

The style to be applied when the mouse is hovering over the component.

The tooltip that is shown to the user when hovering over the component.

positioning?: 'auto' | 'absolute'

This value is ignored unless the node is a direct child of an AutoLayout frame.

value	description
'auto'	Layout this node according to auto-layout rules.
'absolute'	Take this node out of the auto-layout flow, while still nesting it inside the auto-layout frame. This allows explicitly setting `x`, `y`, `width`, and `height`.

`BlendProps`

blendMode?: BlendMode

The blendMode of the component.

opacity?: number

The opacity of the component.

effect?: Effect | Effect[]

The effect of the component.

`ConstraintProps`

x?: number | HorizontalConstraint

The x position of the node.

This value is ignored if the node is a child of an AutoLayout frame and has positioning set to 'auto'.

y?: number | VerticalConstraint

The y position of the node.