In the third class of the Figma beginners course, we are going to learn how to use the shape creation tools.
Before we start creating shapes like crazy, let’s learn the difference between a group and a frame. The groups will allow us to treat several layers as if they were one. Frames are frames and have special characteristics in Figma.
Although it is not necessary to create a frame to be able to design in Figma, it will be very useful when we want our design to have a specific format, for mobile phones, tablets, desktops or smart watches. We even have formats for paper and for social networks. Let’s see how they work. Go for it!
You see, the frames and groups are going to be very useful in our work with Figma. Now we are going to learn that there are six tools for creating shapes in Figma:
- Rectangle
- Line
- Arrow
- Ellipse
- Polygon
- Star
Each tool has its peculiarities: with the rectangle we can create squares and rectangles, with the line we can divide contents or create different strokes in the shapes; with the arrow we will create arrows of one or two directions; with the ellipse we will create circles and ovals, with the polygon we will create multi-sided closed shapes and with the star, we will create multi-pointed star shapes.
In addition, each tool has its keyboard shortcuts:
- Create proportional shapes by pressing the Shift key on the keyboard.
- Create shapes from the center by pressing Alt.
- Do both, by pressing Shift + Alt.
And once the shapes are created, we can vary their characteristics and we can:
- Round the corners, Corner Radius (we can round all at once or just some of the corners of the layer).
- Enter edit mode and create new nodes.
- Access Advanced Stroke options and change Cap, Join, or create Dashes.
- On the ellipse and the star, change the Ratio, which is the percentage distance from the center to the layer’s boundaries.
Let’s see it, because a video is worth a thousand words:
In addition to creating the shapes with these tools, we can use the pen (Pen) and the pencil (Pencil) to design our custom vector drawings. This is known in Figma as vector networks or Vector Networks.
This time, we are going to see how easy it is to draw a prism with the pen tool (Pen) and a freehand arrow with the pencil tool (Pencil). Go for it!
You have seen how easy it is to draw and how Figma helps us to get the best result, it’s almost magic!
I invite you to do the following exercises:
- Create a triangle and a circle and group them with the keyboard shortcut CTRL+G on Windows or CMD+G on Mac. Then create a star and make it part of that group by dragging the layer from the Layers panel (Layers ). Make sure you have not created a new group containing the triangle and star group, but a single group containing all three layers.
- Create a Frame with the dimensions of the latest iPhone model.
- Create a square with the Rectangle Tool and add a 1px top border, colored red. To create the border, use the Line tool.
- Create a shape with the Star Tool, which has 9 points (Count), with rounded corners with a Corner Radius of 16 pixels and a Ratio of 40%. Go into edit mode, select a single point and change its Corner Radius, for that point only, to 4 pixels.
- Draw a cube with the pen tool (Pen) and round all its corners. To do this, in addition to modifying the Corner Radius, you will have to use the Advanced Stroke options and select Round in the Join.
Have you seen everything you have achieved? And this is just a beginner’s course! Bravo! Figma is great.
I remind you that I am available to answer your questions on the intranet support form. See you in the next topic!
Remember that if you will have access to everybody the courses and you can also enjoy everything from .
Facebook Comments
Disqus