Guides
Build a card with auto-layout
Create and verify a small vertical composition.
- Call
get_guidelines, thenget_editor_statewithempty_space: [360,220]. Use its coordinates for the new top-level frame. - Use
batch_designtocreate_nodewithnode_type: "frame", a name, size 360 × 220, and a solid fill. Give the batch a label such as"Create sign-in card". - Read the returned frame ID. In a later batch, create heading and supporting text nodes with that ID as
parent. Give text boxes enough width and height. - Use
set_auto_layoutwithdirection: "vertical",gap,padding, and intentional axis sizing; style text withset_text_style, usingauto_heightwhen a paragraph should wrap. Useset_layout_childfor a child's growth or alignment. Auto-layout controls child positions, so do not also set childx/y. - Screenshot the frame, correct spacing if needed, then review the autosaved
.fnxdiff.
{"label":"Lay out card","ops":[{"op":"set_auto_layout","id":"<frame-id>","direction":"vertical","gap":12,"padding":[20],"primary_sizing":"hug","counter_sizing":"fixed"}]}For a gallery of cards, create a containing frame and call set_grid_layout with columns such as ["1fr","1fr","1fr"] and a gap. Its children fill cells row by row; pin a featured card with set_layout_child column, row, and span fields. See grid layout.