Lesson 13. Curves

In the seventh part of the Figma fundamentals, you will master working with curves at an advanced level. And while you are already familiar with boolean operations that allow you to create complex vector shapes, this is just the tip of the iceberg. With the Pen tool, you can recreate literally any shape.

Why should a designer know how to work with curves? This is especially useful when creating custom icons, which are an integral part of any interface. It’s not necessary to create icons from scratch; it’s enough to download a suitable template and adjust/fine-tune it manually for your task.

Secondly: drawing illustrations, to which the same techniques apply, the only difference is that they are usually more complex and serve a different function compared to icons (drawing attention).

• Bezier Curves
• Types of Curves
• Pen Tool in Figma
• Creating Linear Curves from Start to Finish
• Editing Curves
• Move Tool. Moving Points
• Bend Tools. Controlling Curvature
• Paint Bucket Tool. Filling Closed Shapes
• Stroke Settings
• Corner Rounding
• Adding and Deleting Points
• Converting Stroke to Curves
• Websites with Free Icons
• Exporting to SVG
• Homework
• Conclusions

Bézier Curves

Bézier Curves – are a mathematical tool for describing curves, which was used by Pierre Bézier in the 1960s for designing the body shapes of cars for the Renault company.

Over time, this discovery played a key role in design and computer graphics in both 2D and 3D directions. Shapes based on Bézier curves are referred to differently depending on the software, but the essence remains unchanged. You may encounter terms such as spline and «paths».

Types of Curves

All Bézier curves can be conditionally divided into several types depending on the number of points from which they are composed, which determines their complexity (see the image above from left to right):

• linear
• quadratic
• cubic
• higher order

Usually, cubic Bézier curve sequences are used in graphic applications to create any shapes. Now that we've covered the theory, let's move on to the practical part.

Pen Tool in Figma

To build curves in Figma, there is the Pen tool (hotkey P). Interestingly, with its help, you can create any primitive (rectangle, circle, etc.). Moreover, all primitives can be quickly converted into curves. But let's start with linear curves, which are characterized by the fact that the control points are not smoothed and the final shape looks rough.

Creating a Curve

The sequence of actions to create a curve looks like this:

1. Select Pen using the P key or by clicking the pen icon on the toolbar.
2. Click where you want to place the first point. Note that the top panel has instantly changed and now includes only 4 tools and the "Done" button. This is how Figma signals that you are in curve editing mode.
3. Continue clicking on the workspace to create new points. As soon as we have two points, a line begins to appear between them.
4. Hold down the Shift key to temporarily constrain the angle of the lines being created, making them multiples of 45 degrees. In practice, this allows you to easily draw perfect horizontal, vertical, and diagonal lines.
5. To specify the last point of the shape, there are several ways:
   • Click the "Done" button on the top panel.
   • Press the Enter key on the keyboard.
   • Press Esc twice. The first press will finish creating the curve inside the object. That is, you can continue clicking and create another line within the same layer. The second press of Esc will cause Figma to exit editing.

As you can see, our curve turned out awkward. To smooth the line, instead of clicking during creation, you need to hold down the left mouse button and move it until you get the desired shape. Then release the left mouse button.

With this technique, you can draw smooth lines. At first, it may seem like a difficult task, but with practice, you will realize that it is quite convenient. Plus, you can always edit the vector shape, which will be explained below.

In addition, you can create closed shapes, where the first and last points coincide. This will allow you to fill closed areas later.

Drawing a Circle

As I mentioned earlier, with curves, you can draw anything you want. I know that a circle is not the most complex shape possible, but it is a good exercise for a beginner. Moreover, we need to practice constructing smooth and closed shapes. To simplify the task, I drew a helper grid. The thing is, when drawing a perfect circle, you need to mark points at equal distances and with identical smoothing degrees. Let's get started.

Remember that you need to create points by holding down the left button and moving the cursor. You should only release the left button at the moment you are satisfied with the curvature of the line. Set aside at least 10 minutes to practice drawing smooth contours to get accustomed.

Edit Curves

As with primitives, you can change the proportions of vector objects simply by selecting them and dragging any of the corners or sides. But the editing possibilities don't end here, you can:

• Add more lines
• Change or move points
• Adjust curvature
• Add fill to closed contours

To start, you need to enter editing mode:

1. Select the vector object. This can be not only a curve but also most primitives: rectangle, ellipse, line, etc.

