Transcript for:
:

most figma courses on the internet are superficial they just cover the basic features and that's it without any discussion of use cases or practical implementation welcome to foundations of Sigma a course where we'll talk about each and every basic aspect of learning Sigma from scratch in a way that prepares you for real ux design industry work this is the most practical and actionable figma course you'll find on the internet with proper homework and resources at the end of every video so without wasting any further time let's get started [Music] alright folks welcome to the foundations of figma this is super super exciting because I have planned a 10 lecture training which is going to take you through figma from basic still really really Advanced levels the goal is to make sure that you are prepared to at least learn the subject of ux and to understand how apps are built to understand how social media carousels are designed on figma you need to learn figma so today is lecture number one which is understanding figma from absolutely scratch this entire course is going to be released on our latest website learn UI ux dot in which is a website where we will be releasing multiple courses life cohorts meetups workshops a lot of things targeted towards people who want to build better products you know this can include product managers designers and Developers so let's start with lecture number one uh we will understand why do you need to learn figma degree age requirements what laptop do you need basics of figma UI and how the entire interface really works and on the top right corner you will always see any of the clicks or keyboard uh keys that I'm pressing on the top right corner so the thing is that if I'm using a shortcut key of say 2 you will know what unchas clicked and of course I'm going to cover every single detail the goal is not to make superficial videos but to make sure that we give you extremely extremely high quality detailed content now if you want to install figma you have to go to figma.com and make sure that you have figma installed in your computer or opened up in your Google Chrome now today's syllabus is split into three modules in module number one we'll cover the basics of figma UI and understand why do we need to learn figma in the basic use cases in module 2 I will take you beyond the basics where we will cover some very very nuanced details about the figma interface and in module number three we'll do some practical implementation because it's very very important to see how these things work in real applications so let's start with module number one on basics of figma UI so folks figma actually has two products one is called figma design where we design apps websites brochures whatever it is they have a second product which is called fig Jam which is not going to be covered in this course but I wanted to introduce this because a lot of people think that figma is the tool that is used to design everything whereas in reality figma is a company and then within figma you have figma design and then you have fig Jam fig Jam is not for Designing it is for brainstorming and research and collecting notes figma design is the tool that we will learn in this course now before we go ahead and understand figma there is one subject that you need to understand which is of raster versus Vector so folks raster is just a fancy name for a JPEG image right on here you have a user interface left side and right side both seem sort of identical but there's a huge difference and you will see that difference when I zoom in if I zoom in here you will realize that this thing right here is getting pixelated why because this is a JPEG and jpegs do get pixelated as you zoom in but if I go to the left side and zoom in you'd realize that it is just not getting pixelated no matter how much I zoom in it will never get pixelated this thing right here this image which is absolutely crystal clear no matter how much I zoom in this is called a vector graphic or logos that you create all uh digital illustrations that you see in this world are actually vector graphics because they do not pixel it that means I can scale them up and print them up to any size on the right side is a JPEG image and just like jpeg you also have pngs and a couple of other formats all of these formats that can get pixelated if you stretch them they come under raster images so in figma we don't deal with raster images in figma anything that we design is US dealing with vectors now this is very very important because when I teach you different tools you'll understand that most of these tools are applicable only to vectors and not raster images any user interface that you work on is going to be in vectors now when you go on figma you will always have to create a design file and we will do that demo right now itself but it's just an important thing because fig Jam files are different and design files are different now the question comes in do you need to learn coding absolutely no you don't need any specific degree you can be of any age any background you don't need any previous knowledge to learn figma another question is can I get a job if I learn figma not at all folks figma is like learning how to use the pencil or just educating yourself about how a pencil works sketching is the art of using the pencil so you can say that ux design is a very very important discipline and to work as a ux designer figma is the tool so figma is your tool which is a very very rudimentary thing it is super basic you will not get a job if you just know how to use this tool ux design is the subject this course is not about ux design this course is about learning figma because once you learn figma you can also do graphic design ux design whatever it is so a lot of you folks would already know how figma works so you can obviously jump directly to the tutorial which is mostly going to be in the middle of module number one but yes for folks who have never ever opened figma this part is very very important now you cannot use figma for Designing on a phone or a tablet I always recommend to use Sigma on a laptop this can be a Windows laptop or a Mac laptop now when you say Which laptop it can be any decent laptop because this doesn't depend on your RAM or your graphics card like most basic laptops can easily easily run figma without much issue now a lot of people ask me should we download figma or should we use it online you can download figma there's an app for the laptop as well the benefit is that if you're not connected to the internet it would still save a lot of your progress I personally use it on Google Chrome because I am always connected to the internet and I have fast internet connection and you know I can switch in between different tabs so it depends on you there is a not much difference in between them another huge advantage of figma is that multiple people can work on the same file at the same time in Photoshop or in illustrator a person could be working on a single file and you would have to save that file and transfer that file to somebody else on figma you can open up a file and have multiple designers collaborate together in real time which is extremely extremely valuable now when it comes to pricing the basic price for figma is free where you get three figma and three fig Jam files so when they say three figma they mean three figma design files and you can have unlimited collaborators you can have people come in and then you also have plugins and templates available the professional plan is the plan that I usually recommend Freelancers and real real companies so if you're working as a beginner the free plan is good enough for you but if you're working in a startup or if you're working in a team or if you're actually serious about your work and you want compounding to help you then you need to get this plan right here figma Professional Organization is not needed for beginners the Pro Plan itself is good enough now a lot of people say is learning figma ux design not at all as I said figma is just the tool and ux design is object now the question is how do you create your first file first you need to go to figma.com and then you need to create your first account now I always recommend people to add their email ID and password and don't use go continue with Google because you should always have your own remember password I would recommend you to download the offline app as well but you know just use it on Google Chrome that is what I usually do and now let me just show you how it really looks like so right here I have open figma.com on my Safari which is my alternate browser because this slide is also by the way made on figma itself but this is my paid plan but this is not how it will look for you when you open figma for the very first time this is how it looks like and I know it is slightly intimidating but don't worry this is super super simple so right here you have your account so you can always log in and log out from here and when you go to reasons you will have some designer templates you don't need to worry about them you will see recently viewed shared files and shared projects again you don't have to worry about this what you need to do is click on plus design file if you do plus exam board it will create a fake Jam file but we only want to create a design file once you do that it will create a file that looks like this so it takes around 2-3 seconds depending on your internet speed I have already created a frame but by default this is how it will look like if you double click on this thing right here you can actually edit your file name and this says free because we are on the free plan and on the very left you have this thing called as pages so basically every single figma file is like a book and within a book you have different pages okay the stuff that you see in the middle this is called the canvas basically this is where you design and we will go through all of this one by one but here we have different pages now on the free plan you can only have three pages per figma file to be honest you can have so many UI on a single page that most beginners will not need more than three pages but yes if I click on this icon right here I can click on back to files and I will come back to my dashboard now I can take any of my files and put them in a team this is very very important so you can click on create a new team and then put in your details let's just say I will name this as second team this is very very important just to keep yourself organized and then if you have more people more collaborators you can invite them from here for now I will click on skip for now and then it says that if you're on the startup plan you can have a startup plan otherwise you can upgrade to professional I will just click on choose a startup plan so here by default it creates a team project so basically you have a team within team you can have Team projects and within team projects you have figma files now what is the use case of this traditionally in professional capacities what happens is that you will have a team let's just say ansh mehra within anchmara ansh Mera can be working on a mobile app on a website on a freelance project so each and every project of mine an app is one project a website is another project now within the app you can have Android iOS Google Chrome so then different files cater to different different items within that project so what you can do is if I go to recent take this first file and put it here in my project it will be visible I've already kept it in my team project so you can find my first file here now if I click on the favorites icon you can always keep it in your favorites uh usually I don't use favorites I would just keep them very organized here but if you click on say the star icon your file will appear here so within your favorite files it is very very easy to access them and once you double click you can enter here now one very significant difference that you would be feeling is that this thing has a cover and this thing does not have a cover so the thing is that figma gives you a file by default this file is ready made as soon as you open figma so they say start here and you have a couple of files you have one page so the fun part is you see this number right here let's just assume that this is your canvas okay and on the canvas you have these small small divisions these divisions are called frames so you basically have one very very big canvas and then you have so many small small artboards or canvases right and I will call them frame this thing right here you see the small icon this means that you have essentially created a cover out of the single frame so if I right click you can see this here in the layers panel this right here is my layers panel this is where I can see Pages this is a small Thin Line and within the Thin Line you can see all the layers on this page if I click on this Arrow this lock icon I will unlock this and now I can move this around if I right click you can notice that there's this option called restore default thumbnail why because this is already selected as a thumbnail if I go to this thing right here and let's just say try to click on it you'll realize that you're not able to click why because this layer is locked so if you hold the command key and then right click you will be able to select it if I click on this Arrow I will unlock it I can right click on this and choose select as thumbnail once I do that you will realize that this no icon becomes normal and then you have this small little window if I click on back to files you will realize that very soon the cover will be updated so this is how you create your first Sigma file let's come back to the frame that we have the slides that we have created let's explore Sigma for the very very first time so as I showed you this is how your figma looks like when you have nothing created and usually you will have a small quick tour of figma when you open it for the first time and you can obviously you know check this out this is pretty useful the second thing that you have to figure out is make sure that this area is clean for you so don't over complicate anyway in your free plan you will only have two or three figma files available as soon as you hit three figma files uh it will not allow you to create more but yes you need to decide what plan do you have so we have obviously discussed this I've also showed you the default figma file that figma gives you as soon as you create the project so now let's finally get into understanding the different features and the icons inside figma now every reference and every single theory that you see in this course is from figma's official documentation I am creating these videos because a lot of students feel intimidated going through the documentation but if you want to do your own self learning you just have to go to help.sigma.com and they have compiled everything so all credit goes to figma learn thank you for making such detailed documentation let's start with the toolbar so even if I were to bring back my menu you will notice that you have these tools on the top okay let's go through these one by one so what you need to understand is that if I take this toolbar this entire thing from top to left this is also split into three categories on the very left you have tools in the middle you have actions and on the right side you have collaboration and view settings now we won't go too deep into actions and collaboration settings let's just understand what are these tools for the first tool is called the move tool now how do I access that if I click on this icon you realize that I have move and I also have scale so move is pretty straightforward if I take this Frame and if I'm in my move tool I can move anything around if I go to scale scale is slightly slightly tricky but of course the functionality is pretty straightforward that you can scale something up and down this is very very different from using your normal move tool so if I'm in my move tool and if then I drag the boundaries you realize that something else is happening this is not scaling at all and we will understand why this is happening but for now you need to understand that if you want to shrink something you use the scale tool if you want to move something use the move tool now anything that we discuss right now is still going to be on a very superficial level because this is lecture number one I will slowly slowly build your expertise onto this tool but what you can now do is that start learning these shortcuts so for every single icon you realize that they mention the shortcut so move is V and scale is K and folks no matter what happens you need to stay patient because this is a very very detailed course so of course you will have to watch all my videos very very patiently to get everything sorted so you might feel confused at some points but eventually you will have all the dots connected for you the second tool opens a frame section and slice so we will not cover sections and slice right now because that is not relevant to us let's understand what is a frame a frame is nothing but a blank canvas now you would be noticing that my entire canvas is slightly darker because I can change the color from here now this is irrelevant so I usually keep it slightly dark if I have to design an app or a website I always need to create a frame so if I press the F key you would realize that I get some options on the right side so it'll ask me if I'm designing for a phone or a tablet or a desktop so if I say click on MacBook Pro 14 inch it will quickly create a frame here now let me cut this and bring it back to where we were we were right here so if I paste it you'd realize that it has named it as MacBook Pro 14 inch and then once I have selected the frame there are some settings and we will cover these later on but the thing is once I press F I can either choose from any of these templates or simply create my own frame which can be of any any height and by default it just numbers it in ascending order if I select all of them and delete them I will come back you'd notice something else that this slide as well is also a frame so once you select a frame in your layers panel you will see your file right here so this frame has a lot of elements inside of it so if I click on this small Chevron this is called a Chevron you'd see that I have some layers right here and this checkbox icon that you see this means that this is a frame but you will realize that these icons are different and we'll understand what these icons are for now even though frames are a very very useful feature there is one thing that makes frames extremely powerful and that is the concept of constraints and of course we will cover constraints soon but I'm just mentioning this name so that you know why frames are so cool now let's take an example of how these frames are practically used now when I clicked on F of course you had phones and tablets and all of these things but if I go to social media you'd realize that they have all these templates ready for social media as well so if I go and press F again and create a rectangle I can write 1080 by 1350 and now this becomes a very good three to four ratio for my carousels and that is the ratio and size I use for all of my social media posts if you're making a poster I will click on F and go to paper and select A4 and then you can design it sort of put that uh thing on the left side on the right side but yeah let me just put it back here and what happens is that this Frame basically has a ton of layers so this checkbox itself was a frame then within the frame I have this thing called as an auto layout and we will cover Auto layout soon don't worry about it it's just like level two of frames and then you have this post number one and you have slide number two inside slide number two I have my text I have my images all of these things so basically the frame puts them together but yes you can create stories brochures posters everything every single item will be a frame for you in fact we've been using it for our reels as well so we create a storyboard each frame is for a specific storyboard and then I give these assets to my editors and then they sort of play it around and then you can be as creative as you want now in some cases I would create mockups inside Photoshop and then export pngs and then put them inside my frame so that is also one use case that you can have right so this is one frame and then there are multiple layers under it our next icon is for shapes now I know that this might sound like an oversimplification but literally any UI that you see is made up of these shapes rectangle lines ellipses polygons and stars literally it is actually that simple I to be honest don't use polygons and stars I only stick to ellipses and rectangles even the screen that you see right now it either has text or it has a rectangle or an ellipse so this is pretty straightforward if I click on rectangle I can simply create a rectangle as soon as I create a rectangle you have your X and Y coordinates you have your width and height which are in pixels you have rotation and then you also have Corner radius so if I take this rectangle and say type 15 it'll make it rounded if I click here again you see this dot if I hover on top of it it'll tell me that there's a 15 pixel radii I can drag it this itself the fun part is that if the height of my rectangle is say 200 pixels as soon as I put the Border radius as 100 will become a pill right because if your radius is 100 it eventually becomes a circle so even if I go say 200 it won't make a difference but till 100 you will see some significant change so as it goes from 0 to 100 you will be able to see in fact you can also scrub so if I go and scrub to the right side you'll notice that my cursor comes back to the left side so it's an infinite scroll and you can keep scrubbing and it will just not end so let me show you a quick example okay these are iOS screens and you can get these iOS screens from figma Community we will understand what figma community is as well but the thing is these are some very very commonly used iOS screen and here is a keyboard as well now look at these screens closely you realize that all the major UI elements are actually made up of either rectangles or squares but then you will say ansh this is not a rectangle or a square exactly because these are icons and for icons you need the pen tool for custom shapes so stuff like this this rounded icon you'll always use a rectangle and put a corner radii to it but anything inside of it which is a custom icon that can be created with the pen tool and of course you can also get these files from the figma community but yeah I just wanted to show you that even if you pause and look on this image right here not image but this is called a component component is the word that people use if you click on anything you would realize that it's just either text rectangle or ellipse and then you have custom shapes which can be created by the pen tool so yeah I just thought that uh we'll just show you some components just to test now after your pen tool you have the text tool which is very very simple as soon as you click on it you can type anything you want by default it'll be a super super small text so if I do command a you'll have some text properties here and these are very very identical to how we have it on Microsoft Word so if I make it 100 pixels now it'll be super visible and these properties we'll go through them right now so don't worry about it so let me just delete this now after your text tool you have these two icons right here so if I click on resources you have this thing called as components we will not cover this right now we also have plugins which is basically sort of like apps like you have apps for your iPhone similarly figma also has plugins that gives it more superpowers we will not cover this in this video and we also have widgets which is again something which is going to be covered in your upcoming segments so if you want to zoom in and zoom out you can just hold the command key and move the cursor otherwise if you're on your trackpad or even on your normal Mouse you can just you know move around the canvas so you don't really need to use the pan tool the the common tool is for collaboration so you can click on anything and add a comment and click on this blue button right here and then all of your comments will be visible so you can click on that comment and you can just click on this check icon and it will resolve it but you don't have to care about this right now or we will cover this later so yes now we actually come to the meat of the video where we truly understand how figma really really works now right now I am on the paid plan so let us bring back the free plan which has like limited pages so I will go to my first file oops I clicked something else this happens very very often so don't panic if you click something wrong let's come to my team project let's click on first file so you realize that you have Pages if I click on this plus icon it'll create page two if I double click on it I can call this as my cover and then a lot of people also add emojis so if you want you can always have some sort of emoji right here a lot of people put them a lot of people don't prefer them but if you hold the control and command key on your Mac you will always have the Emoji menu so you can put those emojis right here now this is the layers panel but it is empty because there's nothing there so if I press F on my keyboard and create something you will see my frame right here now if I press r and then create a rectangle you'd see that the rectangle is visible within the frame if I create an ellipse and put it right here and you'll notice that there's this option called fill if I click on it a Color Picker comes up I can choose any color I want and all of these things will be visible in frame one so pretty straightforward now the important thing is that you can only have three pages and then Pages have frames and then frames have more objects inside of them so basically a page can have layers and a layer can have frames and then frames can have shapes that is how it usually works but one more important thing to note is that I can also create things outside a frame so this rectangle is just a layer in my page but it is not inside a frame but this is really really bad it is recommended that you always stick to frames and you know all of your components all of your screens are frames because what happens is that if I create these two rectangles they're just floating you might feel that they're connected to each other but they are not not they're just floating in space so let's cover the first important panel of figma which is the design panel now what is the design panel for if I were to hide my side panels the thing is if you're selecting a frame or a shape there are a lot of modifications that you can do and the design panel it keeps on changing what do I mean by that if I select this Frame notice how the design panel looks like if I select this icon right here notice how it changes if I select the auto layout it changes again so all of these options they keep on changing depending to what I have selected and with that we officially come to module number two where we understand beyond the basics of figma now things will become way more interesting now before I explain you what exactly is the design panel for and how does it change I want you to understand the concept of frames versus groups now I'll tell you what that means let's come back to our free plan and let me delete everything let's see if I create two rectangles okay I'll go to my fill and I can also type the color name and I'll create it as blue if I take both of these and do command G it will create a group now I can create one more pair of the same rectangles and if I have to duplicate what I can do is I can hold my command key and click on this rectangle hold the shift key click on this again now I've selected both of these so basically command lets you sort of go through the selection it's called Deep selection because if I were to click like this without holding the command key it would select the group but if I have to select something very specific just the exact item that I'm hovering on I will hold the command key so I will take these and make a copy out of it and I will bring them outside of the group and now if I do command G again you'll notice that right here this says a group okay I can click here and I can select frame when I click on frame notice what just happens first of all you see the word frame 2. group names are not visible on the canvas inside frame if I select my gray rectangle you would see this thing which is called as constraints if I select my rectangle in the group you will not see constraints so the question is what exactly are constraints because that is the only thing that makes a frame so so different from a group before we move on I'd just like to highlight the fact that there's one more thing called the prototyping section right next to design and you can switch in between them if you type shift a but because this is the first session we will not enter the prototyping mode so please make sure that you always have the design mode on if you go to a figma file and you don't see these edit settings and you're still in the design mode it probably means that you don't have edit access to that file so just make sure that you have edit access now I'll show you how constraints work to do that I will create a new frame okay and let's make this a tall one and let's assume that this is a screen and I have a button at the bottom okay and just assume that this rectangle thing is a button if I do command or I can rename it and then what I can do is oops I sort of refreshed so turns out I think uh on Safari command R is for refreshing so we can just go here and just click on rename it is shift command R for this I'll call this as button now technically if my phone width stretches I want the button to stretch as well correct the button will not stay there so what I can do is I can actually educate figma that this button has certain behaviors when the screen size changes there's this thing called as responsive design what do I mean by that if I go to ansh mera.com this is how my website looks like like pretty decent website I made this like I think three years ago now if I were to stretch let's say I take the stab out if I were to stretch this can you see how the elements are changing their size can you see how this thing is changing its size it's sort of responding okay so you you can see how it is shrinking right you will also notice that once I extend the width the elements are rearranging themselves so at this point these three icons are in a horizontal row but after a certain width they become vertical which means that it's not just about shrinking my elements are actually rearranging themselves so there are two concepts that I want to introduce concept number one is of responsiveness that as your screen changes the elements expand or Shrink that is called being responsive another thing is called adaptiveness which means that as you move from one width to another the elements themselves change they are no longer just shrinking or expanding they're actually changing for example if I go to Twitter you'd realize that at this width you have only icons but beyond a specific width you have these things as well now if I really really shrink it you'd realize that at one point you just have the feed so now it's not just about elements shifting each other or just sort of expanding or shrinking they're also changing so you have less elements as you have less real estate no constraints help us in responsive design not an Adaptive design but in responsive design I'll show you how that works I will select this button and right here you have this constraints panel now let me zoom in right here and let me just hide my sidebar here we go this complicated thing just ignore and just understand that you have two categories of constraints you have horizontal constraints and you have vertical constraints that is all it is either on this axis which is your x-axis or on the y-axis now within the horizontal or vertical constraints you have multiple options now what is the intended behavior that I want right here I want this button to stretch which means that this left Edge and this right Edge they need to stick to the edges of my screen if I go to the horizontal constraint and click on left and right now when I extend the width of my frame you'd realize that the button is following the width so cool right sometimes you have a logo which is probably like this and I don't want the logo to stretch from left to right so I want to make sure that if my logo is on the left it stays to the left in that case my horizontal constraint needs to be left there are a lot of applications where you have a circular CTA in Gmail we used to have it and this is called a Fab buttons f a b which is called Floating Action button if I were to make this red because that is how it used to look like I want this button to be stuck on the right side correct so here I will select this button and in my horizontal constraint I will select write sometimes you have a floating pop-up and you don't want this pop-up to change right you want this pop-up to be in the center no matter what width of the window gets even when you open a website on your computer the width of the pop-up is independent of your laptop screen width in that case you will have Center so once I stretch this you will see that my pop-up remains in the center and my floating action button is pinned to the right side now my doubt is what if I extend the height that means if I take this Frame and shrink the height like this can you see how the elements are just getting messed up because we haven't set the vertical constraints so just like horizontal if I select anything which is inside a frame I can also set these properties right here which can either be top bottom top and bottom center and scale now a lot of people say that we understand top we understand bottom what would be Bottom I want this button to be stuck at the bottom so it'll be right on the horizontal and bottom on the vertical this thing vertical also Center horizontal also Center this thing right here vertically it has to be on the top and horizontally on the left so now when I extend this see what's happening it is getting pinned to the surface extremely extremely dynamic now let's do a practical example let's assume that I am creating an app that teaches ux designers ux design straightforward and I have my figma file right here so if I select this Frame if I take this out this is a group I will take it out if I were to remove the phone okay and just show you the designs if I stretch it you realize that nothing is getting active why because firstly this is a group within the group I have a frame so first I will take the frame out now I will take this Frame which is like this and let's just say I click on the small icon which is called shrink width so it says resize to fit which means that if there's anything inside it's going to shrink to that boundary but even then it is not working out if I try to keep this Frame right here and take this part okay this thing this icon right here it's called Auto layout you don't have to get in the depths of it but let's assume that it's a group and let's say I want to keep this in the center I will go and change from this thing to this thing which is left to Center now when I stretch my width you'd realize that it is coming in the center you see the base image and this thing right here these are two different base images I will select these two and instead of Center I will make it left and right not Center if I make it Center then they stay in the center but I don't want that I want them to stretch across the entire width so I will make it left and right now when I stretch my width see it's working pretty well I have my big logo I will make this left and right you see this image right here which is me as a person I can make this Center when I make this into Center as I stretch see now things are coming along so well but you'd realize that this image has specific boundaries okay so then there's a certain limit to it that's why it's sort of getting cut but I think by now you would have gotten the point of how it really works so when it comes to your bottom ctas your Fab buttons all of these things require constraints and it majorly helps you in responsive design not adaptive design even when we come to some of these iOS components if I take this keyboard out if you go to any successful design system which is published on the figma community if you open any well-defined UI files you will always notice that they have constraints set so no matter how I stretch them they will always behave properly and your homework can be to just go and download any of these files click on them and see what constraints do they have now of course you will see that there are some blue blue icons right here and with time you will understand how how these works but my point is that constraints add life to a component this thing is called a component so as I stretch they're extremely responsive they know how to sort of adapt to themselves all right now that we know something about constraints you will not get freaked out when we discuss the design panel on the right side you would also notice that we have skipped actions we will cover these later on on the top right side you have your face right here which is basically you can see if somebody else is on the figma file once you click on that person you'll be able to follow that person's cursor and when you click on share you can always invite other collaborators or copy the link and of course we will cover these things in detail figma has just introduced this thing called as a developer mode which is when your designers are also in the figma file so once you switch to developer mode everything changes and you just have like technical details about each and every file you don't need that yet this is again for prototyping mode and of course you have like zooming and zooming out options as well but we don't have to go through all of these things right now of course sometimes if you feel that multiplayer curses are distracting you you can always click on this thing right here figma also has a quick menu which is command slash so as soon as you do that this will open up and you can literally do and search all of your plugins in one single place so that's just a handy shortcut to know but coming back to the basics now we understand what exactly is the design panel and of course it is supremely intimidating but in reality it is very very useful we'll cover these things one by one now on the right panel you can switch between design and prototype as I said with shift e and command backslash hides everything and if you do command shift backslash then it only hides the left layers panel because a lot of times you just want to like design some stuff uh without sort of having these things uh go away right because I might not need layers panel but I might need uh these things handy so now that we're done with the basics let's break down the design panel and let's understand all of these features one by one see on the very top you have the alignment options and within the alignment you actually have two subcategories these icons right here they come under alignment but these come under distribution which we'll cover in just a minute now when it comes to alignment the way figma sees alignment is very interesting let's just say I create a frame okay and then I will press o and I will create an ellipse now if I press this button right here which is align left it will align the left edge of my ellipse to its parent container now what do I mean by that once I get let me bring back the layers panel let's say I can create a frame within a frame okay now let me call this as inner frame and now I will create an ellipse and what I can also do is if I go to the right side and click on this fill icon oops if I click on this fill icon I can add a color to my inner frame so I will type red now once I select this ellipse right here let's just make like a simpler ellipse if I click on align left then it is not aligning left to my outer most frame it is aligning to the parent container in this case this ellipse is a child of the inner frame so all of the alignment happens in relation to the parent now you can also have anything which is without a frame let's just say I keep this rectangle and I keep a smaller rectangle and then if I select both of them they are not in a frame but now I have selected them and if I do that if I click on this icon right here which aligns vertical centers they will be aligned like this across the x-axis so was there a parent container here not at all but they were aligned in relation to each other when you're selecting so of course you have a line left and you have align right then you can align things along the y-axis or along the x-axis and figma calls them as horizontal centers and vertical centers why would they say that because once I select these things if I am aligning them on the x-axis technically I am aligning their vertical centers what do I mean by that this is their vertical Center correct this is the vertical Center and if I do it this way and put it like this probably this thing is the vertical Center for this and when I use that shortcut basically these vertical centers are in the same line so there's a line that cuts through them when I use that shortcut I've made a very bad image but yeah I think you just get the point and if you want to select multiple layers all you need to do is just click on shift so I can have multiple shapes like this I can hold the shift key and simply align them like this okay so then we come to alignment and there are some shortcuts that you can use and of course help.figma.com has all of these shortcuts readily available the last icon in this panel is for distribution now within distribution you have tidia you have distribute vertical spacing and distribute horizontal spacing now let's understand what is this for let's say I make a rectangle I make a taller rectangle and then I make an ellipse and all of them are spaced out if I select them I can of course align them but if I want the spacing between them to be equal I can either click on this small button right here or I can go to the top right button and firstly click on Tidy Up when I do tidy up the spacing between them becomes equal now if I again mess them up let's say I make it this way and this way again select them if I select distribute vertical spacing I will get a very messed up result you actually don't see any difference because they are actually close to being aligned on the x-axis so if I go here and do distribute horizontal spacing now their spacing is equal but you can't figure it out because the shapes are very weird so if I were to create equal squares and I did that by holding shift [Music] and if I select all of them go here and do distribute horizontal spacing it will align them across the x-axis and similarly if you have really really spaced out things or vertically you select these align them go here and you distribute vertical spacing the thing is that when I select them these two are for one dimensional aligning either on the y-axis or on the x-axis but tidy up is for two dimensional alignment what do I mean by that if I duplicate these and oops command Z and just sort of scatter them around I can select all of these go here and click on this grid icon which basically means tidy up so now they've all been tidied up a fun part is that I can achieve the Same by clicking here and once they are selected in my design panel just below all of these options you have these two things right here which is the horizontal spacing and the vertical spacing if I press 80 here and 80 here they will all now be spaced out properly another huge huge shortcut is that you can adjust their spacings by these handles right here another thing is that let's just say I color the alternate ones let's make them red I can actually select all of them and drag these within that grid area [Music] so I can put them in any uniform spot [Music] very easily and the entire spacing structure would remain static which is very very useful now there are some quick shortcuts that I want to discuss firstly now that we have covered alignment the next thing that we need to learn is about positioning so the figma canvas that you see if I really really zoom out you'd realize that it sort of has some limit okay it might you might feel that this is infinite but in reality it is not infinite the limit is 65 000 pixels or across each axis so assume that this canvas has a center point you can extend 65 000 pixels on top and bottom and 65k left and right now on this entire canvas if I create a circle and go here and make this position 0 on x-axis 0 on y-axis if I zoom out you'd realize that you can't even find it that easily where is it it's here that means this is the central point of the sigma file but it doesn't matter the useful part is that I can select any layer and move it across the x-axis and the y-axis but usually people don't type what they do is they use the shift key and the arrow key so if I press up up 1 1 pixel you'll see it moving so if I say put this at 320 I can take this and press up and down to move it but that takes a lot of time you can use nudge values so what happens is that if I have shift holding I can quickly move in increments and right now you can notice that the increments are in 10. you can always do command slash type the word nudge and change the nudge amount to 8 pixels which is very very safe because usually people follow an 8 pixel grid so if you move in multiples of 8 it's always safe so you have width you have height and then you have this thing called as constraint proportions what that means is that when I move this entire thing let's just say I make a frame I constraint my proportions if I reduce the width the height also reduces proportionally if I uncheck constrained proportions if I increase my height the width is unaffected another quick shortcut you want to flip anything horizontally just to shift Edge if you want to flip anything vertically just do shift V and this applies for everything like I can literally take this Frame and do shift H and it will mirror it I will do shift V it'll flip it vertically there's another thing which is called the Z index and we will not cover that yet but just to make you understand how this works the thing is this card is visible only because it is on top of this grid paper there's a grid paper and you have an image on top of it so z-axis is basically the third axis if you have anything on top of something the Z index is higher this is something that developers use you don't need to really care about it but you can always read about it another very powerful feature that you can have here is that you can have math added into this so I can write plus 34 and it will work I can say take this entire bracket divided into 2 plus 12 and it will still calculate so you can have math operations very very easily and scrubbing of course it's indefinite scrubbing you can do that for as long as you want now before we get into the details of the design panel I want to quickly Circle back to the layers panel and this is very very important let's take these three slides okay and I'll duplicate them visually on the canvas you can see these on the left this one in the middle this one on the right if I select all of them let's say I rename this as slide one slide two slide three if I move slide 3 here and slide one on the right side you will realize that in my layers panel the order is unaffected it still says slide one on top then slide two then slide 3. visually the order is not influencing the layers panel similarly if I move my layers panel the canvas is unaffected so these two things are completely detached now why does this matter there's this thing called as batch renaming let's say I want to export these as jpegs maybe for presentation if I select all of these and do command r and rename this as pick Dash and then in batch renaming you can basically have shortcuts so if I click on this number ascending it will write dollar small n n and you can see a small preview here if I delete one in it'll just make it pick one pick two pick three if I rename these you'd realize that it has renamed it in the absolute wrong order I want the left side image to be picture number one and the right one to be picture number three right like visually it has to go from you know one two three so basically renaming is independent of how things are on the canvas renaming depends on your layers panel because see here it is pick one pick two pick three it is absolutely perfect visually it is wrong because renaming actually depends on how you have arranged your things on the layers panel but now you don't have the time to match the layers panel with what is there visually so here is where you use this plugin called sorter plugin I can select all of these go to this panel click on plugins and type sorter oops sorter and you can install it once you install it I can select all of these do command slash type Sorter and select sort position once I do that you will see a notification and what happens is that now the way I have arranged these visually is exactly how they arranged in the layers panel so you sort out something you do command R and type new Dash dollar n and now it is renamed in the exact same order the way I wanted so for example all of these slides that you see slide 43 44 45 I first sort them and then batch rename them and then export them another quick shortcut is that once you select a frame if you press enter it'll select everything inside the frame if I press tab it'll select the first item if I press tab again it'll move to the next item and similarly it goes on in circles now if I press Tab and press return again it'll select everything within that frame and then I can press tab again so this is how you navigate without touching your mouse if I do shift return it'll come back to the parent one layer above if I do shift return again it'll come back to the parent again now if I press tab it'll move to the next slide because now I'm sort of circulating in between the parent frames if I do shift tab I'll come to the previous list item so return is to go inside tab is to you know sort of circulate in between one of those options so if I go here and press return and do tab I can do it this way if I have multiple layers and if I say click here press this tab I can do shift Tab and Go reverse so shift is basically for you know reverse ordering I just thought I'll explain these quick shortcuts before we move ahead now we have selected this file right here and you can see this thing called Auto layout this will cover later constraints I've explained it to you layout grid we will cover later the next basic item is of blending modes see everything you put on your frame is essentially a layer correct now this layer has visibility modes and a fancy word for visibility is called blending modes so you see this thing called pass through if I go from pass through to normal if I go from dark and multiply color burn you basically have different ways this thing will sort of blend in now blending mode is not for a single layer a layer is Blended on top of another layer so you need to make sure that if you have two images only then blending modes will work we will not get into too much depth of this because this is usually used by graphic designers when we make more detailed videos we'll cover this but the important part to understand is that you have 16 blend modes and the best part is that if I say create a frame and create a rectangle like this you have a layer mode which defines my blending mode you have overall opacity and then just below your layer you have fill so if I click on fill I can choose between colors and of course we have created detailed videos on color styles so we'll teach how this is the Hue Circle this is my Alpha so you know this is when the color is on a zero opacity this is on maximum capacity when you click on this you have your gradients so by default the gradient only has one color if you want to add the next color you click on this point and then increase the alpha and then make the color slightly darker and then you can move around the directions like this because this is a linear gradient you have like a straight line if I go from linear to radial then you'll have something which looks circular again you can have angular as well I never use angular I also never use Diamond I only switch between radial or linear you can also select an image so if you click on choose an image you can put any background image and then go through these filters and now you can also upload videos as well we will cover these fill Styles in detail there's also this thing called as libraries which we will not cover yet but basically you can save specific colors so you don't have to select those hex codes again and again next we come to the typography panel so the thing is you would have noticed that when I select a layer you have a layer and colors and all of these things but when I select text you have a dedicated panel which is very similar to how we used to see it on Microsoft Word or notepad so let's go through the typographic panel one by one now that we've done the basics it is time to understand typography very few figma videos actually cover this panel in detail and to be honest I see so many designers committing serious serious mistakes and they're declaring their type Styles just because they don't understand how this panel works now here is a screenshot that was uploaded on fakema learn and what they've done is they've basically numbered every single item you see in this panel so we will break down every single thing one by one the first item are these four dots which are for textiles we will not cover this yet but just to give you a quick explanation when you're creating an app or a website there's a limited number of font sizes limited fonts limited options that you declare and your designers and developers can only use from those specific sets so styles are basically your options that you define as a part of your type style system we'll cover that later on on second number you have choosing the typeface itself Now by default all of these typefaces are either from your locally installed computer or from Google fonts I recommend everyone to use Google fonts in their open source projects because Google fonts support a lot of weights they are free they are very easy to load and they're easily accessible in figma so when your figma file is open in somebody else's computer they don't have to install any extra fonts and you can all see the preview here itself and you can search the fonts here then on third you have your font weight so let's say I select this typeface right here I have selected inter and then I have from thin to Black so thin would be super super thin and black is going to be super per bowl and then you also have thin italics and then thin bold and whatsoever so this is where we introduce the concept of font weight next we have font size which again they have all of these numbers from 10 to 128 but to be honest you can write whatever you want now I never recommend anybody to use Font sizes less than 12 pixels no matter what you're designing anything less than 12 pixels is inaccessible so make sure that even when you're declaring your type Styles you don't go beyond 12 pixels then you have line height which is this thing right here now line height is very very important let me explain you what this means let's assume that the height of this text right here is X and this font right here is 36 pixels now visually you might feel that this layer starts here and ends here but in reality when I click on this you realize that this is the bounding box this is the boundary and you can see a lot of space on the top and a lot of space below now how does this matter if I take a copy of this and select both of these together the spacing in between them in figma's eyes is 0 pixel but visually when I see this I can see so much space why is that because there is a 160 percent line height now if I click on this I can delete this entire thing and either specify line height in clear pixels or in percentages if I make this 100 percent you would realize that now my line height is super super close to the edges it is not exactly touching the floor or the ceiling but it's super super close now if I reduce it even more you'd realize that it can go really really even up to 73.5 percent now we have made a video called declaring your type systems which is a part of our 15 episode ux design course available for free on YouTube there we say that when you are declaring your headings in headings always keep a hundred percent line height but when you're creating paragraphs say here is a paragraph with two lines in that case you can't have your text so close so in paragraphs it is recommended to keep 135 now what a lot of people do is sometimes their headings is also you know two across so you can say that this is a long heading with two lines as the font size increases it is better to just make sure let's just say you keep it at 90. if you have heading then for headings they usually keep around 150 percent of line spacing because headings look like this so for small text usually prefer a 135 or 130 and for headings you can keep 150 never write explicit uh pixel line Heights I usually don't recommend them even though when you enter the developer mode when the developer sees it they always see the line height as a calculation of 135 pixels so they can put 150 but a lot of developers just say that we want to keep it supremely explicit but I would recommend to keep it 135 and 150 for your headings then you have your letter spacing you can notice that I've kept it at minus two percent so basically it's the space between the letters that if I reduce this my letters will just come too close to each other now by default zero letter spacing is pretty pretty wide so people usually stick to minus two when they're using enter it just looks better then the next thing you have is text wrapping there's one more thing which is this thing right here which is your paragraph spacing so basically when you have say this is this is a sentence which is pretty long and then what I will do is I will shrink the width like this okay and let's keep the line height as 135 percent now I'll press enter this is my second paragraph now because I've pressed enter I have two sentences correct but visually can you see any difference not at all because my paragraph spacing is zero so if I increase this thing within the same Gap when I press enter in the mind of figma figma knows that now anxious created a new paragraph in the same text layer so now the paragraph spacing has been increased on next we have all of these options coming under text wrapping so what happens is that let's just say I go ahead with this sentence right here let's delete everything okay and let's keep this thing right here if I stretch this okay this comes in a single sentence if I reduce the width now my container is putting a restriction on my text earlier my text was defining how wide this layer would be but now I have set a boundary now here if I click on this button right here Auto width then it will always make sure that the bounding box of my text is directly proportional to the number of characters in the text but if I click on this thing and drag it now I've entered the second mode which is your auto height which means that I have defined the width it is just the height which will change so I can write whatever I want and the height will adjust but the width will not adjust in this case there is no height right so it is just like it's just stretching indefinitely and then your third box right here this is called a fixed size now what do I mean by that in this case the bounding box is independent it doesn't care what is my height so if I paste this again and again you'd realize that even though my text is overflowing the bounding box is still there now how does this make a difference because if I take this thing right here and let's say I make it red in color I will select both of these layers in eyes of figma even if I say distribute vertical spacing and keep the spacing 0 pixels it is still overlapping why because in the eyes of figma this is box number one this is box number two and all the text is overflowing so these are your overflow properties then you have horizontal and vertical alignment which is very very simple you have left alignment Central alignment right alignment and then sometimes what happens is that hello if I make it left align I can actually increase the bounding box and keep it middle of the bounding box so this can be centered and in the middle it can also be at the floor it can also be tied up with the ceiling you also have some advanced settings we will not get into this but basically this is where you can add underline strike through casing bullet points all of these things so you can always explore them after the video so now that our typography is done we come to fills and strokes so these are the two panels just below your fill now once I selected this heading you'd realize that of course at the text panel but then I also had the fill option where by default the color is white so I can change the color in whatever way I want and you will see all the changes being reflected in real time I can also go ahead and add a gradient where I can select the second gradient and make it slightly gray but nothing will happen because my Alpha is zero so you need to increase the alpha and probably make it gray and then put the headings right here so you'll have like a nice shadow effect this is like a pretty popular effect that a lot of designers use if I click on this minus button The Fill will go away so the text is there because there is no fill I cannot see it so I will have to click on plus again and the best part about figma is that you can have multiple layers within the fill so you can say that I have a black opacity at 20 I have white 100 and I have black at 20 I can also have red which is like a subtle red at maybe like 35 so you can have multiple layers just how we had styles for text you also have styles for your fill but we will not get into those right now but the point is that you will usually oscillate between fills strokes and selection colors now what do I mean by that firstly I told you that you can select any layer put any color or gradient or even an image you can put an image or video here as well I can put the color F type this thing here and put 100 opacity and toggle the visibility on and on now I can also click Plus for my stroke and then select a bright color or maybe let's do blue and then increase the stroke width and you can increase it to as much as you want looks pretty pretty bad so let's just have a color which is slightly less jarring now in my stroke you can see this option right here which says either Center inside or outside now what do I mean by that if we keep a two pixel stroke right now the stroke is outside of my text but if I switch it to inside you'll see that now it is on the internal levels now this is not useful in text but this is very very useful when you're creating UI elements because in a lot of cases when you're creating a div let's just say I create a pop-up like this and let's make this White okay and usually this is how pop-ups look like you have like a rounded Edge you have a stroke I'll take this eyedropper tool take the same color and make it slightly darker and make it at 3 pixels so this is my outline now notice what is happening the stroke is inside the bounding box because we're on the inside mode if I make it outside you'll see that the stroke is beyond the bounding box so if my stroke was 25 pixels long you can notice that I will now have extra space accommodating but if I keep it on the inside it will not hamper at all but see what happens once I keep it on inside the outer edges curved but the inner Edge is sharp to fix this you have to go from inside to Center when that happens you'll have the stroke come up very very pretty so you can probably get back to like four pixels I always keep it on inside because then I know what bounding box and what pixels I have so that is the best way that's the safest way but yes the last thing that we have to cover within fills and strokes are the selection colors so thing is this subtext right here you have this thing called Dark UI mid 4 why is this saying this because this is a style so you remember you can actually tell figma that certain hex codes have a specific name if I click on this chain icon I just have the color again I will call this color as A5 because in design language if you say A5 it means A5 into 3 if I say F that means F into 6 times because you have like six digits in a hex code so I will take A5 A5 I will select all of this text and detach my color style and paste A5 A5 again now if I want to change A5 everywhere I will have to individually go right individually select the fill but what if I select the frame and say that no matter where A5 is I want to have changes over every A5 that is useful via selection colors so inside selection colors if I go to A5 A5 and change this radar you would see that it is affecting every single A5 presence which is a huge Time Saver and of course once we get into the implementations and detail aspects of it this will be really really helpful because what happens is that sometimes you have 10 screens and in all 10 screens you have like a similar item and you want to change the color of those 10 items in all these individual frames so instead of selecting frames one by one you can select all of those frames and use selection colors to make changes very quickly now once you have worked so so hard you obviously need to export these screens right or maybe export a poster or a JPEG to do that you have the very last setting called export if you select on anything you have your export options if you don't see them it's probably going to be in this mode you have to click on plus and then you go here and you choose your resolution so of course 0.5 x 3x4x works but then you also have 512w512h this is basically width 512 pixels of width 512 pixels of height you will not use them right now it is always better to keep it at 2x then here you can add a suffix to the file name if you don't want the suffix completely okay and here you can choose the format between PDF PNG jpeg SVG now very important thing is that when you're exporting icons or illustrations always export svgs because if you export in pngs your app size or your website size will increase and it will become very heavy to load when you're exporting jpegs and figma always export in 2X resolution has been covered in our old video so if you go through our 15 episode ux design course we have covered this around fifth or sixth episode and sometimes if you create a file name let's just say I will create this thing as called folder image one if I add a slash in my naming and then export it if I were to download this with the slash convention this is how the file will download you'll have a zip file if you open the zip file the first word before the slash that becomes the folder name and afterwards you have your image name so it's just a way to you know organize your files if you put double slashes then it'll have a folder within a folder I usually do not use slashes in my names I always use a dash so I don't really like the folder segmentation anyway what I usually recommend is that once you are ready to export you literally just have to select all of your frames run the solder plugin do batch renaming and once you're done with your batch renaming you can export it now the thing is if you have edit access then you'll see the entire design panel but if you share this to a developer or somebody on a viewing access then they only see this part export that is all that they will see so yes we have finished module number two where we did beyond the basics of figma and now we come to module number three where we do practical implementation just want to show you how these files look like in a real real figma project before we move ahead and see practical examples I want to talk to you about figma Community which is like this huge open source free community where you can find mock-ups Logos icon packs UI kits everything is available for free now to access this let's come back to my free plan and on the bottom left corner you have explore community so when you go to explore Community you have too many things going on and of course that's understandable but if you go here and click UI kit you will have filters where you can say that I just want the free stuff so you can click on free and let me go back let's type that again free or just type UI kit you can go to the filter and say that I only want the free stuff so I will click on free and once you do that you will have access to so many open source libraries that you can use in your own projects in some cases there are freebies as well but the fun part is that if I say click on Apple you remember I showed you some screens from the iOS those were like official screens and from the official apple design system so Apple Google all of these companies they have their official figma Creator space so if you click on creators you can actually find Apple uh with 21.1k followers and if I click on Apple right here you will see all the files and guidelines that they have released uh you know under their files so they have files for the vision OS which is for the Apple Vision Pro by the we have a very very detailed course on designing apps so the Apple Vision Pro if you haven't checked it out please do that and we have IOS 17 and all of these things so all you have to do is you have to click on any of these files and open up in figma it'll open up a new figma file and then you can copy stuff and keep it within you right so it's pretty useful so I have just gotten this free file from Untitled UI I thought this is pretty pretty useful and this will give you a very practical idea of how Design Systems are built so thing is right right now you're just focusing on figma but to be honest when you're designing before you design any app you need like a proper system of colors you know you have primary color secondary color and all of these things have their own individual properties so even if you look at this button system right here look closely this is nothing but rectangles and texts but then once we move on with the episodes today is just lecture number one and I know that these are really really long videos but folks when I had put out a community post you people said that ansh you teachers industry level stuff and that is why I've made these now even after so much of effort if you don't put in your own effort to finish this that nobody can help you right and I will really really appreciate if you can just share about this video within your friends on Instagram and on LinkedIn it really really matters to us because if you don't support these videos who else will right so I just wanted to keep these files here just want to show you that you know later on in the course we will actually understand how do you make these different states like when you have something which is like a drop down what is the logic what is the process Behind these small small details right because what you see right now it's a blend of many things you need to understand UI design and components and auto layouts and typography and psychology and we have also created such detailed videos on ux psychology there's a ux master class that we had uh there are so many videos where we discuss so many ux mental models to be honest they will really really help you strengthen your understanding because we have already created a lot of free courses so what I would recommend you is that once this video ends watch our roadmap video so we have like so many free playlists we have for spatial design ux breakdown so many things right but I would still recommend you to watch this video called roadmap video for ux design then we also have our 15 episode course which teaches you the subject of ux design so what I'm teaching in this course is the tool but we also have a separate free course available in both Hindi and in English that teaches ux design all resources available for figma UI and ux and marketing inspiration will be shared in the description so you don't have to worry about it but folks I'm telling you if you follow our figma in 15 episode course it'll take at least six to eight months but it's going to be worth it absolutely is going to be worth it you know that the salaries are rising and it's a very very upcoming field and we also have made two very detailed videos on writing your ux case study so there are two parts to it so make sure you watch those as well and here is your homework for the next five days firstly comment below what we should include in the next set of videos because I'm collecting all the feedback I want to make sure that this one single course becomes the most powerful the most valuable resource available on the internet when it comes to learning figma after this playlist nothing should remain also it's very important to understand folks that with time a lot of AI features are now coming to figma so a lot of people say that is this even worth the effort I think it is because you need to do a lot of grunt work before you can just automate all of your efforts to AI so we have created a very very in-depth video called uh is ux over the thumbnails as this ux over will AI replaces we I have in detail discussed all of these questions as to how figma will evolve how so many of these things are going to be automated but if you don't have hands-on experience when you Outsource things to AI you will not be intelligent enough to check whether this is right or not right so you need to do this uh by default you have to go into the trenches and understand how this works so comment below if you like this video uh comment below if you want the next nine videos to be as detailed as this or do you think that it's not worth it and it's it's too long we should keep it thought as a superficial of how other YouTubers do it because it makes no sense for us to work so hard and uh if it's not working for you guys right and please make sure you make detailed notes on notion I have created a free video on my YouTube channel where I teach you how I use notion it's a brilliant tool for Learning and you know just like in overall just understanding how to document your learnings in the first place you can go through that entire YouTube video and understand how can you document your learnings very very easily on notion because the thing is we will be covering so many resources and so many ideas and so many Concepts that if you don't document these by the time you reach the 10th episode you will just get confused and try to play with constraints try to go to figma's documentation and see if you can you know play around download a UI kit see if you can you know sort of do some experiments and watch figma's getting started playlists so this playlist is supremely important I strongly strongly recommend you to start learning these things on your own of course we are also coming up with very detailed videos but you should not wait and document all of these things start putting it on LinkedIn and start designing in public people need to know that you're learning people need to see you grow I have always documented everything that I've learned it has always been on LinkedIn no matter what I am doing I'm telling you it opens up a lot of opportunities and if you document something on LinkedIn tag me I would love to see if you actually completed this entire video because I know very very few students are going to do that and yes our next video is going to be on frames and auto layout which is going to be a slightly complicated topic I just want to make sure that this first video brings everybody on the same page you will have a tons of resources on learn UI ux dot in as well where we will be releasing our live cohorts our premium offerings a lot of things are coming up for ux designers who are already professionals right so it's towards upskilling people who are already in this field because the thing is we've decided that we're going to teach the basics for free it makes no sense to take money to teach Basics so I'm going to be finishing these 10 lectures absolutely free and to be honest I also know that these 10 free lectures are going to be way more in depth way more valuable than even the paid offerings that people have in the market so our goal is to bring you up to a level where your freelancing you are learning these things you're learning and earning enough money and then once you're ready to obstacle you can always come to learn UI ux dot in and join our you know premium cohorts and live cohorts where we go from say level five to level 10. so from one to five I can bring you through these three videos but once we come from 5 to 10 I want to make sure that the community is very filtered and very like focused right because we will just want to make sure that people first learn the basics for free so these 10 videos are going to be supremely awesome let me know in the comment section that if you want me to cover something specific in frames and auto layout as well even though we will still have three very very detailed modules uh I just want to get your feedback so that these videos are absolutely Timeless so with that being said uh let me bring this mic here with that being said I hope these videos help you I would really appreciate if you could click on subscribe hit the Bell icon and like this video so that YouTube knows that this video is helping students and I would love to see your reviews on social media do tag me I hope that you're taking care of your mind and body this is your those signing out 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