Figma – the software that changed the way we see the collaborative design. Figma is not only an app, it created another era in the history of design, as it became the first mainstream design collaboration tool. As TechCrunch states,
Figma wants to do for interface design what Google Docs did for text editing.
That’s a bold claim but it has its backing. In this article, we will see what Figma is, and what makes it special, and go over 24 Figma tutorials that will help you elevate your skills with the platform.
Article Overview:
What is Figma?
Getting Started with Figma
Web Design Tutorials
App Design Tutorials
Marketing and Advertising Design Tutorials
Game Design Tutorials
Internet of Things Tutorials
What is Figma?
Figma is a design prototype tool that is based on Sketch but outgrows it. Among the UX/UI design software, it ranks as one of the best tools currently offered on the market. It’s hosted in the cloud, and the whole idea behind the Figma app is to create a seamless experience for teams who can work together on different assignments.
What Makes Figma Special?
Figma is special for many reasons, but the main one is that you can work from any device, as far as it has an Internet connection and it can meet the minimum hardware requirements. Many plugins are available, and the platform has a helpful community that rises by the hour.
On top of that, there are a lot of resources available on the official website. Speaking of the website, it might surprise you how simple and well organized it is. Thank you, Figma!
Figma is a web-based software – so you just need to go to Figma.com and join. Now, let’s move on to these 25 beginner tutorials.
Getting Started With Figma
It takes bright ideas and a lot of courage to compete with Adobe without falling behind. Let’s see some of the best Figma tutorials that can help you start your first project.
First of all, you can start using
1. Beginner Tutorial – 2022 Edition
Because Figma is a cross-platform app, you will find everything available on the website. Instead of digging Google for resources, you can directly find everything for your designs on Figma.com.
In this Figma tutorial for beginners, you will get to know how to use the Figma app features but Jesse actually shows you one of the most vital things that make this app so popular – the community, where you can find tons of documentation.
2. New Figma Features in 2022
Designers around the globe haven’t been so hyped for a long time. Lots of new features were introduced, and they will reduce the workload significantly.
Figma Auto Layout is one of the areas which gets a massive update – it now has more canvas control, negative spacing, and the biggest rockstar of all – absolute positioning. But there are also some minor tweaks in layer ordering and a new canvas stacking order.
3. How to Create User Flows in Figma?
Figma launched FigJam as a separate product for whiteboarding in 2021, and nowadays it can even compete with industry-standard tools like Miro and LucidChart.
In this Figma tutorial, you will learn how to create a user flow by utilizing squares and connectors. However, you also have the option to use a marker and sticky notes, if you’re into a notebook-like experience.
4. How to Create a Wireframe in Figma?
In this Figma wireframe tutorial, you will see how to create a mobile-first design. There is a real-world example that tends to be more understandable for most people.
The video itself is very explanatory, and what we liked the most is that you can really see how things are done “in real life”. Make sure you watch the video, as recent statistics show that 85% of people believe mobile versions should be the same or better as the website ones.
5. How to Create a User Interface Design in Figma?
This Figma UI design tutorial is quite helpful for anyone who wants to create a mobile app user interface. What we like in this video is that everything is simplified.
If you don’t mind the blobs (which are quite cool, by the way!), you will see how to create a standard Sign Up page, create buttons, and use assets from Figma’s rich library.
6. How to Create Animations in Figma?
In this Figma video tutorial, you will see how to create micro animations from scratch. Every single step is explained in detail so that you can understand how to complete the task.
Animations make even boring designs interactive and fun. Even if it’s a simple toggle button, like the one used for the example. The sooner you start practicing Figma animations, the better.
7. How to Prototype in Figma?
As we have already mentioned, there are a lot of resources, including videos, that Figma releases to help its users. And that is admirable.
In this Figma prototype tutorial, you will learn how to build prototypes, create prototype connections, animate the prototypes, and of course – invite team members for feedback that you can incorporate into the design.
8. Figma Developer Handoff Tutorial
Figma is known as a design collaboration tool, so developer handoff should be easy. With a single link share, developers can comment, and propose edits. What we absolutely loved here is that theory is mixed with practice.
To be honest, this appears to be the ultimate Figma handoff guide. Sera uses a professional document to describe all the necessary steps:
- Handoff checklist.
- Design Q&A session.
- Stakeholder Signoff.
9. How to Collaborate with Your Team in Figma?
Figma collaboration is the bread and butter of the whole app. While design features are aplenty, the area where it really shines is co-working. In the example, there are 3 people working on the same website, drastically cutting the design deployment time.
In this Figma tutorial, you will learn how to share a link of your design with colleagues, so that you oversee the task’s progress in real-time. You can also leave comments, so other people can either reply or react instantly.
10. How To Create Branches in Figma?
Designers aren’t very keen on having someone check and comment on their designs before they are even ready. It takes time to create something good and it is understandable that UX and UI professionals need some “space” to work alone.
This is where branching comes in. In this Figma tutorial, you will learn how to create branches (spaces where you can try new designs) and then merge them into the main file when you’re ready, in order to receive feedback.
11. How to Create Variants in Figma?
Variants are component combinations that are grouped in a set. Using them is one of the most crucial steps for every designer. And the reason is simple: you can save a lot of time if you create variants.
In this Figma tutorial, you will learn how to create variants, use a standard naming convention, add new variants to an already existing set, and more.
Web Design Tutorials
Developing a great website that users will like is not an easy task. Coming up with a simple user experience while not forgetting aesthetics is just as important as the content of it. 94% of first impressions are design-related. And professional Figma designers can really craft something beautiful.
Let’s see what makes Figma an X-factor in website mockups.
1. How to Create a Website Design in Figma?
Hands down, this is one of the best website design tutorials you can find for Figma today, as it is very detailed. After you complete the video, you will be able to make your first website mockups with ease.
This Figma tutorial shows you all the essentials you should learn in your Figma journey: how to create pages, how to work with the grid and align elements, and you will even learn to create a new logo.
2. How To Create Web Design and Smart Animations in Figma?
In this Figma tutorial, you will learn how to create a website landing page from scratch and make it interactive by using smart animations.
Apart from the standard alignment of elements and sticking to the best practices (which is always important), the use of rounded shapes and using the color picker makes this video a must-watch for inspiration.
3. How to Create a Landing Page in Figma?
If you would like to find inspiration for creating your landing page, this Figma tutorial might be your best bet. It will surely help you make your first (or next) landing page mockup.
We chose it on purpose for those who find explanations distracting. Bear in mind the video is sped up a lot, so you may need to pause at times.
App Design Tutorials
Being in line with the latest trends in web design is an absolute must. However, the world is rapidly changing towards a mobile-first design, making mobile app design more relevant than ever.
So, how to design a great app UI in Figma? Let’s find out.
1. How to Create a Mobile App User Interface in Figma?
In this Figma app design tutorial, you will learn how to create a weather mobile application design from scratch. It’s inspired by Apple’s own Weather app.
The video shows the recreation of the app and you can see how to add assets, create buttons, and use gradient colors matching the design. The main key take here is to see how the limited space is utilized.
2. How to Build A Mobile App Mockup in Figma?
The most crucial thing in app design is to deliver a fantastic user experience by offering a consistent and straightforward design. Here, we have a flight booking design.
This Figma tutorial will teach you how to create a consistent app experience and use space in the best way possible. There is no voiceover which might be great for people who prefer to focus on the visual part.
3. How to Create a Dark Mode App Design in Figma?
Dark mode has quickly become a fan favorite, and having it in your design is a huge plus; in this Figma tutorial, you will learn how to create a dark mode UI.
We liked that the video uses the industry practice of having two UI versions (light and dark), and you will get a better idea of how to incorporate the color theory into your designs.
Marketing and Advertising Design Tutorials
Figma is capable of creating amazing marketing and advertising designs for web and print, as it supports vector files and allows for easier collaboration between marketing analysts, copywriters, and designers.
Let’s see how to impress potential customers with Figma.
1. How to Create an Instagram Carousel with Figma?
Instagram carousels are one of the most popular ways to advertise products. And luckily, Figma gives you plenty of tools to create great designs.
This Figma Instagram tutorial shows you how to create carousels in two ways – by using frames or by using slices. What we liked is that the explanation is very simple and there is a verdict on which method works better.
2. How to Create a Banner in Figma?
Banners are pivotal for many e-commerce companies, and you can make some outstanding banner designs using Figma.
This Figma banner tutorial is short but very informative on the key elements – working with a color palette and utilizing shapes. What really grabbed us, though, is the little tip right under “Flash Sale”. Hats off to this original idea!
3. How to Create a Business Card in Figma?
Many companies use business card templates that they slightly modify and then use. But if you want to create a unique one from scratch, this video is for you.
What you will learn from this Figma tutorial is how to design a business card that looks modern and at the same time remains professional.
Game Design Tutorials
Can Figma be used for game design? The answer is: yes, it can. With some practice, you can create some amazing UI designs for games, and even silence the critics.
Let’s see some Figma game design tutorials that can help you stand out from the crowd.
1. How to Create a 2D UI Game Design in Figma?
We’re not going to lie – creating a game design is time-consuming, no matter which software you use. In Figma, it’s relatively easier to create simple designs but it doesn’t have advanced features.
Yet, this Figma tutorial shows us that there is a way to create a lot of components that can later be embedded in games. There is no voiceover, so make sure you pause the video if you find it harder to make something.
2. How to Create a Game in Figma?
In this Figma tutorial, you will see how to create a simple UFO Scroller game in just over 4 minutes which is quite impressive!
What we really loved about this video guide is how easy it looks to animate the game. You only need a couple of good-looking elements and some prototypes to get going.
Internet of Things Tutorials
Internet of Things is everywhere around us. That is why it is more than crucial for any UI design tool to have the capabilities to make such interfaces. So, let’s see how Figma performs here.
1. How to Design a Smart Watch App UI in Figma?
Internet of Things is a great technology and one of the most typical examples of it is smartwatches. In this case, we will see an Apple Watch UI Design.
In this Figma design tutorial, you’ll see how to create your design for the Apple Watch canvas size. You will also see how to create the layout properly, as the UX requirements are even more restrictive than those for mobile app design due to the smaller screen size.
2. How to Create a Smart Home Design UI in Figma?
Smart home systems are taking over the world, as they provide a lot of utility. But creating a relevant UI design for their mobile apps is just as important.
In this Figma tutorial, you will learn how to design the app from scratch. What we liked is that it shows a real-life example, so if you get to know the steps, you will most likely create similar designs in such types of projects.
Conclusion
And with the smart home UI tutorial, we end this article. While you cannot become an expert after watching a couple of Figma tutorials, you can still make great progress. The Internet is full of resources and with enough patience, you’ll certainly get better.
To get some more inspiration, you can also read some of our related articles:
