How To Manipulate Objects and Shapes in Figma

Updated on: October 1, 2022

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.

YvA 0O8Th7I7O8f30Dk3 heLkabkwSCQSaA arkc9afyW3Li LRldvEPImQyALCmyQIQayroZq EWEA5gM5GjxxuHLrjQjqChNDVlXGYWgTsPAp27S061eDS2 GDUEwGHmgvFGHYicpUFf3bhZSEghgyYwOYyV0acBsZPd bfpPKgyhbLR0cuQdNVr2LLvfqd2VyYA

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.

Access 2,701+ video lessons. Instantly.
Start Learning Now →
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram