/
Group Layer
In this article, we will be discussing the group element in KappaX. Grouping elements together is an essential function for any designer or developer.
Understanding Grouping
In KappaX, grouping layers together can be based on simple visual composition or interactivity. When you group things together, you can hide and show all layers together at once, which saves you time and helps you write less logic.
Benefits of Grouping Layers Together
Using groups in KappaX can unlock a flexible workflow for creating customized layouts. Here are some benefits of grouping elements in KappaX:
- You can craft complex screens quickly and easily.
- You can create groups that change their shape and size based on interactions.
- You can manipulate groups as a single entity, saving you time and effort.
- You can organize your layers in a hierarchical structure, making it easier to manage and edit your designs.
- Writing logic & deciding the flow of the experience becomes easier.
Creating a Group
To create a group for selected layers, select the layer you want to group while pressing the SHIFT key. Then press CTRL+G (Windows) OR CMD+G(Mac) to create a group. Alternatively, you can create an empty group layer by dragging it onto the artboard and then add a layer to it via the layer panel. Simply select the layers and drag them inside the group layer.
Relationship Between Layers
To better understand grouping in KappaX, let's define the relationship between layers as Parents, Children & Siblings.
- Parent: A parent layer is a group layer that contains other elements inside it.
- Children: Children are the elements that are contained within a parent layer.
- Siblings: Siblings are the elements that are contained within the same parent.
Child layer eligibility
Every element can be a child layer, including a group element.
Layout Constraints
By default, the group doesn’t have any layout constraints on the child layer. You can drag the layers anywhere on the artboard. However, any children layer that lies outside of the bounds of the group will not be visible.
Nested Groups
Nesting groups are another way of organizing layers in KappaX. It allows you to create hierarchical relationships between groups, just like in the way you structure layers in Figma, Adobe XD, and other design tools. Here's how you can nest groups in KappaX:
- Select the layers you want to group together. and add them to a group.
- Next up, inside this group, you can select the layers again & add them to another group.
- This way, you can make as many nested groups as you want.
- In the example below, "Splash Screen" is the parent for the "Splash Header" group. The "Splash Header" group is the child of "Splash Screen" and at the same time, the parent of the text layers inside it.