Frames in Formo

What is a frame?

A frame is a container with its own properties: position, size, corner radius, and an optional clip so contents can't spill past its edge. Use it for anything that should behave like a self-contained region: a character, a background, a screen.

Creating and naming a frame

Creating a frame

1. Select the Frame tool from the toolbar in Prototype mode, or press F.

2. Click and drag on the canvas, the same way you'd draw a rectangle. The frame appears sized to exactly the area you dragged out.

3. Anything you draw or place inside that area from then on becomes the frame's contents. It's a structural relationship, not just visual overlap.

Two variants live in the same toolbar slot as Frame: Laptop and Mobile — device-oriented frame variants for building screens at a device-shaped canvas, rather than an arbitrary rectangle you'd size by hand.

Naming a frame

Every frame shows its name as a small label above it on the canvas. Double-click that label specifically (not the frame's body) to rename it in place; double-clicking the frame's body instead does something different (see below).

Editing frame properties

Select a frame, and the right panel shows its properties like any other object: Transform (position, size), Fill, Stroke, plus one frame-specific control: corner radius, for rounding the frame's own edges.

Transform: Position (X/Y). Where the frame sits. By default this measures the frame's own top-left corner; switch this in Settings to measure from the rotation pivot instead if you'd rather work that way — a document-wide preference, not something you set per-frame.

Transform: Dimensions (W/H). The frame's width and height. Dragging the frame's own resize handles on the canvas updates these live, and typing exact numbers here does the same thing in reverse.

Transform: Rotation. The frame's angle, in degrees, with the same rotate/flip-horizontal/flip-vertical icon buttons sitting next to it as any other object. Every object also has a draggable rotation origin (the small crosshair at its center). Move it outside the frame's own bounds, and rotation sweeps a wide arc around that external point instead of spinning in place.

Corner radius. Frame-specific, rounds the frame's own edges — draggable via the small handle just inside each corner on the canvas, or typed as an exact pixel value here. This affects the frame's own outline; it doesn't reshape or clip its contents on its own; that's what clip-content (covered next) is for.

Fill. The frame's own background: solid color, gradient, image, or shader fill, stackable the same way any other object's fill is. This sits behind everything placed inside the frame, functioning as its backdrop.

Stroke. The frame's own outline: weight, position (inside/center/outside its edge), join style, and dash/gap if you want it dashed — identical mechanics to stroke on any shape.

Clipping contents to a frame

Frames carry one more functional setting: a clip-content toggle. Turn it on, and anything inside the frame that extends past its own edges gets cut off cleanly at the boundary — useful for a device-screen frame where content shouldn't spill past the edge, or any composition where you want the frame's shape to act as a hard crop. Turn it off, and contents are free to extend past the frame's own bounds, visible anyway, exactly as if the frame weren't cropping them at all.

This is a separate concern from corner radius, even though both live in the same part of the panel: corner radius only reshapes the frame's own outline, while clip-content decides what happens to everything inside it. A frame with heavily rounded corners and clip-content turned on will crop its contents to that same rounded shape, not just a plain rectangle, since the clip follows whatever the frame's actual outline currently is. Toggle clip-content off on that same rounded frame, and content can spill straight past those rounded corners in a hard rectangular overflow, ignoring the visual roundness entirely. This combination — rounding plus clipping together — is exactly how you'd build something like a rounded video-player frame or an app-icon-shaped mask around a busier composition underneath it.

Getting into a frame's contents

Double-click a frame's body (not its name label) to drill directly into it, selecting whichever specific child sits under your cursor. This is the normal way to reach into a frame and work on one specific thing inside it without disturbing the rest; you don't need to hunt through the layers panel first, or worry about accidentally grabbing the frame itself instead of what's inside it.

This drill-in behavior isn't limited to one level deep, either. If the object under your cursor is itself a container (another frame, a group, nested inside the first), a further double-click drills into that one too, progressively deeper with each double-click, exactly matching the generic containment rule this same gesture follows everywhere else in Formo. A character built from a frame, containing a group, containing another frame for just the face, is reachable this way one double-click at a time, without ever needing to select each intermediate level manually from the layers panel first.

Click empty canvas space, or press Escape, to back out to the frame-level selection again, and doing this repeatedly steps back out one level at a time, the exact reverse of how you drilled in.

Moving objects into and out of a frame

- On the canvas: drag an object and drop it inside the frame's boundary.

- On the canvas: drag an object and drop it inside the frame's boundary.

- In the layers panel: drag the object's row onto the frame's row to reparent it in directly.

Either way, this is a structural move, not just a visual reorder. Dropping a shape onto a frame's row actually reparents it, changing where it lives in your document's hierarchy, not merely where it happens to be drawn. Importantly, the object doesn't visually jump anywhere when this happens: whatever screen position it was already sitting at is preserved exactly, with its internal coordinates recalculated relative to its new parent frame automatically, behind the scenes. You'll never see a shape teleport somewhere unexpected just because you reparented it; the only thing that changes is what it's now considered a child of.

Dragging an object out past the frame's edge on the canvas, or dragging its row out from underneath the frame's row in the layers panel, removes it from the frame and returns it to being a sibling alongside the frame instead of a child inside it (again, without any visual jump, the object staying exactly where it visually was through the whole move).

Frames and animation

A frame isn't just a visual container; it can own its own independent timeline too, the same way a brush layer or a component can. Put a frame's contents on their own clock, running at their own frame rate and length, separate from anything else in the document, and it'll still stay locked in sync with everything else through the same shared underlying tick.

This is the same mechanism covered in full in Frame-by-Frame Animation: every container's timeline (whether it belongs to a frame, a brush layer, a component, or a skeleton) ultimately reads off one shared 240-tick-per-second master clock underneath, which is precisely what lets a frame animate at, say, 24 frames per second while something nested inside a completely different frame runs at 12fps, without either one ever drifting out of sync with the other over a long shot. Practically, this means a frame isn't just a way to organize your layers spatially; it can be an independently-timed animated unit in its own right, with its own keyframes and its own F5/F6/F7 workflow scoped to whatever's inside it specifically.

Locking a frame

A frame can be locked from its layers-panel row too, the same as any other object. See “Pinning and locking elements”.

Next up — Groups: a simple way to combine multiple objects and work with them as one.