As you have seen, working with just a single shape might be tricky, but what if we select multiple objects?

Edit profile button at Medium

That seems natural, in even a simple button is a combination of two objects: a line of text and a rounded rectangle.

Having to move these two objects separately would be rather resource consuming and we’re talking about a very basic UI design element.

in Figma

So, does multiple object selection solve the problem?

Not really. UI designs may have thousands of independent shapes and manually selecting them could be extremely time consuming.

So, why not just combine multiple objects in groups?

Sounds great, let’s do this! Moving objects has become much easier.

But now we have even more problems: we cannot resize groups.

Well, technically we can, but the end result is likely to be very different from what we have expected:

Group resizing in Sketch prior to version 44, by Joseph Angelo Todaro

In most interfaces objects within groups are not just randomly positioned boxes, paragraphs and curves, they have certain meaning. And this meaning cannot be easily guessed by a machine.

Developers have been using constraint-based layouts for quite a while, yet most UI design inherited this logic just a few years ago.

Designing responsive screens in Sketch with Anima

You (or a machine) set constraints within a group, combine groups, set their relative constraints and voilà, your mockups now look fine in a wide range of screen resolutions.

But during this process groups have become much more than easily accessible object selections. They define their content behaviour and appearance.

In some cases you may even override a certain object’s content or appearance. These “groups on steroids” are often referred to as symbols or smart objects.

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here