Groups in Formo

What is a group

A group is a simpler way to treat several objects as one unit, for when you want to move, select, or transform a handful of shapes together without giving them the fuller structure a frame carries. Think of it as the difference between a folder with real properties of its own (a frame) and just a rubber band around a handful of items so they act as one (a group).

Creating a group

1. Select the Group tool from the toolbar (it lives as a flyout alternate under Frame, alongside Laptop, Mobile, and Section), then click and drag on the canvas, the same way you'd draw a frame. An empty group appears sized to the area you dragged out, ready to have objects placed or dragged into it afterward.

Formo frame tool menu showing group options

2. Select two or more existing objects and press Ctrl+G. They're combined into a group immediately, shown as a single row in the layers panel with the individual objects nested underneath it. This is the faster route whenever you already have shapes on the canvas you want treated as one unit going forward.

Groups can nest inside other groups the same way frames can nest inside frames: a group containing another group, containing individual shapes, is a perfectly normal structure, and the same drill-in and reparenting mechanics described below apply at every level of that nesting, not just the outermost one.

Editing a group's properties

Select a group, and the right panel shows a noticeably lighter set of properties than a frame does: Transform (position, size) and Appearance (opacity, blend mode) — that's it. No fill, no stroke, no corner radius, no clip-content toggle. A group is deliberately minimal: it exists to let several objects act as one, not to carry visual properties of its own.

Formo group properties panel

Transform: Position (X/Y) and Dimensions (W/H). A group's position and size are entirely derived from what's inside it; there's no independent width or height to set directly the way a frame has. Move or resize the group, and every object inside it moves or scales together, proportionally; add or remove something from the group, and its bounds recalculate automatically to fit its new contents, instantly, without you needing to manually resize anything to compensate. Even though the position is derived rather than authored directly, it's still a readable and settable value. Dragging the group by its bounding box, or setting its position from a formula, works exactly the way you'd expect, moving every contained object together by the same offset.

Transform: Rotation. Rotates every object inside the group together, as one rigid unit, around the group's rotation origin — the same draggable crosshair covered for frames. Move that origin outside the group's bounds beforehand, and the whole group swings around that external point instead of spinning in place, exactly like a frame does.

Appearance: Opacity. A single opacity value applied to the group as a whole, on top of whatever opacity each individual object inside it already has. Set the group to 50% and every object inside dims together, multiplicatively: an object that was already at 80% opacity on its own ends up rendering at 40% overall once the group's own 50% is factored in, rather than every object inside being forced to an identical, flattened value. This is what keeps relative transparency differences between objects inside a group meaningful even after the whole group fades; something that was already more transparent than its neighbor stays proportionally more transparent, all the way down to fully invisible as the group itself approaches 0%.

Appearance: Blend mode. How the group as a whole composites against whatever's behind it (Normal, and the standard set of blend modes); again, layered on top of each individual object's own blend mode rather than replacing it, so a group-level blend mode and per-object blend modes inside it compose together rather than one overriding the other.

What's deliberately absent. No fill, no stroke, no corner radius, no clip-content toggle: a group has no visual surface of its own to apply any of these to. If you need a background color, a border, or a hard crop around a collection of objects, that's exactly the case where you want a frame instead of a group.

Getting into a group's contents

Double-click a group on the canvas to drill directly into it, selecting whichever specific child sits under your cursor, the exact same gesture and behavior as a frame's drill-in. If that child is itself a container — a nested group, say — a further double-click drills into that one too, progressively deeper with each double-click, the same generic containment rule frames follow. Click empty canvas space, or press Escape, to back out to the group-level selection again, one level at a time.

Moving objects into and out of a group

- On the canvas: drag an object and drop it onto or inside the group.

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

This is a structural move, not a visual reorder, and it doesn't shift the object on screen when it happens: whatever position it was already visually sitting at is preserved exactly, with the underlying coordinates recalculated relative to the group automatically. Dragging an object back out (past the group's visual bounds on the canvas, or out from underneath the group's row in the layers panel) removes it from the group and returns it to being a sibling alongside the group instead of a child inside it, again without any visual jump.

Ungrouping

Select the group and press Ctrl+Shift+G. Its contents are released back to being independent objects at the level the group used to occupy: the group row disappears, its former children take its place directly, each one keeping its exact visual position and appearance from the instant before the group was dissolved.

Locking a group

A group can be locked from its layers-panel row too, the same as any other object — see Pinning and locking elements.

On this page

Formo

The browser studio where drawings become animations, toys, and games. Your files, open HTML export, nothing to install.