You can hold down Shift ⇧ while doing this to “constrain” the shape—meaning that that height and width stay the same.

Try it out!

This time, set the corner radius to be 8 pixels. 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. Tune in again for tomorrow’s lesson, when we’ll be creating a nav bar, photo stream, and more. 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. Doing this means that the shape will resize correctly.

Save today’s work to your Version History. Just like yesterday, let’s open up the same file in Figma and add today’s work to it.

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. Open up your Figma file, and create a new Frame. Set it to have a white fill color so that we can see it on top of the rectangle. This video tutorial (less than 48 minutes) shows you how to prototype, design a logo, and structure all the pages for a website. Finally, create another circle, this time 8 pixels by 8 pixels, and set that to have a white fill too.

Now that we've created a few icons, we’re ready to build more of our app screens.

Day 3 is done! (More about that later.) In most graphics applications, including Photoshop, Illustrator, and Sketch, there is a Pen tool (sometimes called the Vector tool). As we’ll see on Day 5, it’s also crucial when it comes to creating app prototypes.

But we can also draw using the pen tool—and in Figma, the pen tool has superpowers, aka “vector networks”. Add a photo stream and post page to your app. This means that a single point can now be connected to any number of other points. As an example, here’s how we went about drawing a 3D box using vector networks. The Pen tool is usually viewed with suspicion by new users, because it can been quite unintuitive to use. There’s a group of commands in Figma called “Boolean operations”.

With the logo selected, hit ⌘E (Mac) or CtrlE (PC). 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. Hey!

Note that currently Figma doesn’t give you too much help when it comes to aligning and positioning your points.

Paths could be “closed” by being joined back up to their starting point, but that was it. 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.

Inspired by Instagram’s logo, let’s create a little camera logo just using shapes. 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.

We want FigmaCrush to be that website, a place where you can find free and premium resources for Figma… Figma Brand Resource. You can then re-select the Pen tool and start on the next icon. 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. To understand what vector networks are, here’s a bit of background info. 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. Once you’ve experimented a little with vector networks by drawing that 3D box, let’s go ahead and create a simple icon set!

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. Using the vector network functionality, draw an envelope icon, a home icon, and a back arrow.

+ Figma’s launch post explaining vector networks. So far today we’ve created a logo just using shapes and Boolean operations. Looking for Logo files for print and web, and color specifications? Welcome back to Day 3 of Figma 101. Figma Templates In this feature, we'll be teaching you all about Figma, how to get started using it, and where to find the best Figma … Figma is taking the design world by storm, and we are convinced that its growing community needs a solid resource website to support its growth. Welcome back to Day 3 of Figma 101. (More about that later.).

For today, though, let’s hit F and create a new iPhone 8 frame. Now try it yourself! 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. 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.

First, press R, and drag a rectangle 64 pixels by 64 pixels. Next, round the corners of the rectangle just like we did on Day 1 when we made our button. 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. This is as simple as stacking a couple of circles on top of a rectangle. 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. 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. 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.

1.

Then, press O to select the ellipse (circle/oval) tool. Just like yesterday, let’s open up the same file in Figma …

Figma has redesigned the Pen tool to add “vector network” functionality.

+ Sample file with today’s completed assignment If in doubt, just click an existing point, and that will define the connection for the next point you add. + Sample file with today’s completed assignment, + Figma’s launch post explaining vector networks, Combine shapes using “Boolean operations”. Click and drag to create a circle that’s 32 pixels by 32 pixels.