1. Web Design
  2. UX/UI
  3. UI Design

Introduction To Figma (Free Beginners’ Course)

Scroll to top
Read Time: 7 min
Duration: 1 hour 50 mins | Lessons: 13

In this free tutorial, you’ll learn everything you need to know to get started with using Figma. 

Once you’ve completed the lessons, you’ll have a good understanding of the tools and features included in Figma as well as how to create a sign-up form from scratch. Clocking in at just under two hours long, we get down to business quickly, so if you’re ready to learn, keep reading! 

Who is This Course For? 

  • UX and UI designers wishing to learn a new tool 
  • App designers 
  • Business owners
  • Web designers who want to expand into other areas

Introduction to Figma 

1. Welcome to the Course

Watch video lesson [0:00] ↗

In this intro lesson, we’ll take a look at what the course as a whole will cover. Right away, it will be clear to you that Figma shares similarities to other popular design tools like Adobe XD and Sketch but has its own set of unique features that are well worth a look on their own. 

We’re going to look at four key areas: 

  • A general introduction into Figma and what it is 
  • An overview into how to get started, including a discussion of the interface and features available 
  • A guided tutorial for using Figma as a designer 
  • A guided tutorial for using Figma as a developer

2. What is Figma?

Watch video lesson [01:31] ↗

Figma is a design tool, and with it, you can create anything you want for the web from user interfaces to illustrations to icons. So, you can use it to create a full-fledged online store, a smartwatch app, and everything in between. 

What makes Figma pretty special is that it’s vector-based and browser-based, so you can create just about anything from just about anywhere. And best of all? It’s free to get started.

From here, we discuss how to install and setup Figma to move forward with the tutorial. 

Getting Started With Figma

3. Working With Projects, Files, and Pages in Figma

Watch video lesson [06:16] ↗

Alright, with Figma installed and setup, it’s time to get our hands dirty! We dive right in with this lesson, discussing all the different ways to organize your work. We talk about how to create projects, new files, and pages within Figma. We also talk about how to access your files. 

Working with Projects in FigmaWorking with Projects in FigmaWorking with Projects in Figma
Working with Projects in Figma

4. Using the Figma UI

Watch video lesson [11:44] ↗

Before you can really get down to business, you need to have a thorough understanding of how to use every button within the Figma user interface. We dive into the details here so you can move through the rest of the tutorial with confidence. The UI is set up as follows: 

  • Home Screen: What you’re greeted with when opening Figma. This provides access to your teams, projects, and options for searching for files, viewing recent files, plugins, and drafts. 
  • Team: This shows all the projects assigned to this team. 
  • Project: A list of all the files associated with the project. 
  • Right hand sidebar: Displays further options related to which screen you’re viewing. 
  • Top nav bar: Displays file name, sharing options, zoom, menu, cursor, shapes, and more tools.
  • Left side bar: Shows layers within a file by default.

5. Working With Frames, Shapes, and Text in Figma

Watch video lesson [20:47] ↗

Getting started with frames within Figma starts with a comparison: they’re just like the artboards you’d encounter in Adobe XD. Frames give you a great starting point when working on a project and there are tons built into Figma for things like smartphones, browsers, social media sites, and more. 

Adding a iPhone 8 frame in FigmaAdding a iPhone 8 frame in FigmaAdding a iPhone 8 frame in Figma
Adding a iPhone 8 frame in Figma.

You can also use the Shape tool in Figma to create custom designs. If you’ve used any other design software in the past, this tool should be pretty familiar, as you’ll have your choice of rectangles, circles, lines and so forth and you have full control of their thickness, size, and stroke.

And you’ll learn about the Text tool as well. 

Putting the text tool in Figma to workPutting the text tool in Figma to workPutting the text tool in Figma to work
Putting the text tool in Figma to work.

6. Creating Vector Networks With the Pen Tool

Watch video lesson [31:44] ↗

Vector Networks are quite possibly the most unique feature in Figma. That is because most design tools approach the pen tool as follows: you click and create multiple points then return to your starting point to close the path. But it doesn’t work this way in Figma. 

Instead, Figma maintains open-ended paths, which makes it much easier to create more complicated shapes. In this lesson, we explore in detail how to make use of Figma’s unique pen tool and vector networks. 

7. Working With Grids in Figma

Watch video lesson [40:16] ↗

In Figma, grids are super useful for creating interface design but they can also be used for making icons with ease. You have full control over how grids appear, the box size, color, and more. 

8. Using Figma Plugins

Watch video lesson [46:21] ↗

Plugins add a wide range of additional features to your Figma experience. And in this lesson, we dive deep into the variety of plugins available to you. 

Figma pluginsFigma pluginsFigma plugins

And we also show you how to install plugins, set them up, and put them to work within your workflow. 

How to Use Figma as a Designer

9. Let’s Design a Sign-Up Form in Figma

Watch video lesson [51:00] ↗

Figma makes it easy to create a wide range of apps and website types. And in this lesson, we’ll cover how to create a sign-up form for a mobile app using all the knowledge you’ve amassed thus far. However, we’ll also go into depth about new features not discussed yet, like components, layout, color, and styles.

10. Let’s Create a Prototype

Watch video lesson [01:25:55] ↗

Figma can also be used to create prototypes. We do so in this lesson by using the two screens created in the previous lesson. In this case, we’ll create a prototype to connect these two screens when certain buttons are clicked. 

figma prototypefigma prototypefigma prototype

11. Sharing Work and Getting Feedback

Watch video lesson [01:30:02] ↗

An essential part of working on a design, is collaborating with others and getting other’s feedback. This is easy to accomplish within Figma, In fact, at any point during your workflow, you can share the project with others and solicit feedback. You can also provide editing permissions if you so choose. 

How to Use Figma as a Developer

12. Inspecting a Design File in Figma

Watch video lesson [01:41:39] ↗

If you’re a developer and have been given view-only access to a Figma file, this lesson is for you. Here, we delve into everything you need to know about developer access to Figma files and how you can take a project and turn it into an app, website, or other live and interactive product.

13. Exporting Assets

Watch video lesson [01:46:48] ↗

In the last lesson of this tutorial, you’ll learn how to export assets in Figma. It’s super simple to do and works in both view-only and in edit mode. So once you’re done working on your project, you can export it with ease and move onto your next task. 

Learn More About How to Put Figma to Use 

If you want to expand your Figma knowledge even further, consider checking out some of the articles we’ve written on the subject in the past. Here, you’ll find additional tutorials, template roundups, and tips and tricks, to help you level up your Figma skills.

1.4 Hours

Figma Components: From Zero to Hero

Components in UI design are regular elements, like buttons or forms, and they can be reused multiple times throughout the design process. Working with Figma components means you don’t need to recreate an element each time you need one; you can reuse components from the library. 

    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.