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
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?
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
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.
4. Using the Figma UI
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
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.
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.
6. Creating Vector Networks With the Pen Tool
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
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
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.
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
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
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.
11. Sharing Work and Getting Feedback
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
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
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.
- What is Figma?Kezz Bracey16 Sep 2022
- 20+ Best Figma Wireframe UI Kits and TemplatesBrenda Barron22 Jun 2023
- 15+ Best Figma Templates for Web DesignersHermione Wright22 Mar 2023
- 28 Figma UI Kits for DesignersEric Karkovack27 Mar 2023
- 5 Figma Tricks and Tips for BeginnersAdi Purdila29 Sep 2021
- How to Use Figma VariantsAdi Purdila04 Jul 2021
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.