This is a condensed walkthrough of a layout test documented on Craft Apps Guide, an independent guide to ArtCraft apps. The example was checked with official FigCraft 0.7.0 on macOS 27.0.1 (Apple Silicon). The results below describe that version and test file; they are not a promise about every release.
The goal is simple: make a card whose description wraps when space shrinks, while the button stays below the text and the card grows vertically.
Build the parent card
Create a frame 400 px wide and turn on vertical Auto Layout. Give it 24 px padding and a 16 px gap between children. Set the frame's vertical sizing to Hug, so its height responds to its content.
If the children remain at free positions, check that they are actually inside the frame and are not set to absolute positioning.
Add content with the right sizing
Place a 32 px circular icon, a 24 px heading, and a 16 px description inside the card. Set the description's horizontal sizing to Fill and its vertical sizing to Hug. That combination keeps the text within the available width while allowing additional lines to increase the card height.
If the description expands sideways instead of wrapping, change its horizontal sizing from Hug to Fill (or give the text a fixed width).
Nest a button
Create a horizontal frame for the button, give it 12 px padding, add the label “Read notes,” and use Hug sizing in both directions. The button should fit its label and remain below the paragraph. If the label overflows, inspect the sizing of both the button frame and its text.
Stress-test before reusing it
Duplicate the card into 400 px and 260 px versions. Test both a short and a longer description, then save and reopen the editable file. In the documented native renderer test, the outcomes were:
| Variant | Rendered size | Observation |
|---|---|---|
| Short text, 400 px | 400 × 219 px | One description line |
| Long text, 400 px | 400 × 257 px | Three description lines |
| Short text, 260 px | 260 × 219 px | Button remains inside the padding |
| Long text, 260 px | 260 × 295 px | Five description lines |
The important check is that narrower or longer text makes the card taller without covering the button. Fix clipping and fixed-height text before using the pattern in a real screen.
These four cards are separate examples, so edits to one do not update the others. Keep the .figcraft file as the editable source and use the PNG only as a visual reference. The full FigCraft Auto Layout guide includes the actual native render, sample file, component example, and source notes.
Top comments (0)