Groups

Groups enable you to contain multiple elements in a single top-level layer.

You can use groups to: quickly select many layers, composite multiple layers as a single layer, apply effects blocks to multiple layers, and transform multiple layer through one set of controls.

The layers contained by a group are called children layers. The transform properties of children are relative to a group's transform origin instead of the global coordinate system of the canvas. Any transforms you make on the group will be applied to the group's children – for example, if you translate a group 20px, all the children will also move 20px on the canvas.

Making a group is non destructive—meaning you won't permanently combine layers together. Groups are really useful when you want to combine similar items together and manage less layers within your project.

Group dimensions settings in Fable help you determine how a group's size is influenced by the elements it contains.

You can access these settings by selecting a group and finding the "Dimensions" section on the Inspector.

1. Resizing behavior

Fable has two resizing options for groups: Hug and Fixed.

You can apply separate resizing behavior for the group's width and height.

Hug

When you use the Hug setting, the group's dimensions dynamically adjusts based on changes to the layers within it. The group's dimensions will be the smallest size needed to surround the canvas area its children take up.

Hug resizing is dynamic over time. If a layer inside the group changes size or position over time, the group's size will automatically adjust to fit the new canvas area of the children.

Hug is the default resizing behavior for groups on Fable.

Fixed

When you use the Fixed setting, the group's dimensions stays the same, no matter the size or position of the layers inside it. This setting gives you complete control over a group's dimensions, the area any effects blocks are applied to, and the bounding box size of the group on the canvas.

2. Dimensions

This field displays the current dimensions of the group.

If the respective dimension is set to Hug resizing, this field will be non-editable since the dimensions are dynamically calculated by the group's contents.

If the respective dimension is set to Fixed resizing, you can change values in this field and animate them.

3. Clip contents

Use this checkbox if you want to hide any items in a group that go outside the group's dimensions. This is helpful when a group with a Fixed dimensions property is smaller than its contents, and you want to hide the layers that don't fit.

Clip contents takes into account the group's size each frame, so if the group's dimensions change overtime, the clipping mask will be dynamically updated.

There are multiple ways to create Groups on Fable.

Use the keyboard shortcut

1. Select one or more layers
2. Use the ⌘Gkeyboard shortcut to group the layer(s)

Use the context menu

1. Select multiple layers
2. Right click the layers on the Canvas or the Timeline
3. Select the "Group selection" option to group the layers

Use the toolbar

1. Select multiple layers
2. Click the Group button () on the toolbar