Keys
Every key a node can carry, grouped as facet guide prints them. This page is generated from the same table the builder reads, so it lists exactly what is applied.
Language (write these first)
| Key | Forms | What it does |
|---|---|---|
kit | {"font", "modes", "colors", "type", "parts"} | beside "nodes" (or alone): say colors, type presets and parts once; kept with the file and named everywhere after |
nodes | [NODE, ...] | several top-level nodes in one call (a bare node or a list also works) |
row | [NODE, ...] | also column, grid, stack (children overlap, placed with at) and ring (children around a circle, "r") |
font | "Family Size/Line Weight italic +0.4 caps" | on a text; on a container it is the font of every text inside |
style | preset or text style name | on a text or a container; {"preset": "text"} is a text in that preset |
color | @name | @name/40% | #hex | on a container: the color of every text inside; @name is a kit color, /40% a tint (its own variable) |
at | [x, y] | [x, y, "center"] | "bottom right" | [place, dx, dy] | {"angle", "r"} | place a layer: absolute, anchored, by words in its parent, or around the parent's center (degrees from the top) |
each | list | count | with "do": NODE, one node per item; {.} is the item, {i} its index, {#} its number, {field} a field |
space | number | "fill" | an empty gap in a row or column |
icon | "set:name" | an icon (same as $icon); size sets both sides |
draw | [{"circle"|"ellipse"|"rect"|"line"|"poly"|"arc"|"path": ...}] | shapes as data in a box of "size"; fill, stroke, weight, dash, cap per shape |
set | name | a component set: "variants", "template", "props" (bound with "{Prop}"), "behavior" (a statechart) and "looks" |
variants | {Property: [values]} | {Property: {Value: {keys, "$nodes", "props"}}} | in a set: its variant properties; the first value is the default; a value's map changes that variant |
props | {Name: default} | in a set: its properties; a layer binds with "text": "{Name}" or "visible": "{Name}"; a text naming a variant property ("{Tier} plan") shows each variant's value |
behavior | {"start", "states", "axes", "plays", "targets"} | in a set: the states it moves through, stored as a feature named after the set |
looks | {Axis: {Option: "Collection/Mode"}} | in a set with behavior: design axes shown in variable modes |
only | value | [values] | {Property: [values]} | in a set's template: the layer exists only in those variants |
expect | {"lines", "maxLines", "fits", "width", "height", "noOverlap"} | what must hold after layout; a miss is EXPECT_FAILED |
key | string | what build --sync matches the layer by (else its name) |
mode | "Dark" | {"Collection": "Mode"} | show this layer and everything in it in a mode of the kit's (or a collection's) variables |
Structure
| Key | Forms | What it does |
|---|---|---|
type | "frame" | "row" | "column" | "grid" | "text" | "rectangle" | "ellipse" | "vector" | "line" | "component-set" | what to build; omitted means "column" (a frame with vertical auto layout) |
name | string | layer name; results return ids by name, and $nodes/$override address layers by it |
children | [NODE, ...] | child nodes, in order |
Size and place
| Key | Forms | What it does |
|---|---|---|
width | number | "fill" | "hug" | "fill" takes the free room of an auto layout parent; "hug" fits the content ("100%" and "auto" also work) |
height | number | "fill" | "hug" | as width |
minWidth | number | also maxWidth, minHeight, maxHeight |
x | number | position in the parent; ignored inside auto layout unless "position": "absolute" |
y | number | as x |
position | "absolute" | "auto" | absolute takes a child out of its parent's flow (pinned bars, badges) |
rotation | degrees | counterclockwise, about the node's origin |
constraints | {"horizontal": "left"|"right"|"center"|"left-right"|"scale", "vertical": "top"|"bottom"|"center"|"top-bottom"|"scale"} | how a child follows a resized fixed frame |
Auto layout
| Key | Forms | What it does |
|---|---|---|
gap | number | {"row", "column"} | "auto" | space between children; "auto" spreads them (space-between) |
padding | number | [vertical, horizontal] | [top, right, bottom, left] | {"top","right","bottom","left","horizontal","vertical"} | inner space |
justify | "start" | "center" | "end" | "space-between" | along the flow; needs room (a number or "fill" size) |
align | "start" | "center" | "end" | "stretch" | across the flow; stretch makes children fill across |
wrap | bool | rows wrap onto new lines |
grow | 1 | fill the free room along the parent's flow |
columns | number | [number | "fill" | "Nfr", ...] | grid: column count (equal shares) or tracks: widths and shares of the free width |
columnSpan | number | grid child: columns it spans |
Look
| Key | Forms | What it does |
|---|---|---|
fill | "#RRGGBB[AA]" | "rgb(...)" | color name | "@Collection/name|#fallback" | {"type":"linear"|"radial"|"angular"|"diamond","stops":[{"position","color"}],"angle"} | {"type":"image","url":...} | [paint, ...] | null | fills of frames and shapes, bottom first; each paint object may add opacity, visible and blendMode; a lone token color stays bound to its variable; text uses color |
stroke | color | gradient | [paint, ...] | border; with strokeWidth (default 1) and strokeAlign (inside, center, outside) |
strokeWidth | number | {"top","right","bottom","left"} | border width; per side on frames and rectangles |
strokeDash | [dash, gap] | "none" | dashed border; strokeCap (none, round, square) and strokeJoin (miter, bevel, round) shape vector strokes |
strokeAlign | "inside" | "center" | "outside" | border position |
cornerRadius | number | {"topLeft","topRight","bottomRight","bottomLeft"} | [tl, tr, br, bl] | rounded corners, one radius or one per corner |
effects | {"type":"drop-shadow","x","y","blur","spread","color"} | {"type":"blur","blur"} | [...] | drop-shadow and inner-shadow (several of each, bottom first), one blur (layer blur) and one background-blur |
opacity | 0..1 | layer opacity |
blendMode | "pass-through" | "normal" | "multiply" | "screen" | "overlay" | ... | layer blend mode (18 modes) |
clip | bool | clip children to the frame (default: fixed-size or rounded frames clip) |
overflow | "hidden" | "vertical" | "horizontal" | content beyond the frame is expected: clipped on purpose (hidden) or scrolled; the audit does not flag it |
visible | bool | false hides the layer ("hidden": true also works) |
locked | bool | lock against pointer edits |
Text
| Key | Forms | What it does |
|---|---|---|
text | string | the characters; \n starts a paragraph |
runs | ["text", NODE, ...] | with type "paragraph": a sentence with components in it (chips, icons), wrapping like text; text keys style every word; wordSpacing and lineGap tune the spacing |
fontSize | number | size in px (default 16) |
fontWeight | 100..900 | "Regular" | "Medium" | "Semi Bold" | "Bold" | ... | weight |
fontFamily | string | family name; one this machine lacks is fetched from Google Fonts, otherwise substituted with a warning |
color | color | text color (also on $icon) |
lineHeight | number | "150%" | "auto" | {"unit":"PIXELS"|"PERCENT"|"AUTO","value"} | line height |
letterSpacing | number | "5%" | tracking |
textAlign | "left" | "center" | "right" | "justified" | a text that fills its row needs center to look centered |
resize | "width" | "height" | "none" | "truncate" | auto width (one line), wrap at the width (auto height), fixed box, or fixed with an ellipsis |
spans | [{"text", ...character keys}, ...] | mixed styles in one layer: each span sets fontWeight, fontSize, fontFamily, italic, color, textDecoration, textCase, letterSpacing or lineHeight for its text |
textDecoration | "none" | "underline" | "strikethrough" | decoration; also textCase (original, upper, lower, title), italic (bool), paragraphSpacing (px) and maxLines (truncates with an ellipsis) |
$textStyle | style name | follow a text style; a new name creates the style from this layer |
Components
| Key | Forms | What it does |
|---|---|---|
$instance | component or set name | an instance; a set gives its first variant; "scale": 0.5 scales everything it shows (sizes, text, strokes, radii) |
$variant | {"Property": "Value"} | choose a variant |
$override | {"Layer": "text" | bool | {props} | {"Property": "Value"}} | per-instance text, visibility, fill, color, stroke, image, width and height, a nested instance's variant, or an icon swap ("Icon": "lucide:moon"); layout follows the component |
scale | number (0.01 to 100) | with $instance: show the component scaled, strokes, radii, effects, spacing and text included (a live thumbnail) |
template | NODE | component-set: the shape every variant starts from |
variantMatrix | {"Property": {"Value": {props, "$nodes": {...}}} | ["Value", ...]} | component-set: one variant per combination, in written order |
$nodes | {"Layer": {props}} | edit named descendants (variantMatrix entries and modify) |
$clone | node id | copy an existing node (placed beside it) |
$expose | {"characters": "Name"} | {"visible": "Name"} | with convertToComponent: the layer's text or visibility becomes a component property; instances set it with $override {"Name": value} |
$exposeInstance | true | with convertToComponent: a nested instance shows its properties on the component's instances |
$variants | {"Property": ["Value", ...]} | inside a component-set template: the layer exists only in variants with those values (other variants leave it out instead of hiding it) |
Media
| Key | Forms | What it does |
|---|---|---|
$image | file path | file:// | data: URL | https:// URL | "photo:QUERY" | "hash:HEX" | an image fill (with scaleMode fill, fit, crop or tile); URLs and photo searches are fetched once and cached; hash: reuses an image in the document |
scaleMode | "fill" | "fit" | "crop" | "tile" | how $image fits |
svgPath | SVG path data | vector: one subpath (M, L, H, V, C, S, Q, T, Z) |
$svg | <svg> markup | vector layers from every shape (one per subpath, with fill and stroke), scaled to width/height; currentColor takes "color" (alpha included), and "fill" (a color or gradient) paints what currentColor fills |
$icon | "set:name" (Iconify: lucide, mdi, tabler, ...) | an icon: an instance of the component "Icons/set:name" (made on first use in the "Icons" frame), with size and color; $override {"Icon": "lucide:moon"} or modify {"$icon": ...} swaps it |
Node types
frame, row, column, grid, text, rectangle, ellipse, vector, line, paragraph, component-set, plus the containers of the language (row, column, grid, stack, ring).