The most annoying thing about designing complex interfaces in a tool like Inkscape, Illustrator, Axure or Balsamiq is managing the grouings of the elements:

• All buttons of a window should be grouped in the window.
• Search icon should move with the search input field.
• A menu item should be grouped in the menu.

Image: The button on the right section in the example should be grouped with the enclosing window

Most tools solve that with manual groups and defining stack order: If you don't use these functions, things don’t move together and occlude each other.

But there is an useful pattern to exploit:

1. Elements that are visually “inside” another element should move with the larger enclosing element.
2. Elements that are visualy inside an element should also be in front of that element, otherwise they would not be visible.

This can be used for automatic stack- and group management: When you drag an element in another element, it is grouped inside this element and stack-wise in front of the enclosing element. The resulting tree structure is similar to HTML in which you can have links-elements in a navigation-bar-element.

Now there might be one problem: Sometimes you want an element almost inside another, like this:

Image: the + button would be grouped within the gray bar

How would that work? In the example above, we just take full enclosure. What if we take an anchor point? This is already known: In graphics programs you can define the anchor for rotating the shapes. One could also define an anchor for triggering the grouping.

Image: The rotation anchor (crosshairs-symbol) in Inkscape

The grouping-by-enclosure can be tried in quickMockup and with figma’s frame tool which seems to have the same behaviour (but not their shapes, which don't auto group).

I would be happy if people would give this a try in their products – I found it useful.

Note 2019.11.05: I found that the draw 2D library has an “autogrouping” feature which they call “raft”: “Raft figures are shapes, which aggregate multiple figures. It works like a real raft. Aboard figures are moved if the raft figures moves.” (from their docs). It probably existed some time before this post. Also, in the meantime I discovered that the digital collaboration tool whimsical.co also has such a feature. I asked, and they seem to have reinvented the interaction, too.

Idea: Autostack and Autogroup for creating interfaces by Jan Dittrich is licensed under a Creative Commons Attribution 4.0 International License.