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 Figma, a course where we'll talk about each and every basic aspect of learning Figma 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 all right 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 basics till 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 two you will know what unchaise clicked and of course i'm gonna 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 figmas 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 FigJam, 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 FigJam. FigJam 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. All logos that you create, all digital illustrations that you see in this world are actually vector graphics because they do not pixelate.
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 figjam 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 Figma 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, Ansh, 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 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 FigJam 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 the subject 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 opened 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 figjam board it will create a figjam 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 two three 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 Ansh Mehra, Ansh Mehra 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 so 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 this 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 is an 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 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 slice that we have created let's explore figma 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 uh 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.figma.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'd 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'd 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, you 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'd realize that they mentioned 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 up 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'd 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 this 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 3 to 4 ratio for my carousals. 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 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. Now 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, it 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 screens and here is a keyboard as well now look at these screens closely you'd 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 ADI 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 want 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'd 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 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 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 the upcoming segments so if you want to zoom in and zoom out you can just hold uh 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 comment 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 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'd 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're 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... Look. 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 e 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 R, 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 Mehra.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 this tab 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 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 would 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 now 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 button, 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 right. Sometimes you have a flow. 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 you 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 will 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'd 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 into 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 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 cursors 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 will 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 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 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 outermost 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 align 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 tidy up 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. 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 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.
So I can put them in any uniform spot 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 zero on x-axis zero 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 this Figma 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, up, one, one 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 uh multiples of 8 it's always safe So you have width, you have height, and then you have this thing called as constrained proportions. What that means is that when I move this entire thing, let's just say I make a frame, I constrained 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 do Shift H. 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 will 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, divide it 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 3. If I move slide 3 here and slide 1 on the right side, you will realize that in my layers panel, the order is unaffected. It still says slide 1 on top, then slide 2, 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 $nn.
And you can see a small preview here. If I delete one end, 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 1, pick 2, pick 3. 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 are 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 will 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 we'll 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 darken, 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 depths 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 it 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 when 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 Figma 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're 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 bold. 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'd 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 zero pixel. But visually when I see this, I can see so much space. Why is that?
Because there is a 160% 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%, you'd 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, really even up to 73.5%. 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're declaring your headings, in headings always keep a 100% 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 heading 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% of line spacing because headings look like this. So for small text, usually prefer 135% or 130%. And for headings, you can keep 150%.
Never write explicit 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 2%. 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 2 when they're using inter. 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%. 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 Ansh has 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 to the ceiling. You also have some advanced settings. We will not get into this, but basically this is where you can add underlines, strikethrough, 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 would realize that of course i had 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 will 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 at 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 three 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 edge is curved but the inner edge is sharp. To fix this, you have to go from inside to center.
When that happens, you will 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 midfold.
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 6 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.5x, 3x, 4x works. But then you also have 512w, 512h. 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 a 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'll become very heavy to load.
When you're exporting JPEGs in 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 in our 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're ready to export, you literally just have to select all of your frames, run the sorter 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 mockups 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 you 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 creators page. So if you click on creators, you can actually find Apple 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 way we have a very very detailed course on designing apps for 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 will 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 the thing is, 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 teach us 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, then 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 wanted 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 dropdown, 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 masterclass that we had. 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, it's 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 going to come into 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 is UX over?
The thumbnail says is UX over? Will AI replace us? 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 by default. You have to go into the trenches and understand how this works. So comment below if you like this video.
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 too long. We should keep it a little superficial of how other YouTubers do it because it makes no sense for us to work so hard and but 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 playlist.
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 wanted to make sure that this first video brings everybody on the same page. You will have a ton of resources on learnuiux.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 you're freelancing you are learning these things you're learning and earning enough money and then once you're ready to upskill you can always come to learn uiux.in and join our you know premium cohorts and live cohorts where we go from say you level 5 to level 10 so from 1 to 5 i can bring you through these free 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 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, 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 dost Ansh Mehra 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.