In this lesson, we will first get a Figma account and then move on to learn the very basics of the tool. Finally, we will look at a number of powerful features.

Getting the account#

Go to the Figma website. Figma offers a generous free plan, but it does have certain limitations. We won't use any paid features, so you aren't missing out on anything if you want to keep your wallet tight.

Figma is a web-based application, which is actually pretty impressive, given how advanced it is. You run it either in your browser or, if you prefer, as a native application wrapping the web experience. You can download it when you are logged in by clicking your profile in the upper right corner then clicking Get desktop app. I will be using the desktop version; if nothing else, so I can keep some order in my browser tabs. You do you!

Let's get the show on the road, shall we? Create a new design file.

Getting a feel for the basics#

You'll see something like this when you start.

Hold space and then drag-click with the mouse to move around.

Hotkeys#

Pinch-zoom or CTRL + MOUSE SCROLL to zoom

F for frame

S for slice

R for rectangle

L for line

SHIFT + CMD + K for image

P for pen, SHIFT + P for pencil

T for text

V for the move arrow

K to scale

C to comment

In the center, you'll see the work area. At the very top, you can set the file's name. Give it a meaningful name.

Also at the top is the toolbar, where you will find the small set of primary tools that Figma provides. I think it's pretty swell to open up a full-fledged design app and not be overwhelmed by tools. On the top right, you will see the profile button, zoom level, and a couple of icons that relate to sharing the file and starting the prototyping mode.

To the left is where you will find layers, assets, and pages. A layer is similar to a layer in Photoshop if you ever used that. An asset is a component or something else similar stored in Figma. There is a search here as well if you click Assets. A page is just that: another page to organize your work.

On the right-hand side, you have the Design, Prototype, and Inspect tabs. The first two tabs offer a selection of pre-sized frames for either design or prototype modes. The Inspect tab offers functionality to extract CSS from selected items. We'll, of course, get more powerful extraction abilities later, given that course is about Figmagic.

Frames and things#

One basic concept is the frame. You can think of the frame as a container to keep things in. Your exact metaphor may be different given your own context, but that's how I think of it. Press F to quick-select the Frame tool.

With the tool selected, drag out a roughly square frame into the middle work area. You'll see the pixel size as you drag. If you hold SHIFT while dragging, you can enforce angles and symmetry, like making a perfectly square box. Don't worry about that now, though—just put something out in the 500 x 500-pixel range.

Press R to choose the Rectangle tool. Place a box inside the frame. Click the box once, and start dragging it around inside the frame. You'll notice that it starts snapping to edges and corners. If you release it and go near the box with your cursor, it'll highlight distances to its respective edges.

Notice on the left that the layers panel is populating: it has a frame and a rectangle inside of it. You can use this to place things in relation to each other. To group many things into a distinct group, select them (either in the work area or in the layers panel) and press CMD + G.

Make sure the rectangle is selected. In the right-side panel, you can see a representation of the coordinates of the rectangle and its size. Edit the W (width) value to 150 and the H value to 75. You can also decide to constrain proportions by clicking the paperclip-looking button to the right. If you click it and try to update either the W or H values, you'll find that it automatically also updates the other value to keep the shape intact.

Speaking of constraints, let's look at those and use them for our rectangle. First, let's put the rectangle in the middle. Drag it until you get the red indicator lines and release it. Resize the frame a bit by pulling it in one of the corners. Use CMD + Z to undo if you released too early. So what's the deal? Seems totally uninteresting? Correct. You saw that the frame can clip the contents, in other words, our rectangle. Let's use constraints to see our rectangle move according to the frame dimensions.

With the rectangle selected, under the Constraints section, edit the settings to use Center for both horizontal and vertical options.

If you try to rescale the frame again, the rectangle will adjust according to the constraints you set. This can be a very powerful way to mock responsive layouts and similar dynamically-sized designs.

Color and form#

The next thing we will do is to start molding the ugly gray rectangle into a basic button.

With the rectangle selected, let's give it a fresh dab of paint. On the right, under Fill, click the colored square and pick any color you like. The color picker is pretty flexible, so you can use any colorspace you want, like RGB, HSL, etc. There's also a set of color swatches and a selector that'll likely say Document colors. This will collect any unique colors in your current document. You can click it and see any shared color palettes as well if you have any. It's really to set these reusable colors up across files and projects.