Skip to main content

Figma Text AutoResize

Understanding Figma's Text Auto resize

/**
* [Figma#TextAutoResize](https://www.figma.com/plugin-docs/api/properties/TextNode-textautoresize/)
*/
export type TextAutoResize =
/**
* The size of the textbox is fixed and is independent of its content.
*
* e.g. css `overflow: visible;` - which will fix the size without scrolling or resizing, yet visible.
*
* Means: Fixed width, fixed height
*/
| "NONE"
/**
* The width of the textbox is fixed. Characters wrap to fit in the textbox. The height of the textbox automatically adjusts to fit its content.
*
* Means: Fixed width, auto height
*/
| "HEIGHT"
/**
* Both the width and height of the textbox automatically adjusts to fit its content. Characters do not wrap.
*
* Means: Auto width, auto height based on the text content
* This can't be used with flex. when using autolayout & making the text to fill-width, the text will be wrapped and change the type to "HEIGHT"
*/
| "WIDTH_AND_HEIGHT";

Web - css

Plain text with no layouted parent

NONE

/* wip */

HEIGHT

/* wip */

WIDTH_AND_HEIGHT

/* wip */

text inside layouted parent (flex)

NONE

/* wip */

HEIGHT

/* wip */

WIDTH_AND_HEIGHT

/* wip */

Flutter

NONE

/* wip */

HEIGHT

/* wip */

WIDTH_AND_HEIGHT

/* wip */