UX/UI course from scratch. Lesson 10. Figma basics VII. Curves

In Figma Basics Part 7, you'll learn how to work with curves at an advanced level. While you've already learned about Boolean operations that allow you to create complex vector shapes, this is just the tip of the iceberg. With the Pen tool, you can create literally any shape.

Why should a designer be able to work with curves? This will come in handy in creating custom icons, which are an integral part of any interface. It is not necessary to create pictograms from scratch, just download a suitable template and manually correct it for your task.

Secondly: drawing illustrations to which the same techniques apply. Illustrations are more complex than icons. They are made to attract the attention of users.

• Bezier Curves
• Curve Types
• The Pen Tool in Figma
• Create linear curves from start to finish
• Curve Editing
• Move tool. Moving points
• Bend tool. Curvature control
• Paint Bucket tool. Filling closed paths
• Stroke Settings
• Corner Rounding
• Adding and removing points
• Convert strokes to outlines
• Websites with free icons
• Export to SVG
• Homework
• Conclusions

Bezie Curves

Bezier curves are a mathematical tool for describing curves used by Pierre Bézier in the 1960s to design Renault car bodies.

This discovery played a key role in the design of both 2d and 3d computer graphics. Shapes based on Bezier curves are called differently, depending on the application, but the essence does not change. You may come across such terms: spline or path.

Curve Types

All Bezier curves can be divided into several types depending on the number of points from which they are composed (see figure from top left to right):

• linear
• quadratic
• cubic
• higher orders

Typically, graphic applications use sequences of cubic Bezier curves to build any shape. With the theory sorted out, let's move on to the practical part.

The Pen Tool in Figma

To draw curves in Figma, the Pen tool (hotkey P) is used. Interestingly, it can be used to create any standard primitive (rectangle, circle, and so on). Moreover, any primitive can be quickly converted to curves. But we'll start with linear curves, where the control points don't smooth out and the final shape looks angular.

Create a curve

The steps to create a curve looks like this:

1. Select the Pen with the P key or by clicking on the pen icon on the toolbar.
2. We click in the place where we want to put the first point. Please note that the top panel has changed instantly and now includes only 4 tools and the "Done" button. This is how Figma signals that it is in curve editing mode.
3. We continue to click on the workspace to set new points. Once we have two points, lines begin to appear between them.
4. Hold down the Shift key to temporarily limit the angle of the created lines and make them a multiple of 45 degrees. In practice, this makes it easy to draw perfect horizontal, vertical, and diagonal lines.
5. There are several ways to specify the last point of a shape:
   • Click the "Done" button on the top bar.
   • Press Enter on the keyboard.
   • Press Esc twice. The first click will cause the curve to complete inside the vector object. That is, you can continue clicking and create another line within the same layer. Pressing Esc a second time will force Figma out of edit mode.

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

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

You can also create closed shapes when the first and last points match. This will allow you to paint closed areas in the future.

Draw a circle

As I mentioned earlier, you can draw anything with curves. I know that the circle is not the most difficult shape possible, but a good exercise for a beginner. In addition, we need to practice building smooth and closed shapes. To simplify my task, I drew an auxiliary grid. The fact is that when drawing a perfect circle, you need to mark points at the same distance and with identical degrees of smoothing. Let's get started.

Remember that you need to create points by holding the left button and moving the cursor. Release the left button only when you are satisfied with the curvature of the line. Set aside at least 10 minutes of your time and practice drawing smooth outlines to get used to it.

Editing 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 stop there, you can:

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

First you need to enter edit mode:

1. Select vector object. It can be not only a curve, but also most primitives: a rectangle, an ellipse, a line, and so on.

2. Next, one of the options below:

   • Press the Enter key
   • Make a double click on the vector object. In this case, you do not need to preselect. Perhaps this is the easiest way.
   • Click on the left square icon (Edit Object) at the top center.

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

Move tool. Moving Points

Hot key V. Allows you to select and move one or more points of a vector object with the mouse. Holding down 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 tool. Curvature control

First, activate the Bend tool (in translation it means to bend, which already suggests the purpose) by clicking on the icon of a rounded line with two dots (second from the right) on the toolbar. To control line smoothing:

1. Move the cursor to any line between two points. A curved line icon will appear in the lower right corner of the cursor.
2. Press the left mouse button and drag. The line will begin to follow your movements, trying to adjust to the position of the cursor. If the shape was angular, then guide points will appear at the same time, which set the curvature.
3. Release the left mouse button to fix the curvature.

To control smoothing through a curve point:

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

The following shows all of the above techniques, including using the Shift and Alt keys:

To control smoothing through guide points:

1. Move the cursor to any guide point of the curve. An icon with a dot and two guides will appear in the lower right corner of the cursor.
2. Left-clicking will remove the guide.
3. Left click 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. Also, holding down the Shift key to snap to the angle of inclination works here.

It often happens that the guides are not visible, but the shape of the line shows that they are there. In such cases, you need to switch to the Move tool and select the desired point. 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. It is enough to constantly work in the Move mode to select points and show guides. And switch to the Bend mode using the Ctrl or Command hotkey on MacOs. Please note that the hotkey must be held down while you are using the tool, as immediately after releasing the key you will return to Move mode.

