Welcome to Figma 101!
Figma is a collaborative interface design tool that’s taking the design world by storm. Unlike Sketch, which runs as a standalone MacOS app, Figma is entirely browser-based, and therefore works not only on Macs, but also on PCs running Windows or Linux, and even on Chromebooks. It also offers a web API, and it’s free!
Another big advantage of Figma is that it allows real-time collaboration on the same file. When using conventional “offline” apps like Sketch and Photoshop, if designers want to share their work, they typically have to export it to an image file, then send it via email or instant message.
In Figma, instead of exporting static images, we can simply share a link to the Figma file for clients and colleagues to open in their browser. This in itself saves significant time and inconvenience in a designer’s workflow. But more importantly, it means that clients and colleagues can interact more richly with the work, and review the latest version of the file.
What we’ll cover in Figma 101
The aim of this course is to introduce all of the key functions in Figma. We’ll achieve that by building a set of app screens together. We’ll also use Figma’s prototyping functionality to link the screens together, meaning that you can experience how the screens will behave when they’re built as an app. You’ll be able to share your prototypes with friends, or develop your design further and add it to your portfolio!
Before we get started
Before we get started with today’s lesson, take a sec to work through our quick 1 minute goal setting exercise. We want to make sure you’re getting the most out of this course... and that by the end of it you’ve mastered the basics of Figma and accomplished any personal design goals! ⚽
Today’s learning objectives
- Find our way around Figma’s interface
- Experiment with some of the key functions
- Learn important keyboard shortcuts
- Figure out how to control the interface (zooming etc.)
- Create Frames, Rectangles, and Text layers
- Use Arrange and Align commands
Time to complete: 30 minutes
1. Set up your Figma account
Getting started in Figma is as simple as going to www.figma.com, clicking “Sign up”, and entering your details. Once you’ve done that, Figma will open up with a start screen like this. Click on “New File” and we’ll get started!
2. Take a look around the Figma interface
The look and feel of the Figma interface is quite minimal, but it belies a set of powerful features. Here’s an explanation of the interface’s main areas (labeled above):
- Unlike regular desktop design apps, Figma’s menus can be found by clicking the hamburger button in the top-left of the screen. Take a minute to browse around these menus and see what’s there! You can also search for the specific command you need. Start typing in “rectangle” and you’ll quickly find the Rectangle Tool, complete with a handy reminder of its keyboard shortcut (it’s R, by the way).
- Here you can quickly access the tools you’re likely to use most often: frames, shapes, text, etc. (We’ll cover all these tools in the next couple of days!)
- This area shows extra options for whichever tool you have selected. When no object is selected (as shown above), Figma displays the file name. When an object is selected, contextual options appear here.
- Where every element in the file is listed, organized into Frames and Groups.
- This is where you create and review all your work.
- The Inspector shows contextual information and settings for whatever object is selected. In the image above, we’re seeing options for the Canvas itself. Note that Figma gives us separate tabs in the Inspector (Design, Prototype, and Code)—we’ll cover these later in the week.
Now that you’ve found your way around, let’s start making stuff! Note that we’ll be referring to keyboard shortcuts a lot in these tutorials. It’s worth getting in the habit of using these shortcuts right from the off, because they’ll significantly speed up your workflow further down the line.
3. Create a Frame
In Figma, a Frame is essentially a container for other elements. If you’ve used Sketch or Adobe Illustrator before, it functions in the same way as an Artboard. Press F to select the Frame Tool. Alternatively, you can click the Frame Tool icon in the Options panel at the top of the window. Equally, if you’re used to Sketch, you can also hit A (for “Artboard”).
There are a couple of ways of creating a Frame. We can either click and drag in the canvas area, or we can select a pre-set Frame size from the Inspector on the right hand side of the window. Try both ways now!
4. Practise zooming in and out
You’ll probably find yourself wanting to zoom in and out quite a bit in Figma, particularly once we start working with multiple Frames. The standard zoom commands are accessed with ⌘+ and ⌘-. Try it now!
Those commands will just focus in on the center of your current view. But there are some other handy zoom commands available:
- Shift ⇧2 will zoom to the current selection
- Shift ⇧1 will zoom to show the whole canvas
Select the Frame by clicking on its name, then try alternating these commands to switch between the selection and the whole canvas.
Finally, here’s an *extra* handy zoom tip to move between Frames without having to zoom in and out the whole time:
- N will zoom to the next Frame
- Shift ⇧N will zoom to the previous Frame
5. Practise using the hand tool to move around the canvas
Another useful tool, particularly when you’re zoomed in close or working on a large file, is the Hand tool. Try pressing spacebar and you’ll see a hand icon pop up. Click and drag to move the whole canvas around. If you’re working with a Mac trackpad, you can do the same by dragging on the trackpad with two fingers.
6. Create a Text layer
Next, let’s create some text. Press T to select the Text tool, and click anywhere within your iPhone 8 frame to create a Text layer. This is going to be part of a button design, so let’s type “Sign In”. Hit Escape to exit the Text tool.
7. Create a rectangle and arrange the layers
Press R to select the Rectangle tool. Drag a button-shaped rectangle around the text you just created.
Currently, the text is hidden underneath the rectangle. To fix this, we need to use Figma’s “Arrange” commands. Head over to the Layers panel on the left of the window. Select the “Sign In” text layer, then right-click (PC/Mac) or ctrl-click (Mac) to bring up a list of options. Click “Bring to front”, and the text will now be placed on top of the rectangle.
You can also access Arrange tools using keyboard shortcuts:
- ⌘]: bring forward
- ⌘Opt]: bring to front
- ⌘[: send backward
- ⌘Opt[: send to back
- Ctrl]: bring forward
- CtrlShift ⇧]: bring to front
- Ctrl[: send backward
- CtrlShift ⇧[: send to back
8. Align the text and rectangle
This being a button, we want the text and rectangle shapes to be centered relative to one another. Figma has a set of “Align” commands that allow us to do this. Make sure that the Move tool is selected by pressing Escape, or V, and then drag a “marquee” (a rectangular selection) around the text and the rectangle.
This time, we can access the Align commands in the Inspector (the interface area to the right of the window). Click “Align Horizontal Centers” and “Align Vertical Centers” to get the two objects nicely lined up.
9. Add rounded corners to the rectangle, and change the color
Select the rectangle shape you just created. In the Inspector, there is a setting called “Corner Radius”, which allows us to make the corners of any shape rounded. Here, type in the number of pixels you want each corner be rounded by.
To max out the corners and create semi-circles at each end of the rectangle, just enter a number larger than half the object height. (We set ours to 32 so that we’re covered in case we want to make the button a bit bigger later on—but try out some different numbers and see what happens!)
The color settings can also be found in the Inspector. We often want to attract people’s attention with buttons—so select the rectangle, and pick a bright color! We’ve gone with a bright yellow by typing in a hex code (#EEEE33)—but you can also click to open the color palette, and pick a color that way.
10. Change the font
With the text layer selected, you can access settings in the Inspector to change the font, as well as font size, weight, and color. We’ve stuck with Roboto, but switched up to bold and uppercase text. Try exploring the options!
Way to go!
That brings us to the end of Day 1 of Figma 101! We’ve found our way around the interface, tried out a few basic tools, and created a button that we’ll be able to use in our app.
The final thing to do for today is to give our file a name—to do this, just deselect all objects (Escape will do the trick), and click where it says “Untitled” at the top of the window. Then type something like “Figma 101 App”. That’s it! Figma stores all your files in the cloud.
See you again tomorrow, when we’ll be creating our first app screen.