2. Next, one of the options below:

   • Press the Enter key
   • Double-click on the vector object. And here, prior selection is not necessary. This is probably the simplest way.
   • Click the left square icon (Edit Object) at the top center.

   After this, the toolbar will change. New buttons for working with spline editing tools will appear on the left.

Move Tool. Moving Points

Hotkey V. Allows you to select and move one or several points of a vector object with the mouse. The Shift key works here, just like when creating a new curve. You can also use the keyboard (arrow keys) to move points. This tool is activated by default when you enter edit mode.

Bend Tools. Curvature Control

First, we activate the Bend tool (which means to bend, already hinting at its purpose) by clicking on the rounded line icon with two dots (the second one from the right) on the toolbar. To control the smoothing of the line:

1. Hover the cursor over any line between two points. An icon of a curved line will appear in the lower right corner of the cursor.
2. Press and hold the left mouse button and drag. The line will start to follow your movements, trying to adjust to the cursor's position. If the shape had uneven angles and looked awkward, guiding points will simultaneously appear, which determine the curvature.
3. Release the left mouse button to lock in the curvature.

To control the smoothing through the curve point:

1. Hover the cursor over any point on the curve. An icon with a dot and two guides will appear in the bottom right corner of the cursor.
2. Press and hold the left mouse button and drag. Two symmetrical guides will extend from the point, and the lines on either side of the point will smooth out. To control only one guide, press the Alt key. To enable angle snapping (multiples of 45 degrees), press the Shift key.
3. Release the left mouse button to fix the curvature.

Below are all the techniques mentioned above, including the use of the Shift and Alt keys:

To control the smoothing via guide points:

1. Hover the cursor over any guide point of the curve. An icon with a point and two guides will appear in the lower right corner of the cursor.
2. Clicking the left mouse button will delete the guide.
3. Click the left mouse button and drag the cursor to change the angle of the guide along with the opposite guide, i.e., symmetrically. If you want to change the angle of only one guide, hold down the Alt key. The Shift key also works here to snap to the angle.

It often happens that the guides are not visible, but by the shape of the line, it is clear that they are there. In such cases, you need to switch to the Move tool and select the desired point. The guides will appear, after which you need to switch back to Bend mode.

Not the most convenient way to show guides. But there is a solution. You just need to constantly work in Move mode to select points and show guides. And in Bend mode, switch using the hotkey Ctrl or Command on MacOs. Note that you need to hold the hotkey while using the tool, as immediately after releasing the key, you will return to Move mode.

Let's see how this looks in practice. Note that we start in Bend mode, where only the guides of two points are visible. Next, we switch to Move mode, select the desired points, and hold down Ctrl (Command on MacOs) to quickly adjust the guides of the points or the curvature of the lines:

Paint Bucket Tool. Filling Closed Contours

Allows selectively filling closed contours of a vector shape. Fill settings are available in the Fill section and fully replicate the capabilities of regular primitives. Instructions for use:

1. Select the tool by clicking on the drop icon or pressing the hotkey B.
2. Click inside the closed contour to fill the area. A plus will be added to the drop icon.
3. Click again inside the filled contour to remove the fill.

It seemed, what is the advantage of this tool? After all, you can set the fill through the Fill section in the properties panel on the right. That's correct, but if you need to color not all outlines, but only some, then it is not so simple to do.

Outline Settings

We are already familiar with some stroke settings from the first Figma lesson. Let's now explore the advanced options:

• The dropdown menus in the bottom left and right set the shape of the starting and ending points of the contour. Of course, if the contour is closed, we won't notice anything.
• By clicking the three-dot icon in the bottom right, you can access advanced settings. See the items below
• Stroke style — stroke style: Solid — solid, Dashed — dashed. When selecting the dashed style, additional parameters are added: Dash — dash length, Gap — gap length, Dash cap — dash shape.
• Join — point joining shape: Miter — automatically beveled if the angle is less than the value set in the Miter angle field, Bevel — constantly beveled, Round — rounded.

Corner Rounding

You can round the points of the curve using an alternative method:

1. Go to edit mode.
2. Select the desired points.
3. Specify the rounding degree in the Corner radius field on the properties panel to the right.

Note that this rounding method does not affect the guide points and works only with the angles of contours. If you set the curvature of the lines using the Bend tool, rounding will not work.

Adding and Removing Points

