Groups & layers

This chapter dives deeper into the layering of elements. You'll learn how elements are layered and how you can influence the hierarchy of the elements on your page. We'll also cover the ability to group layers together and changing their settings, like renaming them, hiding them from view, or locking them so you can't accidentally drag them around anymore.

Layering

Each element on your canvas corresponds with an layer in the Layers panel. If you select a layer on the canvas, it also gets highlighted in the Layers panel.

Layer hierarchy

The layer at the top of your Layers panel lies on top of all the others. You can drag the layers in this panel around to change the hierarchy and make sure that a specific element covers another.

Grouping elements

With the shift-key held down, it's possible to select multiple elements at once. You can use this to apply a settings to multiple elements at once, or you can group these elements together with cmd+g (Mac) or ctrl+g (Windows). Grouped elements can also have animations and interactions applied to them, causing all elements within the group to follow along with this animation or interaction automatically.

Group & Layer settings

Selected layers on the canvas are represented by a green border surrounding them. Groups are indicated by an orange border and a 'folder'-icon in the Layers panel.

In the Layers panel, you can find a few more settings for every single group or element. Double-clicking the layer name will allow you to change it. Next to that, there's a lock-icon that, when clicked, prevents us from being able to select the group or element on the canvas. And next to that you'll find an eye-icon that, when clicked, hides the element from the canvas entirely. This last option specifically becomes useful when combined with interactions.