My NEW Figma Masterclass Course 2.0

8,527 designers, as you can see over here, have taken on my Figma Masterclass course. That is 342 pages worth of designers. And I'm super grateful and humbled to have had this type of impact. Now, just 3 months ago

as you can see over here, we launched the uh new 2. 0 version of my Figma Masterclass course. We refilmed, recon constructed, redesigned everything from scratch and refilmed and launched this. Now, over the last 3 months, we've had, I believe, an extra couple of hundred designers take on this course and all existing students also got free access to this new major update. As you can see here, some of the feedback, everything was great. Great course. These were just a few days ago. Very fresh testimonials. um explanations were crystal clear and easy to follow. I've taken several of Misco's courses before and the consistency of quality never disappoints. So super grateful about u about this and the reason why I feel so excited and confident about the launch of this announcement is because of all the positivity that I've actually received from all my existing students. So, there's also 42 other uh more testimonials as well, and this has only been 3 months. So, if you're looking to take your Figma uh skills up onto a higher level and actually excel, stand out, keep up with all the competition because this industry is starting to heat up with all the AI tools. Everyone must be able to work efficiently in the tools. And if you can't, you are going to fall behind and you'll end up probably losing your job. So, it's more important now than ever to be extremely efficient and competent and confident in your skill sets and your workflows. And this course breaks down a lot of real world stuff that I personally use in my own journey, in my own business, in my own products as well. So, hopefully you'll learn a lot. And with that said, let's dive into the breakdown. Welcome

to the ultimate Figma Masterclass course 2. 0. So, over the last four years, I've had over 8,200 designers take on my Figma course. Designers currently at Amazon, Microsoft, Facebook, and hundreds of different startups. Now, over the last four years, I've constantly updated the course, but I thought this year it was time for me to go back and refilm everything with new updates, new challenges, new exercises, new everything. So, without further ado, let's dive right in and see what's actually in this course. So, once you

have purchased the course, you will get access to 3. 6 gigs worth of exercise files. So if I break internet, I apologize for that. Now, in addition to that, you also get access to all these videos. So the key thing about 2. 0 is that I've gone back and refilmed everything, but I've also designed it in a way where you can take the course from start to finish. But if you also want to jump directly or straight to a specific module, you also can. So each module has been designed in a way where you can take them in isolation so you can jump around. Now here's how the course is structured. First we have a very basic introduction to the Figma verse. So everything from Figma design, Figma community, Fig Jam, Figma slides and we will continuously update this as time goes on. And this is for absolute beginners. Then we jump straight into some project management concepts in Figma. It's not as easy as just creating a new file when you were working in an organization. You need to have different strategies, different tactics to manage your Figma so it doesn't become chaotic. So we actually go in and break down three real world projects that I myself and my team have worked on and they are all in different situations and different scenarios for different products. Then we jump into auto layout. So the goal for me is to teach you the building blocks of Figma first, teach you all the technical uh learnings that you need and then we start to turn up the heat and we get harder and we build more and more complex things with the things that you learned. So first auto layout is one of the most important concepts or features you need to understand. We dive right in into plenty of practical challenges. I would say it's 90% practical, 10% theory in this course. So we really help you um own and really understand auto layout back to front. Then we go ahead and master Figma components. This is the concept of creating reusable elements throughout your entire project. So we start with the basics of Figma components. Then we start to learn about the concept of Figma design systems and give you a bit more of an introduction into the topic before we actually start building out an entire Figma design system that you can use and repurpose for different projects. So we go really deep into that. Then we start to use the learnings that we've already made and we start to design some responsive UI designs. Then we do some responsive web design. Then we learn about the concept of the design handover process. We then jump into some prototyping and animations and we've got quite a few different uh practical exercises to help you understand that. And then the last two modules are going to be very advanced. We're going to dive into the concept of variables for design systems. And then right at the end, we're going to go and start building out some very advanced prototyping concepts with the help of variables as well. So what does this actually look like? Let's go ahead and take a look at my Figma files. I'm going to open up quite a few of the different module files like the exercise files so you can actually see what is

inside each module. So as you uh remember in the beginning at the beginning of the course we're going to be focusing on the fundamental building blocks to help you really understand how to design in Figma most efficiently and the smarter way of doing it. So you can see any lessons that have a purple circle means that there is a practical exercise. So just to learn auto layout, we have around I would say seven I think yeah seven uh six seven eight different practical exercises for you to play around with and to understand how auto actually works. So we're going to go through going to try different exercises starting with the most basic concept designing a responsive button all the way through to designing a responsive table um so you can actually create something that is fluid it within your

project. Then in module four you will see that we start to learn how to go into components and how do we build components? How do we actually repurpose them? How do we modify them? So we understand how do we actually create our very first component. Then we learn how to detach components. These are very basic concepts but they're going to be used very frequently in every single project. So everything to do with components will be done in module 4.