As I mentioned above, you can add and remove points at any time. After entering edit mode, try the following for copying a point:

1. Select the Move tool (key V).
2. Hover the cursor over the point you want to copy.
3. Hold down the Alt key. The cursor will change to a double arrow, as if indicating that it is ready to copy.
4. Press and hold the left mouse button and drag the cursor. The new point will follow the cursor. Note that another line is formed since the original point was linked to another line.

To add a point inside an existing line:

1. Select the Pen tool (key P).
2. Hover the cursor over the middle of the line where we want to add a point. Figma will suggest the middle of the line. A plus will also appear next to the cursor in the bottom right corner.
3. Click the left mouse button. The point has been added.

To remove the dot:

1. Select the Pen tool (key P).
2. Hover the cursor over the point you want to delete.
3. Press and hold the Alt key. A minus will appear in the bottom right corner of the cursor.
4. Click the left mouse button. The point has been deleted.
5. Another good option: if you select the point with the Move tool and delete it with the Delete key, Figma will not connect the neighboring points and a separate contour may form inside the layer. This method is ideal if you are deleting individual contours, for example, unnecessary elements of the uploaded icon to simplify it.

Points can also be added outside existing lines. In this case, the vector object will consist of several contours.

Converting Strokes to Curves

At certain stages of work, especially before exporting the icon in SVG format, it may be necessary to convert all lines to outlines. That is to convert the stroke to closed shapes with fill. This is required so that the icons are displayed correctly in the browser. After this operation, you will no longer be able to adjust the stroke thickness or any of its other properties, except for color. Therefore, perform this operation as the last step. There are several ways to convert:

• Select the vector object and press Ctrl+Shift+O or Shift+Command+O on MacOs.
• Open the context menu by right-clicking on the desired vector object. Choose Outline stroke.

To ensure that the conversion was successful, it is enough to enter edit mode and see the new points and curves.

Websites with Free Icons

Now you know most of the techniques for working with curves. In the second lesson on working with Figma, you learned how to import a file using drag and drop. At that time, we used raster files, but with vector SVG files, everything works the same way.

There are many websites with free SVG icons. They are convenient because they allow you to search by keywords. Here we cannot do without knowledge of the English language or Google Translate. And here is our list:

• The Noun Project — 3,000,000+ (yes, over 3 million) free icons with convenient search. Many ready-made sets on various themes.
• Font Awesome — 1600+ free icons in one style with a categorizer.
• Cursor.in — a tiny site with a collection of all MacOs cursors.

To download an icon from The Noun Project, use the search bar. For example, I entered the keyword energy and pressed Enter. A list of icons will load. Choose the one you like. On the page that opens, you need to click the Get this icon. button. Next, select Basic Download, then Continue. Now click the SVG. button. The icon will download.

Export to SVG

To export the icon to an SVG file, it needs to be prepared in advance:

1. Create an empty frame and insert the object inside. There can be several. The sizes of frames for icons are usually multiples of 8 pixels. Suitable sizes include: 16x16, 24x24, 32x32, etc. If the icon does not fit, reduce its size.
2. Align the icon to the center of the frame. Ensure that the vertical and horizontal margins are even.
3. Convert all strokes to paths.
4. Recolor all elements to black. The thing is that developers can recolor icons if needed.

Now everything is ready. Only the export itself remains to be done:

1. Select the frame with the icon.
2. In the right panel, click on the plus sign next to the Export section (it's the last one).
3. In the dropdown menu, change the format to SVG.

Homework

1. Redraw 8 icons from the image below (theme: public catering, there are a total of 24 icons to choose from). Use all the tools you know, as well as the Pen tool we learned in this lesson.
2. Advanced difficulty task. Optional to complete. Choose 4 icons, simplify them (reduce the number of elements), and make the outline thicker.
3. Prepare all the drawn icons and export them in Svg format into two separate folders (light, regular – for thick outlines). Make sure the icons have understandable names. Place the two folders in a zip archive. Learn to archive files on your own if you don't know how.

Conclusions

In this lesson, you became acquainted with advanced techniques for working with curves. By combining this knowledge with Boolean operations, you can draw icons and illustrations of any complexity. But this is more the specialization of a graphic designer. It is important for us to learn how to edit icons and adapt them to the desired style.

I want to congratulate you on completing the course! If you had your homework checked, please write to me on Instagram so I can create a personal certificate of successful completion for you.

Continue learning