A Complete Figma Tutorial for Beginners

As an entirely free, browser-based tool with intuitive features galore, Figma is one of the most accessible design programs available. But for beginners, Figma can still be intimidating to jump into. 

Fortunately, a few straightforward steps are all that stand between you and Figma mastery. From creating beautiful designs to making presentation-ready prototypes to installing plugins, all of Figma’s capabilities are within your reach.

Quick Links

• How to Use Figma
• How to Create Website Wireframes 
• How to Make Prototypes
• How to Use Figma Offline 
• How to Install Figma Plugins 

How to Use Figma 

At its core, Figma is built to help users create designs. But if you want to start crafting logos, layouts and graphics of your own, you’ll first need to register for an account. 

To do so, open up your browser and navigate to Figma’s homepage. Then, click “sign up” in the upper right corner: 

Next, enter your preferred email address, create a password and enter your name when prompted. After clicking “create account,” you’ll need to confirm your email before finally entering Figma itself. 

Select whether you want to use a starter (i.e., free) or professional (i.e., paid) plan and enter the team name of your choice (it can just be your name if you’d like). 

The site will then ask you whether you want to create designs with the standard Figma app or use the online whiteboarding tool FigJam. Click “I’ll get started on my own” to go straight to Figma’s main dashboard. 

In the left-hand navigation bar, click “team project” under your chosen team name. This will take you to the project’s page, where you can click “new design file” in the upper left corner to start creating your first design. 

This will open a new tab in the upper navigation bar of your browser window (or Figma’s desktop app, depending on which one you’re using). From there, you can easily click back to the home menu at any time. 

Notice that in your blank design, there appears a large gray area. This is called the canvas, and it serves as the background of everything you do. 

For instance, you can: 

• Draw with the pencil tool 
• Import any images you want using any method you want
• Add geometric shapes
• Add multiple frames which allow you to make several designs on one canvas
• Create vector networks
• Use the Text tool to make your designs textual as well as visual
• Use object masks to control what’s concealed and what’s shown  
• Use the Arc and Ellipse tools to modify shapes
• Use Boolean operations to combine shape layers in whichever method you choose
• Combine layers with Groups and Frames

The possibilities are truly endless, so don’t be afraid to start playing with any functionalities that sound fun or useful. And if you get lost, you can always refer to Figma’s extensive documentation for guidance. 

How to Create Website Wireframes 

While creating a wireframe for a website might sound like a highly technical endeavor, it’s actually a simple concept. With a wireframe, your goal is to map out the site’s navigation and features in a visual way – that’s it! 

So, creating a wireframe in Figma isn’t a matter of being a master web designer (though that would certainly help). Instead, it’s about knowing how to use Figma’s tools to connect shapes and text in a way that accurately represents the website you’re envisioning. 

The easiest way to start making wireframes is to download Figma’s free wireframe kits. There, you’ll find templates for buttons and cards, hero images, web page features, social posts, footers and more. 

Or, you can use Figma’s built-in drawing and shape tools to create your own wireframe from scratch. No matter which method you choose, the result will be entirely unique and entirely yours. 

A Beginner's Guide to Figma

Figma 2022: The Absolute Beginner to Pro Class

Take the Class

How to Make Prototypes

Imagine a Figma design of a web page. Now, imagine that the design is actually interactive – you can hover over links, click buttons and more. That’s what a prototype is, and it can be a powerful tool for web development. 

You can even use Figma prototypes to see exactly how a mobile app will look and function on a specific device.

Like all other aspects of Figma, you don’t have to know how to code in order to create a prototype. Instead, you just need to know which steps to take. 

In Figma’s own video tutorial, you can see exactly how to start prototyping, change your prototype’s starting frame, connect multiple elements in the same frame and more. 

And if you get stuck, Figma’s community has your back with its impressive selection of free prototype files. 

How to Use Figma Offline 

It may be a browser-based program, but Figma can still be used offline – you just won’t be able to access all of its features. 

To start, you’ll need to be connected to the internet. Once you are, open the file you want to work on. 

Next, disconnect from the internet. Whether you’re using Figma in your browser or the desktop app, any changes you make to your file will be stored and synced when you’re connected to the internet again. 

While you’re offline, you won’t be able to do things like: 

• Use Figma’s file browser 
• Create new files
• Open files other than the one you currently have open
• Search for or insert components or instances from libraries
• Install new plugins or run internet-dependent plugins

You will, however, be able to do things like: 

• Create frames, shapes, vector networks and the like
• Insert images you’ve already saved to your computer 
• Modify each layer’s properties
• Run non-internet-dependent plugins
• Save your files to your computer’s hard drive

How to Install Figma Plugins 

If you ever find yourself wishing that Figma could have a certain feature or functionality, try browsing the plugin library. There’s a good chance someone has created a plugin capable of making your wish come true. 

To search for plugins while you’re working on a design, right click the canvas and select “browse plugins in community.” Doing so will open up a separate tab where you can browse plugins to your heart’s content. 

From plugins that simplify image importing to those that generate blob shapes (it’s called Blobs, in case you were wondering), there’s a plugin for virtually everything. 

Once you find one you’d like to try, click the “install” button. In the community section of Figma’s website, this is located to the right of each plugin listing. 

Want to uninstall some old plugins instead? Figma’s guide to managing your existing plugins can explain how. 

New Design Skills? Fig Yeah

Figma doesn’t require coding, a ton of hard drive space or even your credit card number, and that’s part of what makes it appealing to so many users. It’s easy to find Figma classes for UI/UX designers, and beginners have plenty of classes to choose from too. 

Best of all, you can learn Figma on your own. With the guidance of the right tutorials, Figma’s own documentation and its generous community, you’re just a couple of hours away from building a whole new set of design skills and creating one-of-a-kind designs in the process. 

Get Started on Your UX Design Career Today

UX/UI Design Essentials

Take the Course

Written By

Carrie Buchholz

Carrie Buchholz is a freelance writer who lives in Northern Colorado with her husband and dog.

Share

• 
• 
• 
•