Fanta docs
Guides

Build a card with auto-layout

Create and verify a small vertical composition.

  1. Call get_guidelines, then get_editor_state with empty_space: [360,220]. Use its coordinates for the new top-level frame.
  2. Use batch_design to create_node with node_type: "frame", a name, size 360 × 220, and a solid fill. Give the batch a label such as "Create sign-in card".
  3. 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.
  4. Use set_auto_layout with direction: "vertical", gap, padding, and intentional axis sizing; style text with set_text_style, using auto_height when a paragraph should wrap. Use set_layout_child for a child's growth or alignment. Auto-layout controls child positions, so do not also set child x/y.
  5. Screenshot the frame, correct spacing if needed, then review the autosaved .fnx diff.
{"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.