Figma is a web-based application that can be used for creating vector graphics and also for prototyping, which makes it the perfect tool for UI design projects. One of the best features of Figma is that it is primarily a web-based application so it has all the benefits of the cloud and allows collaboration within a team.

While Figma can be used on your browser, it also has a desktop app for both Mac and Windows with offline features and a mobile app for both iOS and Android that can be used to view and interact with prototypes.

The best part about Figma is that it intends to remain free forever for personal use. If you are familiar with other similar tools such as Adobe XD, or Sketch, Figma should be quite easy to figure out. If you are having difficulties getting started, don't worry. This guide should help you learn the basics of designing with Figma.

Getting Started with Figma

You can start using Figma for free by simply going to to their website and clicking the “Try Figma for free” button. It will redirect you to a sign-up page, where you can create an account with your Google account.

After you have created your account, you can either use Figma on your browser, or you can download the desktop application for your device and continue working there.  

Once you open the Figma app or load it in your browser, you will be on the home page of the Figma app. Figma even provides a couple of guides for you to get started on a fresh install, .

Figma Home Page

Navigation is relatively simple. On the left-hand side, there is a rudimentary navigation system which can filter your files on the preview pane by recent or draft files. The community tab will send you to the Figma community, which is a great place to find plugins and helpful Figma design files.

Figma community
✨
Designers can create and share their design files on the Figma community, so other designers can find and use their assets. 

For instance, say you need to create a website and need some icons, you can simply search for icons on the community page, and get lots of free resources.

You can either look for design files to reuse resources or look for Plugins specifically, which can be installed and used in all of your design files once you install them.

Resources in Figma community

Creating your First Figma file

In Figma, you can create two different types of files. The first one is a Figma design file which is used for designing and creating prototypes. The second one is a FigJam file, which is basically an online whiteboard. FigJam is great for brainstorming and having discussions in a team meeting. There are also a lot of templates for starting a FigJam file.

ℹ️
This article will focus on creating Figma design files from now since a FigJam file is pretty easy to figure out.

Let's get started with a Figma design file. Click on the New Design File button to create a new file. You will get a new tab with an empty Figma file.

Empty Figma file

Rename your file by clicking on the Untitled text at the top of your workspace.

Basic Navigation and Tools

1. Main Menu

The top navigation bar has all the basic Figma tools. The first button is the main menu. It has all the file menu options.

ℹ️
The plugins installed from the community can also be used from this menu.
Main Menu

2. Shape Tools

The shape tools do exactly what they say they do. From the drop-down menu, you can choose a shape to create. Alternatively, you can use the keyboard shortcut R for a rectangle, L for line, and O for an ellipse.

💡
You can hold down the Shift key while dragging your mouse to create a perfect square, a straight line, or a perfect circle.
Shape Tools

3. Frame Tool

The frame tool is where all interface designing takes place. Once you click on it, a panel opens up on the right-hand side with all the frame options. You can click on any of the options depending on what you are planning to design to get started.

💡
You can use the shortcut key F for the frame tool.
Frame tool on Figma

4. Pen and Pencil Tool

Figma also has a pen and pencil tool. The pen tool is similar to any other vector design application like in Adobe Illustrator. The pencil tool is like a brush tool, which is easier to use with a drawing tablet rather than with a mouse. But Figma does have smoothing enabled which makes the lines appear smooth even with a mouse.

✨
You can get the pen tool with the shortcut key P and the pencil with the shortcut keys Shift + P.
Pen and Pencil Tools

You can edit the pen tool strokes by pressing the Enter or Return key. Figma also has a Bend tool for editing the anchor points and handles in the stroke.

Working With Pen and Pencil Tools

5. Text Tool

The text tool on Figma is pretty straightforward. Once you've typed out a text, you can change its properties on the Text panel on the right-hand side.

💡
You can use the shortcut key T to use the text tool.
Text Tool

6. Navigation and Hand Tool

You can hold Space and drag your mouse to pan around on the canvas or you can use the Hand Tool. Once you click the hand tool, your cursor will turn into the hand, and clicking and dragging will pan your view around the canvas.

Hand Tool on Figma
💡
You can use the shortcut key H to use the hand tool.

You can also zoom in and out easily by holding ⌘ or Ctrl and scrolling with your mouse, instead of using the ⌘/Ctrl and +/- buttons.

7. Comment Tool

Since Figma allows unlimited collaborators in a project file, there is also a comment tool.  You can also mention team members by their username as such @team-member-name.

💡
You can use the shortcut key C to add a new comment.

This tool is really helpful for communication between team members.

Comment Tool

That's all for the first part of this article! We have gone through Figma's basic tools and navigation. For the next part, we will be exploring more features on Figma, so stay tuned for that update!

Thanks for reading and catch you in the next one! Don't forget to subscribe by clicking the buttons below if you liked what you read.