[0:00]Welcome to Foundations of Figma, our most in depth Figma course for beginners. Today we will learn the basics of Design Systems inside Figma. If you learn how to build a good Design System, you will automatically beat majority of your competition in job applications. I will not only tell you the what and how, but also show you how Android has designed their latest Design System guidelines, Material 3. My name is Ansh Mehra and I teach students Design and AI. This is lecture 6 of our 10 lecture series. So without wasting any further time, let's get started.
[0:42]Alright, so let's get started. Before moving ahead, just want to make it absolutely clear that this course is not a UX design course, but it's a Figma course. That too only covering the basics. Now, there's a huge difference between learning Figma and learning UX design, and we've discussed this again and again, but just wanted to make sure that if you're coming here for the first time, you're fully aware of what exactly are you learning. Today we are learning Figma, which is the tool UX designers use to design apps. This doesn't mean that you're becoming a UX designer. You don't get hired if you just know how to use Figma. You get hired if you know how to be a good UX designer, but you cannot really implement all the teachings that you learn as a UX designer until unless you know Figma. That is why we have created this course to make you understand how do you use Figma in the first place. Now, this is lecture 6. We've already uploaded five lectures before this, all of them were free extremely in-depth tutorials on YouTube. Lecture 1 covered the basics of Figma, lecture 2 covered frames and autolayout including constraints as well. Lecture 3 covered declaring styles and just publishing libraries, then in lecture 4 we covered how do you declare components and variants and then in lecture 5 we covered variables. Now we have five more lectures left, and all of them are around Figma. Now if you're a student who already knows a bit of Figma and wants to kickstart the entire UX design part of this as well, so you can go to learnx.in. Like there is a proper seven week syllabus plus two bonus week modules that can teach you how does UX design work, the average salaries, the road maps, how to get an internship, how to write your case study. Every single thing has been mentioned in detail on our website. And you can easily follow that syllabus and apply for a really, really good UX internship. Trust me when I say this, this seven week syllabus is more than you need to get started. With that being said, let's figure out what is today's syllabus. This video is going to be shorter than all the videos you've done before because to be honest, the entire concept of design systems doesn't really come in teaching Figma. This is a subject that usually UX designers learn in the subject of UX, but I really wanted to make sure that now that we have covered our five lectures, you still need to understand where do you even apply this knowledge? So in module one, I will make you understand what exactly are design systems and why do we need them. In module two, we'll understand how do you build such design systems. I'll give you a couple of resources, a couple of examples to learn from. And in module three, I'll show you some practical examples, a couple of places where you can use this information practically. Now, if there's anything important on the UI, I will zoom it in. Otherwise, if I press any key, you will see it on the top right corner, so there is no possibility of you feeling lost throughout. Let's start with module number one. Let's understand what exactly are design systems. See, I'll tell you how this works in real life. There are two categories of companies, one that have a good experience design team, the other company that does not have a good experience design team. What happens is that when a company comes up with an idea, the CEO or the PM's, if they don't know design, they would hire a beginner designer, and this beginner designer would end up creating screens on the basis of hunches or inspiration. Basically, they would directly start designing the screens. So they would get an idea, they would make wireframes and then they would just start making the buttons, the input fields, blah, blah, blah. This is not the right way. Before you start creating any user interfaces, there is a list of components, a list of guidelines, a list of rules that you have to declare before you make even a single screen on your app. Now this entire list of guidelines, this list of components, this rules and regulations, all of these things become a part of your app's design system. Now, when I say your app's design system, it's not just that design systems exist just for apps. There are design systems for your marketing guidelines, there are design systems for your coders as well. So when we say that Ansh Mehra's app has a design system, that design system might have buttons and colors and all of those things, but Ansh Mehra's marketing, branding and all of those other articles can also have their own design system. So number one is to understand that design systems are not just exclusive to mobile apps or websites. Very similar to how the word UX design is not exclusive to apps and websites. Like there is a UX to every product in this world, whether it's furniture, whether it's you watching a movie, whatever it may be. Similarly, in this video, we will talk about mobile app based design systems. We will not talk about marketing design systems, we will not talk about any other category of design systems, but when I say the word design systems, it's basically a library of UI components that you will use in your app and a couple of regulations around colors and all of those things. Now the point is why do you need design systems? For example, if you have a button and if you're using that button in 100 different places, you will not use your brains again and again to design that button, right? Because you know that I've made this button once and I can reuse it again and again. So basically, even within a button, there are so many categories, right? So on the right side, I have a sample from Android's material design M3 library, right? And here they have a couple of these pills. Now, you can obviously see that one is a filled one, one is with a stroke, one is without a stroke, and usually these are called primary, these are secondary, these are tertiary. But within those as well, you have one variation where there is no icon. In another variation there is an icon, right? So by the way, this positioning, when the icon is before the text, this is called a leading icon. If this icon was on the right side, we usually call it as a trailing icon. Now, I'm not saying that these words are set in stone, okay? Some people call it leading, some people call it head icon, some people call trailing icon, some people might call it tail icon, so that completely depends on you. Now when I say it completely depends on you, these words, these rules, these terminologies, all of these things comprise in your design system. So what happens is that it becomes very easy to design because you don't have to think about all of those small, small things. You don't need to rethink UI components and your app looks uniform across devices. So what happens is that if you have a certain set of colors that you're reusing again and again, you are very peaceful in your brain. That even if multiple designers are working, they are following a guidelines, so your app looks uniform. But imagine if there was no library to take from, maybe screen number one's button would look really, really big. Maybe screen number three's button would really, really wide or small or whatever it is. And when your app doesn't look uniform, when your app doesn't look very clean, consumers don't feel like trusting it. So having a design system creates uniformity, uniformity brings consistency and then consistency brings trust within your users. It becomes easy for your users to understand how new features might work like. And of course, even from a functional perspective, when new designers join your team, it is very, very easy to scale because they can literally just follow a design system. Now, this is one of those videos where I will not spend too much time, you know, showing you Figma features. So I have a list of resources, I have a list of examples and we will just sit and understand what exactly is working. This is going to be a super short video because I want you to watch this video and then implement your lessons and, you know, try out everything you've learned till lecture number five. So there's one very cool resource that I want to share which is design systems for Figma.
[9:28]Let me open this website for you. Now as soon as you go to this website, you will have a very, very epic collection of design systems of popular companies, like really, really good companies with their Figma kit, with their documentation. For example, let's see AWS. Okay, so if I were to click on Figma kit, in a new tab, it would open the Figma community file and then next, we have the official documentation. Now, in small companies, you don't have a documentation that is as good as this. So a very big misconception that a lot of beginners have is that Ansh, we went to this big documentation, we saw that design system. Do we need to declare all of these things in the start? No, not really. And in the video only, I will tell you what all things are necessary. Your palette, your typography, your basic components, the atomic components, which basically means your input fields, your drop downs, your date picker, all of these things and your sorted, your popups, buttons, your sorted. If you have these five, six things, those are good enough. In fact, there are so many big companies that I personally know that still don't have a design system, like they've been in the game for four, five years, they still don't have a design system. Because usually companies don't have that much of time, you know, like everything is happening so fast, like there's so much of pressure in day-to-day work, that they barely have the time to, you know, think about any systems. But yeah, so for example, when I opened this documentation, this is not exclusively for design, but if I were to go here, you would realize that they have a UI kit, right? So on the very left, if I click on this UI library button, they would have build React forms and then Figma to React code. And I am not from a coding background, so I will not dig deeper into this, but if I were to open their Figma file, this would have all of their assets in one single place. So then they have a component page where you can see how they have all of their cards, all of their, you know, icons, they have marketing collaterals, they have their forms, like a couple of things that you can check out. Right? Now, I know that most of you would not be very familiar with AWS's design system, so we can obviously see something that is more easy to understand. I have personally learned a lot from Carbon design system from Uber's based design system. If I were to go through the Carbon design system library, when you go to designing, you can click on getting started, and this is where, you know, you'll understand where to get the Figma files from. Now, if you go to guidelines, this is all of their basic generic guidelines, whether it's about color, whether it's about the iconography. And if you were to components, then they have a couple of, you know, components with their states, with their demos. So it's really, really helpful, right? And the crazy part here is that they have a proper index. So you can literally see that these are the things that we need to define, right? And when you're designing your components, all of these lessons are really, really helpful. For example, this is IBM's profile on Figma community. By the way, I see so few people actually leveraging like Figma community. I think it has so much of information and so many resources that most students never really explore this, right? So if I were to open any of these, right? I was actually seeing my preview and I realized that I have such a terrible body posture and I'm just being very conscious about, you know, sitting up straight. So apologies if I was looking very lazy. But yes, here you have like the Carbon Design System in a specific gray theme. And, you know, all of these things when I was learning out, it was so interesting for me to understand that, oh, like, dude, like, look at the kind of detail and organization they have, right? So you get to know what all states they have, you know, what all different kind of buttons they have. But I also need to let you know that don't feel that your system needs to be as good as this, right? So I mean, these companies have like so many people and so much of budgets and so much of time and you don't have to essentially, you know, replicate all of this. So for students, I always recommend to learn either from the iOS guidelines or from Android's Material design guidelines. So if you were to go to Figma community and just search for Material 3 design kit, you would have this file right here. You will click on Open in Figma and then you'll have access to all of their components. And this is the Figma file that I would explore today. So I just want to quickly show you as to what all are the different kinds of components that these guys make and, you know, how do they even structure their information. Now, before we move forward, folks, we have been uploading these videos, but we're not getting as much response as we expected these videos to get. It takes a lot of time to research and make these videos, and I will really, really appreciate if you guys would just put in a like and, you know, put in a good comment. Because when you like a video, when you comment your feedback, when you put good feedback, YouTube gets to know that this content is working, right? So we have officially decided that we will not record the next lecture until unless we get 1,000 likes on this video within five days of upload and 500 comments within five days of upload. So if you want to contribute to us releasing these lectures faster, then make sure you touch this goal. Now, let's come to module number two. Let's understand how do you even build these systems in the first place, right? And what is the bare minimum that you need to declare when you are creating your own app. See, the fundamentals are very, very simple. Most importantly, you need a color palette, okay? And because we've covered styles, libraries, and variables, I think by now you would understand primitives, you know, the grays and the brand colors and the semantic colors. Without that, things will not work out. I would recommend that when you're starting out your app, just select one theme, could be a light theme or a dark theme. Don't choose something which has multiple themes. Once your colored palette is done, then you need your typestyles. Now, in our 15 episode course, which is the UX design course freely available on learnux.in, there is a video where I teach you how to declare your typestyles. You need to make sure that you have all of your typestyles ready, where you start from 12 pixels and then maybe you go to say 32 pixels. But make sure that your web typestyles and your mobile typestyles are different. A lot of students make this mistake again and again, they feel like one design system will work for every single gadget. Whereas in reality, it is always recommended that you start small, you have one design system which is for mobile app. You have a separate design system with different set of components all together for your web app. Then comes your shadows, then your buttons, primary, secondary and tertiary. We again have a dedicated video only and only to make you understand how do you declare your button styles. It's a part of the 15 episode course available on learnux.in. Next comes your input fields. Basically, you know, you have your input field with error, you have your drop down, if you want radio buttons, anything regarding input, you know, you have to declare those. And, you know, what happens is that a lot of designers waste too much time creating these components from scratch. If you're working in a startup or even if you're building your own product, I would strongly recommend you to just either go with bootstrapped or Tailwind. So these are open source libraries. Let me show you, if you just search for the word Tailwind CSS, this is the link that you need to go for. And it is going to save you weeks of effort. Like I'm not even joking. So Bootstrap was available for free, that was completely open source. The people who have made Bootstrap, they are the same ones who have created Tailwind as well. So if I were to go to say documents, you would realize that they have every single important document that you need to use in different formats, right? So of course, this is not for free, you have to pay for this. But if you're a startup, if you've raised enough funds, then I'm pretty sure this will save you weeks of time, right? Now, as a designer or a developer, you need to rely on open source as much as you can. So whether it's bootstrapped or Tailwind or, you know, when it comes to even icon packs, stick to box icons, stick to remix icons and trust me, your life will be so, so sorted. And just for research, just to understand what all things do you even need. If you're creating an Android app, please make sure you study the Android guidelines. If you're making an iOS app, please make sure that you're actually learning from the HCI guidelines written by Apple. Now there would be a lot of points where you would be creating these components from scratch, and it becomes slightly difficult to even, you know, predict what all we should have in this component. So there's a very, very cool resource called checklist.design. Now, I personally love this resource because it has a list of elements. And let's just say that even in a list of elements, I am making a button, right? So it would tell you all the things that you need to include, a couple of articles that can help you design better and a list of states that you should have when you're creating the components. So these would be your different variants. Now, this is a game changer because when it comes to stuff like text field, there are so many students who just forget that this is something that they need to make. So people know default, hover and active, but a lot of people don't use focus. Now, what is focused? If I'm not touching anything on my keyboard and if I press the tab key, can you see the this thing, this thing getting selected, I'm not hovering on top of it, okay? But this is called focus, right? And if you don't create focus state specifically for web states then it's a big problem because you're essentially leaving out, you know, like a dedicated interaction. So yes, I've just kept these screenshots right here that this one single resource can help so many beginners, you know, design components properly. So what you need to do is, you need to first decide what all are the basic necessities I want to have. Figure out what can I pick from open source and what I need to design from scratch. Then practically implement everything you've learned in the first five lectures. Go to a website like checklist.design, go to all of the Figma libraries that I've shared, right? Like you can take inspiration from existing design systems and then make sure you declare them in a file. Once you've declared them in your file, you publish that file on your proper workspace, right? So you can't do this on a free plan, you need a pro plan so that when you declare that library, for example, if this is my thing right here, if I go to assets, right? If this is my design system file, I will have to publish this library with my components, with my styles and then use this library in other files. So one file can be for a specific feature and this is how you maintain good hygiene. So if you create your components, colors, type styles, everything with the screens with the prototype in one single Figma file, the Figma file will get really, really crowded. Now if you're on a beginner plan, then there's absolutely no choice, like if you're on the free plan, then literally there's no choice but to do everything in one single file. But if you really want to do this well, if you're a student, get the student discount and, you know, just like properly organize this.
[24:02]Now, we come to module number three, and this is where I think I'm going to spend some time just making you understand as to how did Android design all of their components. So, if you were to go to this website right here, which is m3.material.io, you will go through the entire documentation that they have written, right? So the fun part is that if you go to m3.material.io, they have this Get Started homepage where you have access to all of their documentation along with their Figma files, right? Along with resources for developers as well. So if I were to go and click on Get Started, of course, you have all of your documentation, your foundations, and open source code. But the crazy part here is that you not only learn about how do you design a specific component, but you also understand the fundamentals of UI design in the first place. And a lot of people ask me that, Ansh, do we need to get this certification, that certification? You guys are not understanding the fact that this one single website right here is way more valuable than any other certification out there. Like imagine the kind of lessons you can learn. And the fun part is that material design, these guidelines are also evolving. So what you see right now is the M3, earlier they had M2, so they keep telling you as to what all has been the difference, right? Between the M3 and M2.
[26:28]See, you remember I told you to, you know, import this Figma community file, this Material 3 design kit. I've copied some of those frames and I've kept them here, right? And just to show you how exactly they have documented their components, right? So what they've done is, they've added these names, okay? So every single window has these names. And if I were to click on See Design Guidelines, it would be hyperlinked to the documentation, right? Because if I were to see just the design files, of course, I know how they visually look like, but there's a lot of metadata. So metadata means a lot of internal information that you need to know that is there for the development to scale, but it's not visible. So if you want to read about the actual practical use case for these buttons, then you'd have to click on that hyperlink. And then I will recommend you folks to literally sit down and decide that today I will just understand buttons. Like I'm telling you, just understanding buttons will take you at least one or two hours, right? Because what happens is that you will understand these are the different states, okay? If I were to click on specs, it will actually break it down into specific single, single components, right? So if I were to talk about the elevated button, it would have say two different components to it, right? If there's an icon then that becomes the third component. Now, you remember we spoke about variables where I said that every single thing needs to have a specific number attached to it, a value attached to it. See what they've done here, okay? So if I talk about the elevated button container shape, they have this specific keyword attached to it. Now, this is something that you cannot store in a variable, but look at this. Elevated button container height, that is 40dp. Now, you would be wondering, why is this called as 40dp? This is something that we haven't covered in this video, but I've covered this in our 15 episode course, which is on UX design. So DP stands for density-independent pixel. I will not get into the depths of it. So let's assume that if this was 40 pixels, what would you do? 40 pixels would be stored as a number, as a variable. Which variable? Integer variable, not string variable, integer variable. And then the integer variable would be an alias for the elevated button container height, right? Now the fun part here is that you have three components right here, you have the container, this pill right here, you have the label text and then you have the icon. So what they've done is they have actually given you guidelines for each and everything, right? So you have your label text, then you have your icon. And then inside disabled also you have similar things, hovered also you'll have similar things, focused also you'll have similar things. So they have actually told you what all are the properties, what all are the tokens that are attached, right? So you'll be like, Ansh, what exactly does this mean? For example, in enabled, you have this thing called as a shadow, okay? So you have elevated button container elevation, and then these are the different tokens. You remember we had covered token naming in variables, it's completely okay if you haven't seen that video, but basically you have dot, right? So you have material design, system, elevation, level one, okay? Now, if I were to go say on hover and click on container again, then this shows as level two, okay? Which is very, very interesting. So you have level zero, you have level one, you have level two and it's hovered, so you can see that within a component what all things do they have, right? And now I would recommend you to read through all of this for every single component, right? Because there are four parts to this, one is of course the overview, okay? You come to the Figma file, you click on this button right here, you go here, and then you start reading the overview. Then you have the specs where you actually understand what all are the different tokens they have attached to a specific button. Then you go to guidelines as to when this component is ready, it has been designed, it has been developed, the tokens are good. Now, how do you use them? Now, you'll be like, Ansh, what is so complicated about using a button? Let me give you some example. So in their guidelines, they say that buttons are just one option for representing actions in a product. Too many buttons on a screen disrupts visual hierarchy. If you have too many actions, consider putting a navigation drawer, which is like the right side, left side menu or a set of chips or icon buttons. So they are saying this is okay, but don't do this where you have edit order, save order and place order. Now, you'll be like, Ansh, if we do this, what happens? Nothing happens. You'll just have an app that will confuse people. It's not like if you put three buttons in a design system or if you put three buttons in the code, the code will be like, no, no, no, I will not publish this. It doesn't happen that way, but it's just that these are specific guidelines that if you are aware of, if you really, really know these guidelines well, you will have so much in-depth knowledge, right? That will make you so, so much better than everybody else in the market, right? Like this is the kind of content that will take you from here to here, right? Like this is where you actually enter the rare air of UX designers. This is where you enter a point where there is no end for your growth because you are so obsessed, you're so detail-oriented, right? And, you know, most students first of all, they don't learn Figma. If they learn Figma, then they just learn UI design. If they learn UI design, then they don't go into the this, this part of organization where they understand design tokens. 99% people get stuck here. Only the 1% will eventually reach this point, okay? They will eventually come to a point where they are here, right? And I want you to get here for every single component, right? And of course, there's accessibility as well. These things are very, very simple to understand. I think contrasts and all of these things you know already, but my point is that this skill is going to be in so much high demand that if you start investing time today, in the next six months, you're sorted. But it takes six months because let me zoom out. I haven't even discussed buttons. You have cards, you have carousels, you have checkboxes, you have chips and you have so many other things inside the Android design, right? Now, I know that you'll be supremely intimidated, you'll be like, Ansh, how will we ever finish this? It's completely okay. Please remind yourself three things. Number one, nothing will happen in less than six to eight months. Let me break this to you. I'm not going to be that guy who's going to say, become a UX designer in three months, use AI tools and design a website, use AI tools to do that, do this, okay? I, I make that content. I know the game, I know how it works, okay? You can use AI to get feedback, to get guidance, to get some direction. But when it comes to making real products, if you really want to do this well, you have to get into the nitty-gritties. Now I also know that Figma AI is going to come up with so many features where all of these components are going to get automated. But I would still recommend, you know, that for example, when I was learning how to drive, I first learned the gear driving, then I switched to automatic driving. Now I could have directly learned the automatic driving as well, but then I would have really, really skipped a lot of fundamentals of driving in the first place, right? And those are very important. No matter what you say, even if you have all the AI tools in the world, you know, you really, really need to know how all of these things work. I know that a lot of this duplication, a lot of these declarations are going to get automated in less than six to eight months. But the fundamental understanding is very, very important, otherwise you will just get caught up in anything that AI throws at you, right? So what you need to do is, you need to create a proper 10 to 15 day plan and say that I will learn just one component, okay? Literally just one component every single day. You go to their design guidelines and even in that, you need to put one hour, okay? In that one hour, you have a, let's say, like a 40, 30, 20, 10 rule, whatever it may be, okay? You spend maximum time on overview, spend very little time on specs because this is primarily something that is needed for the developer. Designers don't need to get into the depths of it, but designers really, really need to focus a lot on guidelines. So if you have limited time, overview and guidelines, these are the two things that you just cannot skip. Now, open a tool like Notion, have dedicated pages, make sure you have these screenshots. If you're on a Mac, you just take a screenshot like this, you know, press the control key, it would be copied to your clipboard. And start documenting these learnings, okay? Because you need to first just read about this. See, this Figma course is not about UX. I keep saying this again and again. So I want to make sure that you're not designing components right now, just read, just understand the logic behind it, and trust me, you will thank me. It'll take you two, three months for sure. You will come and thank me saying that Ansh, thank God you asked us to first read because you don't know what you don't know. I'll tell you the majority of the designer problem is that they don't know what they don't know. They directly start designing. Then whatever the design doesn't get results, then their CEO is unimpressed, the PM is unimpressed, and they're just sitting wondering, oh, design doesn't matter, design doesn't help us, blah, blah, blah. The thing is, you don't even know how to design. You don't really know the subject. So because you don't know what you don't know, you have to spend some time just understanding the basics first. And whatever you learn, document it. Put it on LinkedIn. Tag me. I would love to see your progress as well. But I just want to make sure that I show you all of these things one by one, you know, just sort of make you understand that this is the kind of, you know, detail and effort it takes to become a really, really successful UX designer. You don't have to do this all in one go. You don't have to do this all alone as well. That is why I've made these courses, right? Because when I started learning, nothing of this sort was that easily organized, like the information was so, so scattered, but now you don't have any excuse at all. Now, folks, the only reason why I didn't go deep into building a design system right now is because we are yet to cover design handoff. We're yet to cover prototyping, we're yet to cover shortcuts, and those will be covered in the upcoming lectures. Because we are beyond 50% of this course, I want you guys to go back and figure out if there are any areas where you feel you're still very weak. Because right now, I've just given a glimpse of what design systems are. By the way, there are so many videos that I've already created on design system, that's why I didn't want to like repeat information again and again, but I would recommend you to stay patient and not go too much into the depths of building a design system right now. Because I'm being so honest, there are designers with six to seven years of experience who are already working in a company that has been making apps for two to three years, even they don't have a design system. So you don't need a fabulous design system to build a good product, okay? You need the basics, and basics I've given you the list, okay? How do you declare those basics, I have taught you in the 15 episode course, I've taught you in the videos that have come before this. That is why I am not showing you how to build a design system because that is a rabbit hole and if you get into that rabbit hole once, it's very difficult to come out. So your major responsibility is to now keep reminding yourself that I want to strengthen my foundations, okay? There are so many videos, and I am not going to like go through the entire list again and again because I think I've said those. If you are still very confused about how to manage your time, how to approach this entire career, then we created a video which was called the step-by-step roadmap of becoming a UX designer. In that, I went through like the age and the degrees and the knowledge and the laptop, average salaries, everything, okay? So I'm just going to like make sure that I have that list ready in front of me. If you feel that you are learning, and if you're working in a job, but you're not able to get paid, if you feel that you're not getting paid enough, or if you're not getting better clients, then we made a video which was called the insider tips for getting a high paying UX job. Throughout this process, you need to document your learnings. And if you don't know how to document your learnings, there's a tool called Notion. It is freely available. I have created a video which was called how to document your learnings on Notion. I'll put the link in description. If you feel that you have learned everything, but you're not able to write your UX design case studies, then I had uploaded a two part series which was the ultimate guide to writing UX design case studies. Very, very detailed video, complete harsh, you know, brutally honest advice that if you take it seriously, I'm telling you, folks, there is no end, like there is no end. Earlier, there was a big issue, but now with all of this information easily accessible and all the resources that I have collected for you, nothing can stop you. Apart from UX, if you're interested in upscaling yourself in the field of AR and VR, we had created a free course on spatial design. I had paused that course primarily because just like the Figma course, I felt like a lot of people were not interested. If you are interested in that course, let us know, go to those videos, comment that we need more videos like these, and I will make sure that I resume those videos because I personally know this right now, everybody is too bullish about web design and mobile design. But the future lies in AR and VR, the future lies in designing for voice based interfaces, or AI enabled interfaces. Like those are the kind of guidelines that people are just not talking about. Like I just don't get it, right? And if you really want leverage, you don't need to be an expert in something that is popular today. You should probably plan to be an expert in something that's going to be popular six months from now, right? And we have created two websites that are free portals to learn really, really high valuable skills. Number one was learnux.in, number two was howtoprompt.in, that had so many videos on chat GPT, midjourney, Google Bard, prompt engineering, it had documentations. It still has like top favorite AI tools of mine, all of my master classes, everything freely available, and it's all out there, right? Howtoprompt.in and learnux.in. So we have spent so much time curating this information. So I really, really want you folks to sit down, right? Now, I will not end this video before I give you homework, so this is your homework for the next five days. Number one, pick any design system to study. I would recommend either pick the material design system or the iOS design system. Whatever you pick, at least spend 30 days going through all their components. 30 days minimum. When I say 30 days, at least 30 to 40 minutes every single day. Take their basic components, start reading about them. Then declare the essentials for your UI. Let's take any problem statement, you can use chat GPT for it as well. Get a good problem statement, start with an iOS app, design the basics. Color palette, typography, button, input fields, radio buttons, popups, all of these things. Once done, document your learnings on Notion and put them on LinkedIn. Tag me, I would love to see your work. It it absolutely makes my day when people put a screenshot of their notes and, you know, they tag me, it feels so, so good that, somebody is taking the advice seriously. And if there's any episode that you feel that you haven't seen in the Figma course, if there's any episode that you haven't seen in the 15 episode course, right? From episode 1 till episode 15, if there's even a single video that you've missed, trust me, you're missing out on weeks of labor. And when I say missing out, it basically means that if you don't watch those videos, you will waste infinite amount of time. Infinite. There is so much time for you to waste, you will keep wasting time, okay? But if you watch those 15 videos, trust me when I say this, you will be sorted. With that being said, lecture 7, the next lecture in this series is going to be on design handoff. There's a new mode inside Figma, which is the developer mode, or the dev mode. Earlier when Dev mode was not there, we used to do so much of work into making sure that the specs are right and this is right and all of those organization. But beyond design handoff using dev mode, there are so many things that I have learned, you know, working in a company, working with other clients and all of those things are very, very important. Otherwise, if you don't do your design handoff properly, at the very last stage, even as a designer, if you've done everything correctly, every single thing if you've done correctly, if the handoff is not correct, your developers will not develop it properly. And when they don't develop properly, what was the use of working so hard? What is the use of learning design if the developers are not able to understand it, and if the product doesn't look like that? So design handoff is a subject that I find very few people talk about, and it is very, very important that you get this right. Because your company will value you a lot if you understand this skill, but, but, but we have decided. If we are not getting good responses on these videos, we will not continue them. So I will not record the next lecture until unless we have 1,000 likes on this video within five days of upload and 500 comments giving us detailed feedback as to why this video helped them and what else should we cover in the upcoming videos, right? So 1,000 likes and 500 comments, otherwise we will not even start scripting, you know, the design handoff video. And I'm not kidding about it. I'm pretty serious because all my entire team is like, Ansh, you're spending hours and hours researching, barely people are watching these videos. So we want to make sure that the video reaches to more people. The video will reach more people only when YouTube sees it. YouTube will see it only when you engage, right? So with that being said, I hope that you like this video. Let me know in the comment section if you want me to cover anything specific in the upcoming lectures, I'll make sure to include that. Make sure you click on subscribe and hit the bell icon. If you don't hit the bell icon, you will miss important updates. With that being said, I hope that you're taking care of your mind and body. This is your dost Ansh Mehra signing out.
[53:37]If you like this video, make sure you click on like and hit the subscribe button. I regularly upload videos on UX Design, marketing and storytelling.
