When creating the interface of an app, it is all about Objects and Shapes. Take your phone, open the app you use the most, and let’s decompose the design. You will see that the icons, options, and buttons are squares and rectangles. Yes, as simple as that. This tutorial will show how to manipulate Objects and Shapes using Figma.
Objects and shapes are all we need to create our design, they are what we include inside the frame… oh nooo, don’t know what a frame is? Check out our tutorial on How to Create a Frame.
Do I need to create a frame to understand how to manipulate shapes and objects? In theory, you don’t, but since we are also learning to properly place these objects and shapes into the frame, it would be the best.
Now, to create a shape, go to the top toolbar, select the shape option, and choose whatever shape you prefer.
By clicking on it, you can move the shape around the canvas. If you want to move the shape to another page inside your Design File, simply use Ctrl/Command + C to copy the shape, select the page you want to move the shape too, and then use Ctrl/Command + V to paste it and place it anywhere inside the canvas. If you want to change its color, select the shape and press the option Fill.
Then, choose the color you prefer.
Now, we must integrate the shape into the canvas. You might notice that when you move the frame it doesn’t include the shape. It seems that everything goes on its own and we need the family together.
To do this simply press the shape and drag it into the frame, make sure the frame is highlighted, and drop the shape. Now the shape is inside of the frame.
