In our previous tutorial How To use Objects and Shapes, we explained how every app and web application design is based on Shapes and Objects.

You learned how to create a Shape, how to place it in the frame, how to change its color, and very importantly, how to integrate the shape into the Frame.   In this tutorial, we will explore more properties this tool has to offer.

One Shape, Endless Possibilities

What happens when I have lots of shapes placed in the Frame? I would like to move the shapes without moving the Frame, heeeelp. Don’t worry, as you go on with the design, you will be managing more than just 1 shape. You can even use many of them.

So, when we have shapes that respond to similar semantics -let’s say buttons-, you can group them easily in different ways:

1. Left-clicking and dragging the mouse over the objects you want to group, as long as they are outside the frame. Then, right-click and select the Group option.
2. Hold Shift and then select each shape one by one. Then, right-click and select the Group option.

Grouping Shapes helps when you want to resize them at once and move them around outside or inside the frame. 

Let’s talk about Objects

In its simplest definition, an Object in Figma can be a Shape, an Icon, an Image, or any element you will be manipulating. It also can mean groups of elements. In this case, we have a group of Shapes which means we have 1 Object. 

If you want to edit an Object within a group just click on the dropdown button at the left menu and then just press the Object you want to edit.

The importance of knowing the proper terms and their functions is that it will facilitate communication with your team. The purpose of Figma is collaboration, so keep that in mind and always have fun exploring Figma.