Let's see how it looks in practice. Notice we are starting in Bend mode, only two point guides are visible. Next, switch to Move mode, select the desired points and hold down Ctrl (Command on MacOs) to quickly correct the guide points or the curvature of the lines:

The Paint Bucket tool. Filling closed paths

Allows you to selectively paint over the closed contours of a vector figure. The fill settings are available in the Fill section and completely repeat the capabilities of ordinary primitives. Instructions for use:

1. Select the tool by clicking on the drop icon or by pressing the B hotkey.
2. Click inside the closed path to paint over the area. A plus sign will be added to the drop icon.
3. Re-click inside the filled outline to remove the fill.

It would seem, 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 right, but if you need to paint over not all the contours, but only some, then this is not so easy to do.

Set Stroke

We are already familiar with some of the stroke settings from the first Figma tutorial. Let's now take a look at the advanced options:

• The drop-down menus at the bottom left and right define the shape of the path's start and end points. Of course, if the contour is closed, then we will not notice anything.
• By clicking on the icon with three dots at the bottom right, you can access advanced settings. See paragraphs below.
• Stroke style — stroke style: Solid — solid, Dashed — dotted. When choosing a dashed style, additional options are added: Dash — dotted line length, Gap — pass length, Dash cap — dotted shape.
• Join — dot connection form: Miter — automatically beveled if the angle of inclination is less than the Miter angle, Bevel — permanently beveled, Round — rounded.

Round corners

You can round the points of the curve, and in an alternative way:

1. Select the spline and go into edit mode.
2. Select the desired points.
3. Specify the degree of roundness in the Corner radius field in the properties panel on the right.

Note that this rounding method does not affect point guides and only works with angular paths. If you set the curvature of the lines using the Bend tool, then the rounding will not work.

Adding and removing points

As I mentioned above, you can add and remove points at any time. Once in edit mode, try the following to copy a point:

1. Select the Move tool (V key).
2. Move the cursor over the point you want to copy.
3. Hold down the Alt button. The cursor will change to double, as if telling us that it is ready to copy the point.
4. Hold down the left mouse button and drag the cursor. The new point will follow the cursor. Note that another line is formed because the original point was connected by a line to the other.

To add a point inside an existing line:

1. Select the Pen Tool (P key).
2. Move the cursor inside the line where we are going to add a point. Figma will tell us the middle of the line. Also, a plus sign will be added to the cursor in the lower right corner.
3. Make a left click. Point added.

To remove a point:

1. Select the Pen Tool (P key).
2. Move the cursor over the point you want to delete.
3. Hold down the Alt key. A minus will be added to the cursor in the lower right corner.
4. Make a left click. The point has been removed.
5. Another good option: if you select a point with the Move tool and delete it with the Delete button, then Figma will not connect adjacent points and a separate path may form inside the layer. This method is ideal if you are removing individual outlines, for example, extra elements of a downloaded icon to simplify it.

You can also add points outside existing lines. In this case, the vector object will consist of several contours.

Convert Stroke to Outlines

At some stages of work, and especially before exporting the icon to SVG format, it may be necessary to convert all lines to outlines. In other words, convert the stroke to closed paths with a fill. This must be done in order for the icons to be displayed correctly in the browser. After this operation, you will no longer be able to adjust the thickness of the stroke or any of its other properties except for the color. Therefore, perform this operation last. There are several ways to convert:

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

To make sure that the transformation was successful, just enter the edit mode and see the new points and curves.

Free Icon Sites

Now you know most of the tricks for working with curves. In the second Figma tutorial, you learned how to import a file using drag and drop. Back then we were using raster files, but vector SVG files are exactly the same.

There are many sites with free SVG icons. They are convenient in that they allow you to search by keywords. Here we can not 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 easy search. Many ready-made sets by theme.
• Font Awesome — 1600+ free icons in the same style as rubricator.
• Cursor.in — tiny site with a collection of all MacOs cursors.

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

Export to SVG

To export an icon to an SVG file, you must first prepare it:

1. Create an empty frame and insert a vector object inside. There may be several. Icon frame sizes are usually multiples of 8 pixels. Suitable are: 16x16, 24x24, 32x32 and so on. If the icon does not fit, reduce it.
2. Align the icon to the center of the frame. Make sure the vertical and horizontal padding is even.
3. Convert all strokes to outlines.
4. Recolor all elements black. The fact is that developers know how to recolor icons, if necessary.

Now everything is ready. It remains to perform the export itself:

1. Select the frame with the icon.
2. In the right panel, click on the plus sign opposite the Export section (it is the last one).
3. In the drop-down menu, change the format to SVG.

Homework

1. Select 8 icons and draw them using the Pen tool.
2. A task of increased complexity. Optional. Select 4 icons, simplify them and thicken the stroke.
3. Prepare all drawn icons and export them to two separate folders (light, regular — for thick ones). Make sure the icons have clear names. Place two folders in a zip archive. Learn how to archive files yourself if you don't know how.

Conclusions

In this tutorial, you've learned advanced curve techniques. By combining this knowledge with boolean operations, you can draw icons and illustrations of any complexity. But this is more a specialization of a graphic designer. It is important for you to learn how you can tweak an existing icon and fit it to your needs.

Inventing and rendering icons is a very broad and complex topic, which we will touch upon more than once in the future.

Stay tuned!