Skip to main content

Adding Groups

Grouping design elements together helps you move and scale objects as a unified layer construct. Managing layer associations is handled by kittl.design.group.

Creating a Group​

Pass an array of object IDs (structureIds) to the group creation method. These objects will be bound into a new associative group inside the current artboard structural system.

const groupingResult = await kittl.design.group.createGroup({
    structureIds: ['shape-id-123', 'text-id-456']
});

if (groupingResult.isOk) {
    console.log('Successfully structured group');
}

Adding and Removing Group Elements​

You can modify an existing group by throwing new items into it or kicking items out without destroying the whole group.

// Add new objects to an existing group
await kittl.design.group.addIntoGroup({
    groupId: 'existing-group-id',
    objectIds: ['new-image-id']
});

// Eject specific objects from a group
await kittl.design.group.removeFromGroup({
    objectIds: ['shape-id-123'] // The group they belong to is inferred
});

Removing a Group​

Once clustered, these items are managed as a single layer. You can dismantle groups entirely by invoking the remove method, which ungroups all nested items back into the artboard.

const dismantleResult = await kittl.design.group.removeGroup({
    groupId: 'target-group-id'
});

if (dismantleResult.isOk) {
    console.log('Group dismantled successfully.');
}