Text
Text layers hold a string, its typography and how it wraps. Shared typography lives in text styles.
Text layers
Add text with the Text tool (T). To edit text on the canvas, double-click it or select it and press ↵. The Inspector's Text section shows the content, text style, font family, size, weight, line height, letter spacing and alignment.
A text layer is a node with type: "text" and its words in content. Text has no color of its own: it is invisible without a fill, and so are emoji.
Properties
| Property | Value |
|---|---|
content | The text. |
fill | The text color, a hex string or a $variable. |
fontFamily | Any Google Fonts family or installed system font. The default is Inter. |
fontSize | Size in pixels. |
fontWeight | A string or number, such as "600". |
fontStyle | For example "italic". |
lineHeight | A ratio of the font size: 1.5 is 150%. Unset uses the font's own line height. |
letterSpacing | Pixels. "-0.02em", "2%" and "1px" are accepted and stored as pixels at the layer's font size. |
textAlign | left, center, right or justify. |
underline, strikethrough | true or false. |
textGrowth | How the text wraps and sizes. See below. |
textStyle | The name of a shared text style. |
textAlign aligns the text inside its own box, not the box inside its parent. Use the parent frame's layout for that. Text has no padding either: wrap it in a frame when it needs some.
Wrapping and size
textGrowth decides how a text layer wraps:
auto(the default): one line, sized by its content. Use it for labels, buttons and tags, without awidth.fixed-width: wraps atwidth, a number orfill_container, and takes its height from the content. Use it for headings and paragraphs.fixed-width-height: both sides fixed. Extra lines overflow.
header = Insert(document, {type: "frame", name: "Header", layout: "vertical", width: 480, gap: 12})
Insert(header, {type: "text", name: "Title", textGrowth: "fixed-width", width: "fill_container", content: "Dashboard", fontFamily: "Inter", fontSize: 28, fill: "#18181B"})Text is measured by the same browser engine that renders it, so the size you see in the editor matches screenshots and exports. This needs Chrome or Chromium installed; without it, layout falls back to estimates.
Text styles
A text style names a set of typography: fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, underline and strikethrough. Any of these values can be a $variable. Color, alignment and growth stay on the layer.
A text layer uses a style with textStyle: "Heading/H1". Values set on the layer itself win over the style, so leave them unset to follow it. A / in the name groups styles in the app.
In the app, select a text layer and use Create text style in the Inspector to make a style from it, or Detach style to keep its look but stop following the style. All styles are listed under Text styles in the Variables tab.
Agents manage styles in an execute snippet with SetTextStyles, GetTextStyles, DeleteTextStyles and RenameTextStyle. Deleting a style first writes its values onto the layers that used it, so nothing changes look.
SetTextStyles({"Heading/H1": {fontFamily: "Inter", fontSize: 40, fontWeight: "700", lineHeight: 1.2}})
Insert(header, {type: "text", name: "Headline", textStyle: "Heading/H1", content: "Plan your week", fill: "#18181B"})Something unclear, missing or broken? Write to feedback@anaknegeri.dev.