Then in module five this is more of an introduction to Figma design systems. So less practical stuff but more around like what is a Figma design system. I walk you through some realworld um examples. So there's no practical exercise but we I'll actually uh screen share and show you all the different types of design systems that you will actually be creating in the real world. So a lot of examples that you see online are design systems for let's say Microsoft, Airbnb, massive organizations. But in the real world, when you are working for an organization, you're not going to be building a design system by yourself for such a large enterprise. You're going to be designing something for maybe a small startup, a small business. So, we're going to be talking about how do you actually manage that process in the real world, you do it a little bit

differently. So, then we're going to also jump in and start to build out our very own design system in module six. So, as you can see over here, we're going to start with the most basic uh building blocks, uh creating new color palettes, your topography, your grid systems, uh your shadows, your blurs, and then we're going to also create some responsive components that you can reuse in different projects. So, input fields, and also your buttons. Once you've

learned the con concept of design systems, we're going to jump straight in, and we're going to start designing some responsive UI. So you have one big challenge over here which is to create some responsive views for a dashboard design with a camb board as you can see and we're going to be recreating everything with auto layout doing this the correct way. So when you were designing responsive views you were not manually wasting time creating all these views. We will create the desktop view once set this up correctly with auto layout and with any special tactics or strategies. So when we want to create the tablet and mobile view, it takes us maybe two, three or five clicks to get to this uh final outcome because we're going to be doing everything the right way. Then in module

9, we are going to go down the route of designing a responsive web design. So you can see over here we have a web design project. you've got some assets and we're going to once again apply everything we've learned in the previous modules to design something like this. So most of these exercise um bigger exercise files will have a bit of a mood board for you to follow. You'll have some pre-defined styles. So we take those concept of the design system, we simplify it for this project and then you can see that we we'll be able to design something like this. By the time you get to module 11, we're going to be

learning about Figma prototypes. So, how do you actually build your very first prototype? We've got plenty of practical challenges over here. everything from learning the basics of the different types of transitions that you can create in Figma and you'll have a play around with all those to building an interactive component understanding how that all works and then we're going to go ahead and build finally a entire UI prototype flow for a few mobile screens and you'll learn about how to utilize components, how to link up your screens, how to create cool transitions. And if I give you a very quick preview, it'll look a little bit something like this. And you can be able to click around, add things to your cart, and you'll be able to complete the rest of the flow. So, once you get to module 12, this is when things start to

really get a little bit more complicated and advanced. In module 12, we're going to be talking about design systems with the help of variables. So in the previous lessons, you'll be learning how to create a quite a basic uh starting UI kit and design system. But once you get to module uh 12, this is when we're going to start to learn. If I click over onto the right hand side, you'll see that we're going to use the concept of variables, right? These cool fancy technical things to set up a design system correctly. So you'll be you'll see that over here I've gone ahead and designed some custom challenges and exercises for you to understand how do you level up your design system with variables because it allows you to create things a lot more in a lot more dynamic way. So we're going to go through this whole concept and we're going to learn how to do it uh from start to finish end to end. Once

you learn how to use variables for your design system, we're going to finally go ahead and use variables to create very dynamic prototypes. So, you can see over here, uh, we're going to create, let me just quickly zoom out, a drop-own field where you will be able to, um, collapse, open, select any item, and then have the text prefill the actual dropdown. So it feels a lot more dynamic. We're going to also create a dynamic prototype which emulates a real world app. So if I show you a very quick example, I can go ahead and preview this prototype, you'll learn how to create something that just feels real. So let's say we have an image over here and we've built this little app where we can sort of modify the image itself. We can make rounded corners. We can reduce the roundness. We can also make it uh sharp again. We can also clear anything. So if we make it round, we can clear the items. We can change the background. All this has been done with just one screen design. As you can see, nothing fancy, but we are using the concept of variables in a very smart way to enable this dynamic behavior. So finally once you've done that we will be creating a very dynamic checkout flow with the help of variables. So we're going to be creating two different use cases depending on what type of user is viewing this. Sometimes they might see the banner sometimes they might not. When I'm checking out depending on whatever shipping I select all the data on the right hand side is going to dynamically change as well. All this once again with just one design all the dynamic behavior will be created with the help of your variables over here on the um on the left hand side. So this is going to be a jam-packed end toend Figma masterass which will take you literally from zero to hero within Figma. So I'm super excited to see you on the other side very soon. We've had over 8,200 designers take on this course. Help me get to 10,000. I'd be super happy. But once again, I will continuously update and add a little bit more material whenever I feel like it's deemed fit. But with that said, I hope to see you on the other side very