Updated October 14, 2026. Written for FigCraft 0.5.1 (what changed since).
Keys you'll use
The editor starts with one empty file. Click into the canvas first so the keys reach FigCraft and not the browser.
| Action | Mac | Windows and Linux |
|---|---|---|
| Frame / rectangle / text tool | F / R / T | F / R / T |
| Add auto layout to the selection | Shift+A | Shift+A |
| Remove auto layout | Option+Shift+A | Alt+Shift+A |
| Suggest auto layout for a messy selection | Ctrl+Shift+A | Ctrl+Alt+Shift+A |
| Duplicate | Cmd+D | Ctrl+D |
| Create component | Option+Cmd+K | Ctrl+Alt+K |
These match FigCraft's keymap, which copies Figma's documented shortcuts, so what you learn here carries straight over to Figma.
Hug, Fill and Fixed
Every layer in an auto layout frame has a width setting and a height setting, and each one is in one of three modes.
| Mode | What the size follows | Where it's offered |
|---|---|---|
| Hug | The children plus the padding | Auto layout frames and text |
| Fill | The space left in the parent after padding, gaps and fixed siblings | Only on a child inside an auto layout frame |
| Fixed | The number you type; children don't change it | Any layer |
Min and max width and height sit on top of all three, so a Fill child can stop growing at 480 px and a hugging text layer wraps once it reaches its max width.
Build 1: a button that grows with its label
- Press T, click on the canvas and type Continue.
- With the text selected, press Shift+A. FigCraft wraps it in a new auto layout frame.
- In the Design panel, give the frame a fill colour, a corner radius of 8, and padding of 12 on top and bottom and 24 on the sides. You can also drag the padding handles on the canvas.
- Check that the frame's width and height are both set to Hug.
- Double-click the text and change it to Continue to payment.
The button widens as you type and keeps 24 px on each side. That is Hug at work: the frame's width is the text width plus the left and right padding, recalculated on every edit. Set the frame's width to Fixed and type the long label again: the button keeps its width while the label outgrows it, because the frame no longer listens to its child.
Build 2: a settings list whose rows fill the card
This one teaches Fill and the rule that comes with it.
- Draw a 24 × 24 rectangle (R) as a stand-in icon, and a text layer reading Notifications next to it.
- Select both and press Shift+A. You now have a horizontal row. Set its gap to 12.
- Duplicate the row twice (Cmd+D or Ctrl+D) and change the labels to Privacy and Storage.
- Select the three rows and press Shift+A again, and set the new frame's direction to vertical if it isn't already. This is the card. Give it padding of 16, a gap of 8 and a white fill.
- Set the card's width to Fixed and type 343.
- Select the three rows and set their width to Fill. Then select the three labels and set their width to Fill as well.
The rows now span the card, and each label takes whatever the 24 px icon and the gap leave over. Drag the card's edge and the rows follow.
Two things to notice. Fill only appears on layers inside an auto layout frame, so the card itself, sitting on the canvas, never offers it. And when a child is set to Fill, a parent that was hugging on that axis turns Fixed. That isn't a bug: a parent can't size itself to children that are sizing themselves to the parent, so one side has to give. When your card suddenly stops growing after a Fill change, this is why.
Want a chevron pushed to the right edge of each row? Add it as a third child and set the row's gap to Auto (space between) instead of making the label Fill. Both give the same look; Fill is better when the label might get long enough to wrap.
To reorder, select a row and press the arrow keys: the row moves one place in the stack. Dragging a row up or down does the same.
Build 3: tags that wrap onto a new line
- Make one tag the way you made the button: a short text, Shift+A, padding 6 and 12, a corner radius of 999 for a pill shape, width and height on Hug.
- Duplicate it five times and change the labels (Hiking, Trail running, Climbing and so on).
- Select all six tags, press Shift+A and set the direction to horizontal. You get one long row.
- Turn on wrap in the auto layout settings, set the frame's width to Fixed at 300, and set both the gap and the row gap to 8.
Tags that don't fit move to a new row. Drag the frame narrower and more of them drop down; drag it wider and they climb back. Wrap works vertically too, starting a new column when the height runs out. For a strict grid of equal cells, FigCraft also has grid auto layout with fixed, hug and fr tracks; its fr tracks behave like the CSS unit, so a track never gets narrower than its content.
Pin a badge outside the flow
Sometimes one child shouldn't take part in the layout: a "New" badge on the corner of a card, or a close button on a sheet. Select it and turn on Ignore auto layout (absolute position). It stays inside the frame and the layer list, but the other children close the gap as if it weren't there. Its constraints now apply, so set it to the top and right and it sticks to that corner when the card resizes.
When auto layout fights you
- Fill is missing from the menu. The layer isn't inside an auto layout frame, or it is the top-level frame. Wrap its parent in auto layout first.
- The frame won't shrink any further. A frame can't be smaller than its padding, even on Fixed. Lower the padding or the min size.
- Text runs off in one long line. Set the text layer's width to Fill, or give it a max width, so it has a width to wrap at.
- A 1 px border pushes everything over. An inside stroke counts toward the layout; centre and outside strokes don't. Switch the stroke's position, or turn off strokes included in layout.
- Children overlap. The gap is negative. Negative gaps overlap on purpose (avatar stacks use them); set it back to 0 or more.
- Labels in different sizes don't line up. Switch the row's alignment to text baseline. A layer without text, such as an icon, keeps to the top of the line.
These rules come from Figma's help documentation, which FigCraft's developers turned into test cases for its auto layout. They haven't yet compared layouts against real Figma files, so check a complex screen you bring over from Figma against the original.
Next: make it a component, then fix a real screen
Select the button from Build 1 and press Option+Cmd+K (Ctrl+Alt+K on Windows and Linux) to make it a component. Drag a couple of instances out of the Assets panel (Shift+I) and change their labels: each instance still hugs its own text, while a colour change on the main component reaches all of them.
For harder practice, take a screen that was drawn without auto layout and rebuild it. The AI panel designs a mobile screen from a sentence and adds it as nested groups with absolute positions, which is exactly that kind of screen; it runs on your own OpenAI, Gemini or OpenRouter key, or on Craft Apps credits (10 free for a new account). Or export a frame as SVG from any design tool and bring it in with Import SVG or image in the editor's top bar. Select the layers of one row, press Shift+A, and work outward until the whole screen resizes cleanly.
Everything you build in the browser is gone when you close the tab. When you're ready to keep a design, download the desktop app, which saves .figcraft files and exports PNG, SVG and PDF. FigCraft as a free Figma alternative covers what else the app does and doesn't do yet.