Create a logo and icon set
Figma 101
Build a simple logo and icon set using shapes and the Pen tool.
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 SE. 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 Properties panel to the right, 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 18 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
Zoom in a bit and then click and drag a marquee around the two shapes you just made. At the top of the Properties panel, select the “Align Horizontal Centers” and “Align Vertical Centers” buttons.
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, 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 in the middle of the toolbar at the top, 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 [[Ctrl]][[E]] (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's not intuitive.
One of the reasons for this is that in these other programs, 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 wanted the next point to connect to. When hovering over a point you’ve already made, you can see a black dot just below your cursor, indicating that you're about to add to the vector network. If in doubt, 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 clicking “Done” in the toolbar at the top of the interface. You’ll then need to re-select the pen tool and start on the next icon.
Here’s how we went about it:
10. Practice moving points, adding midpoints, and deleting points
After you’ve clicked “Done” (or have hit [[Escape]]), you can double-click on a vector network to edit it. Once you’ve re-entered vector edit mode, you can move individual or multiple points at once, add midpoints to lines, and delete points without breaking the network.
- To move multiple points while in vector edit mode, click and drag a marquee around a series of points you’d like to move. Grab one of the selected points or a line extending from one of the selected points and drag to move it.
- To add a midpoint to a line segment, hover your cursor over a line you’d like to edit. Click on the white circle that appears on the line (your cursor will also show a “+” symbol). Now, you can grab the Pen tool and draw a line starting from that new point. Or, you can grab it and move it around.
- To delete a point without breaking the network, you must be in vector edit mode and have the Pen tool selected. Only then can you hold [[Option]] (Mac) or [[Alt]] (PC) and click on a point you wish to remove without deleting a whole section of lines. Using the [[Delete]] key removes all lines connected to that point you deleted. We’ll demonstrate both scenarios and the first two tips in the video below.
Day 3 is done! Nice work.
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
Design the Next Two App Screens
Add a photo stream and post page to your app.
