Learning objectives:

  • Combine shapes using “Boolean operations”
  • Explore the Pen tool
  • Discover the power of vector networks
  • Design a logo for our app
  • Begin creating a set of icons

Time to complete: 30 minutes


Today’s tutorial

Hey! Welcome back to Day 3 of Figma 101. Today we’re going to create a logo and some icons for our app, using shapes and the exciting “vector network” functionality of Figma’s Pen tool. (More about that later.)

1. Open up your Figma file, and create a new Frame

Just like yesterday, let’s open up the same file in Figma and add today’s work to it. Generally it makes sense to keep all of the work for a project in a single file, because it allows us to easily move and duplicate elements between Frames. As we’ll see on Day 5, it’s also crucial when it comes to creating app prototypes.

For today, though, let’s hit F and create a new iPhone 8 frame. We’re not going to make the next app screens until tomorrow, but today we’ll use this blank Frame to create our logo and icons in.

2. Draw a rectangle for the camera body

Inspired by Instagram’s logo, let’s create a little camera logo just using shapes. This is as simple as stacking a couple of circles on top of a rectangle. First, press R, and drag a rectangle 64 pixels by 64 pixels. If the size isn’t quite right, you can tweak it by changing the size values in the Inspector to the right of the window, or by resizing the rectangle using the resize handles.

3. Round the corners of the rectangle

Next, round the corners of the rectangle just like we did on Day 1 when we made our button. This time, set the corner radius to be 8 pixels.

4. Draw a circle for the camera lens

Then, press O to select the ellipse (circle/oval) tool. Click and drag to create a circle that’s 32 pixels by 32 pixels. You can hold down Shift ⇧ while doing this to “constrain” the shape—meaning that that height and width stay the same. Set it to have a white fill color so that we can see it on top of the rectangle.

5. Align the two shapes horizontally and vertically

Click and drag a marquee around the two shapes you just made, and then click the “Align Horizontal Centers” and “Align Vertical Centers” buttons at the top of the Inspector.

6. Create another circle for the light meter

Finally, create another circle, this time 8 pixels by 8 pixels, and set that to have a white fill too. Position it so that it’s at the top-right of the rectangle shape (4 pixels from the top and 4 pixels from the right). Pro tip: you can check the position of any shape relative to another shape by selecting it, holding down Option (Mac) or Alt (PC), and hovering over a second shape.

7. Use “Boolean operations” to turn the camera into a single shape

There’s a group of commands in Figma called “Boolean operations”. These allow you to take two or more shapes and unite them into a single shape, or subtract one shape from the other, or even isolate where the shapes overlap.

For our camera logo design, let’s click and drag to select all of the three shapes we just created—the rounded rectangle and the two circles. Then, click the tiny arrow next to the “Boolean Groups” icon at the top of the interface, and select “Subtract Selection”:

Finally, use the Flatten command to convert the camera into a single vector object. With the logo selected, hit E (Mac) or CtrlE (PC). Doing this means that the shape will resize correctly.

8. Create a 3D box using the Pen tool

So far today we’ve created a logo just using shapes and Boolean operations. But we can also draw using the pen tool—and in Figma, the pen tool has superpowers, aka “vector networks”. To understand what vector networks are, here’s a bit of background info.

In most graphics applications, including Photoshop, Illustrator, and Sketch, there is a Pen tool (sometimes called the Vector tool). The Pen tool is usually viewed with suspicion by new users, because it can been quite unintuitive to use.

One of the reasons for this is that in these other packages, the pen tool is entirely linear: the points in a shape could only be connected A to B to C to D, and so forth. Paths could be “closed” by being joined back up to their starting point, but that was it.

Figma has redesigned the Pen tool to add “vector network” functionality. This means that a single point can now be connected to any number of other points. Also, when it comes to setting a fill color for a vector shape, you can choose which of the enclosed areas within the shape the fill will apply to.

As an example, here’s how we went about drawing a 3D box using vector networks. We recommend turning on Pixel Grid— ' on Mac, or Ctrl' on PC—and adding a square-based Layout Grid to the Frame, so that you have a visual guide for how to place and align your points.

Notice how, once we’d completed the first enclosed space, we had to select a previously created point to tell Figma which point we want the next point to connect to. If in doubt, just click an existing point, and that will define the connection for the next point you add. Now try it yourself!

9. Create a set of icons

Once you’ve experimented a little with vector networks by drawing that 3D box, let’s go ahead and create a simple icon set! Using the vector network functionality, draw an envelope icon, a home icon, and a back arrow.

Note: because points don’t have to be connected to one another in Figma’s Pen tool, it’s easy to accidentally create multiple shapes within the same vector element. So once you’ve completed one icon, make sure to exit that shape by click “Done” in the Options panel at the top of the interface. You can then re-select the Pen tool and start on the next icon.

Here are our tries at those three icons:

10. Practice editing, moving, or aligning the points within shapes

Note that currently Figma doesn’t give you too much help when it comes to aligning and positioning your points. But if you select the Move tool V and double-click any shape you’ve made, you can move the points around, and even use the alignment and distribution commands at the top of the Inspector to line things up. Try it out!

Day 3 is done! Save today’s work to your Version History.

Now that we've created a few icons, we’re ready to build more of our app screens. Tune in again for tomorrow’s lesson, when we’ll be creating a nav bar, photo stream, and more.

Today’s bonuses

+ Sample file with today’s completed assignment
+ Figma’s launch post explaining vector networks