Free Figma Crash Course for Beginners 2023 | UI/UX Design

hey everyone this is arash and in this video i'm going to show you everything you need to know to design websites and mobile applications in figma so let's begin so here we are on figma.com here is the home page as you can see right at the top we have different menus we have products we have figma thickjam we will talk about them in a few minutes we have enterprise we have pricing community company etc well we are not gonna go to these pages if you want to check out the pricing you can definitely go ahead and check it out but i'd like to point out that you can use figma for free the paid version just allows you to create more files and have team libraries and those kinds of features but as long as you don't collaborate with other teammates and let's say a large team you don't need a paid version okay so you can go ahead and sign up here or just log in using your gmail account and once you're logged in you will see this page depending on your system preference you will see the light version or dark version if you prefer the dark version you can head over to this top right menu right here go to theme and from here you can adjust it to dark okay i'm gonna keep it as light for now here is your figma dashboard you can find your drafts your recent files as you can see on the left side we have recents we have drafts and we have community that we will talk about in a second right at the bottom you will see your teams you can simply create a team and add different team members to it but for now we are not gonna need a team right here at the top we have three different options we have this new design file which allows you to create a design file the next one is new fig jam file it allows you to create a white board basically fix jam is a digital white board and it allows you to just gather ideas with your teammates and other designers you can share your ideas with each other etc and finally you have the import file option this option allows you to bring different files from other design software for example if you've already worked with sketch and you have a sketch project you can simply use this import file option to import sketch files to figma alternatively you can just drag and drop your sketch file or any other design file to figma and it will be imported to your dashboard here you will see a few templates that you can choose from we are not gonna need them if you want you can go ahead and take a look but for now i'm gonna close it and here we have a few different files we have this fig jam file that teaches you the basics of fig jam figma basics prototyping and figma etc so whenever you work on a project your project will appear in the recent section okay basically whenever you open up figma when you go to figma.com assuming that you're logged in you will be taken to the recent page and you will find your recent projects right here if you go to draft you will see a similar layout here okay we have all these options but in drafts you can find your files in a more organized way but if you are just working on a project every single time you would go to recent and you will open it up right there okay we talked about reasons and drafts but what about community well figma has its own community okay it's all built in and if you open it up you can find many useful resources here right inside figma you don't need to go ahead and just look for figma resources templates etc somewhere else you can just simply go to figma community and there are tons of good stuff here we have inspiration projects jam sessions design system web mobile visual assets etc and you can also search here in the search bar whatever you're looking for if i just scroll down here you can find the trending projects shared by figma users for example we have this ui kit this is a style guide and there are many many more in fact let's go ahead and search for something i'm gonna look for crypto let's see if we can find a good crypto template cryptocurrency project here we have many different projects i'm gonna go with this one it looks good i'm gonna open it up and here you can just click on get a copy and a copy of this project will be saved in your figma dashboard okay as you can see it says crypto wallet mobile app community and now we are inside a project if you want to go to your figma dashboard you can simply go to this top left menu and click on back to files and here we are we are in drafts you can go to recents and if you just want to create a new design file you can just click on new design file that's what we do always so here we have a new design file and if i want to open up the template that we just created we can do that easily all right so here is the figma interface basically we can divide this interface into four main sections we have the canvas right in the middle we have the layers pane right on the left we have the design inspector on the right side and we have the toolbar at the top the canvas is where you put all your frames and artboards and your design okay basically you design right here you can simply move around if you just hold down the spacebar on your keyboard left click and drag around just like that you can zoom in and zoom out using your mouse wheel i can hold down the command or ctrl key on my keyboard and use my mouse wheel to zoom in and zoom out so that's basically how the canvas works and you can move around it easily but what about the layers pane well on the left side we have the layers list whenever you create something it could be a text it could be an image it could be a shape it will appear as a separate layer on the layers list if you are familiar with other design software like adobe photoshop adobe xd sketch for sure you're familiar with the concept of layers right they stack on top of each other like this we will talk about the hierarchy of layers later but you need to know that you can find all your layers on the layers list right here right next to it we have the assets panel and here is where we can find our components we will talk about components in a few minutes basically you can save your components here just like these that we have here for example we have this status bar and then you can just drag and drop one of your components into your canvas or into your frame and there it is okay we will talk about it later you can also share your assets with other designers or with your team if you just click on this team library option right here you will be able to share it with other designers all right but what about the design inspector well the design inspector on the right side is a very important panel in figma because you can basically adjust the properties of your layers in the design inspector in fact let me just zoom in here and here we have different elements if i just select for example this deposit button right here you will see that on the layers list it's been selected and on the right side in the design inspector we have many different options we have the alignment options at the top we have the coordinates here x y the width height and corner radius etc we have auto layout constraints layout grid feel stroke effects etc so this inspector panel is so important and we will talk about it in detail later but what about the toolbar well in the toolbar we have many useful options here we have the selection tools by default it's set to move and it allows you to just select something in your canvas and just move it around just like this you can change it to scale it's useful whenever you want to scale something proportionately let's suppose you want to scale this deposit button you just hit k on your keyboard to select the scale tool or just select it from here and then scale it proportionately then we have the frame option well basically frames are what you are seeing right now okay if you are coming from another design software for example sketch you may be familiar with the term artboard basically frames are artboards and they just work like a white paper a blank page that you can just put stuff on and start designing okay so frames are so important and in fact if you want to create a frame you can hit f on your keyboard or a both of them will work and you can just left click and drag to create a custom size frame alternatively what you can do is this you can hit a and on the right side you can see that a few pre-built frames with pre-defined sizes appear for example if you go to phone we have iphone 13 pro max you can see the dimensions iphone 13 13 mini etc we have tablet desktop presentation and so much more let's suppose you want to design an interface for iphone 13 pro max in this case you can just simply head over to this section and click on this option there it is your artboard or let's say your frame is ready and you can start adding ui elements to this frame okay the next option is the shape tool well here you can create some primitives you can create a rectangle line arrow ellipse polygon star and you can also use this place image option to place images these are the only shapes you may need for ui design okay of course you can adjust them according to your needs but you don't need anything fancy let's suppose you want to create a button you will just use a rectangle instead you can use a frame to create a button which is a better way we will discuss it later but if you want to create a button quickly you can just select rectangle head over to your artboard or frame and just left click and drag and draw a rectangle just like that you can go ahead and check out all these shapes for example an ellipse as well and you need to keep in mind that each of these shapes has its own properties all of them have some default properties like width height corner radius etc but some of them have even more properties so here for this rectangle i have width height but for instance if i go ahead and add a polygon here look what happens here we have a new property called count and it allows us to add more edges to this polygon by default it's set to three i can just increase it just like that or decrease it to three if you wanna adjust any of these shapes you need to enter the edit mode okay in order to enter the edit mode you have two options you can either double click on that particular shape and as you can see the toolbar has changed right here you have different options now and i can simply select this node for instance and move it around to create a custom shape and once i'm done editing i can just hit escape on my keyboard or i can just click on this done button the other option is to just select your shape and hit enter on your keyboard and you will enter the edit mode all right i'm going to remove these shapes next we have the pen tool right here we have pen and pencil it allows you to just create different nodes and draw something very custom it's very helpful if you want to create some original shapes and different curve lines but most of the time we don't use it next we have the text option it allows you to create text you just select it left click somewhere and just start typing let's write we are learning figma just like that and in order to adjust your text you can head over to the text section in the design inspector and i'm gonna increase the font size to 40 for instance let me just decrease the width of this text layer and increase the line height here you can adjust the weight there are many different properties you can adjust right there all right next we have this resources option if you just open it up here we have three different panels components plugins and widgets here you can find all your components as i showed you in the assets panel before you can just search for a specific component right here you can also go to plugins we will talk about plugins later now let's go to widgets since we haven't used any you can't see anything here in the recent section but you can just look for these community resources right there and the next option is just this hand tool which allows you to move around your canvas you almost never select it here as i showed you before in order to move around your canvas you may just need to press and hold the spacebar on your keyboard and left click and drag and here we have a few other options that we will talk about later in this course all right now let's talk about a little bit more about layers right here well let's take a look at this design here we have a frame if you take a look at your layers list you will see that we have different frames we have this crypt x home page and details and you will see them right here this icon indicates that this is a frame and if i just extend it using this arrow right here you will see all the layers inside this particular frame let's suppose i want to go to this home page i'm going to extend it and here we have all the layers used in this particular frame if i just zoom in i can just select this text layer for instance and you see that each of these layers has a unique icon for example text layers have this t icon if you have a group you will see this particular icon if you have an image you will see this icon this one is for the auto layout frame that we will talk about later and this one is an instance of a component we will talk about components as well if you want to rename a layer you can just double click on its name and start changing it i'm gonna change it to icon let's say and one thing you need to keep in mind is that the order of your layers matters when it comes to design what do i mean by that so let's suppose we select this card and right behind it we have these decorative lines as you can see if i just select them you will see that we have this group let's rename it to decorative lines so that you could easily find it here the reason we can see this card clearly is because this group this card let's rename it to card is above this decorative lines group in the layers list if i just select this decorative lines group and i just drag and drop it above this card group look what happens now these decorative lines are on top of our card group that's why we can see them completely and if i just want to see my card easily i can just drag it and move it right here keep in mind that sometimes you might accidentally put a group inside another group like this if you just hover over another group and drop you will see that your card group is now inside this decorative lines group that's not what we want all right great now that you know how the layers work let's go ahead and talk about boolean operations in figma so i'm going to go ahead and create a large frame here i'm going to hit a on my keyboard left click and drag to create a large frame and right here i'm gonna create different shapes let's create an ellipse if i just left click and drag by the way i can just create this kind of shape this ellipse freely okay but if i want to get a perfect circle i need to create it proportionately and to do so you need to hold down the shift key while you are drawing your shape just like that and as you can see now the width and height are set to 202 let me go ahead and change its color to change its color you need to head over to the field section in the inspector and in this panel we can just choose a different color here i have a few different document colors i'm gonna go ahead and select for example this one it looks nice now i'm gonna duplicate it to duplicate a layer you can just simply select it and hit ctrl d or command d on your keyboard and as you can see now we have ellipse two in the layers list i'm gonna move it to the right side somewhere around here okay and i'm gonna select these to duplicate them a few times like this one more time and let's place them right here so what are boolean operations well we have a few boolean operations they for example allow you to combine different shapes or subtract something from something else let me show you how they work if i want these two shapes to be combined i can just select them both it's very important in order for the boolean operations to work properly you need to select at least two shapes okay so i'm gonna select these two alternatively you can just select one hold down the shift key and select another one and then in the toolbar you will see this option if i just click on this little arrow to extend this drop menu here we have four different boolean operations we have union subtract intersect and exclude the first one allows you to combine these elements if i just click on union there it is as you can see they are combined but you can still extend this layer and adjust them that's awesome isn't it now let's select these two and just click on subtract selection this one allows you to subtract an element from another element so let's suppose you want to create a moon icon okay to do that you can just place two different circles like what i had here and then use the subtract boolean operation select this shape and move it to the left side and here is your moon icon just like that you can go ahead and adjust its color to whatever you want now let's select these two and here we have the intersect selection basically what it does is this it removes everything except the intersecting area okay so for instance if you want to create an eye icon what you can do is this you can just create two different circles like that select them and just click on intersect selection here is your eye you can just now rotate it to do that you need to hover over this particular area and you will see the cursor changes hold down the shift key left click and just drag just like that you can rotate it alternatively you can head over to the inspector and from here you can see this rotation property and change it easily but it's not ready yet we need to just subtract a circle from it now i can create another circle right here in the middle select them now and just select subtract selection and here is our eye icon and last but not least we have the exclude selection it basically keeps everything except the intersecting section all right if you want to add an image to your project you can simply just drag and drop an image into your project just like that and then you can just adjust its size let me put it right here you can see that it has all these properties like width height x y these allow you to adjust the position you can just move it around like this that's how you can add an image to figma there are different ways to add images to figma this is one of them probably the easiest one but let's say you have a shape like a circle okay and you want to add an image to it you can go to the fill section where you change the color of your shape open it up from here from the top menu you can go to image and you can choose an image on your system you can adjust these settings like exposure contrast saturation etc here as well okay just keep that in mind i'm gonna go ahead and create a button here here we have a button as you can see but we are gonna create one together we will need this rectangle i'm gonna left click and drag to create a rectangle and i'm going to set its height to probably 52 and then i'm gonna go ahead and change its width like that and i'm gonna change its color to blue probably or maybe purple i like it more okay nice so here we need a label i'm gonna hit t on my keyboard to select the text tool left click and let's write sign in it's too big for this button i'm gonna head over to the text section and decrease its font size to 17 points just like that and i can place it right here let's suppose your text is placed there and you want to put it precisely in the center of this shape in this case you need to select your shape hold down the shift key and click on this label as you can see both of them are selected now and you can head over to the alignment section right here at the top of this inspector and click on this horizontal center alignment you can just align it vertically as well and now they are aligned perfectly all right so we've created our button probably we can go ahead and make it rounded let me select this rectangle and increase the corner radius amount here to make it something like that now i'm going to select them both and group them to group elements you need to select them and hit ctrl g or command g on your keyboard and there it is here we have a little issue if i just double click on this text to select it you can see the line height is set to 52.8 i'm gonna set it to auto for now and let me realign it now it's better so here we have our button but our button is not responsive what do i mean by that let me duplicate it hit ctrl d or command d move it down let's suppose you want to change this text to something else for example let's write get started as you can see the width of this button doesn't change when i change the text which is not good because every time i want to create a new button i need to go ahead and make sure that my width is properly set and also i need to make sure that my text is aligned perfectly and that's not efficient at all instead we need to make sure that our elements are responsive to do that we need to use auto layout and it's very simple to use you just need to select your group here and hit shift and a on your keyboard and you see that nothing changes here but in fact something changed if you take a look at the layers list now your group icon changed to this auto layout icon okay and it says frame because whenever you add auto layout to something it will become a frame so you may ask what's the difference here is the difference if i just duplicate this button now hit ctrl d or command d and bring it down and if i just type something like get us started look what happens now our button is responsive the width of this button adjusts automatically based on the width of our label and that's what we want here if i select this button you will see in the auto layout section we have different options you can modify the horizontal padding like this you can modify the vertical padding like that i can set it to 16 i can set this one to 32 to create this beautiful button and here you can change the alignment right now since we don't have many elements you cannot see what this alignment option does but when you have multiple elements it's quite handy to set the alignment right here and the other thing about auto layout is that we have basically two different directions when it comes to auto layout we have horizontal and vertical let me show you what it means here we have two directions vertical and horizontal and as you can see figma automatically figured out that we need a horizontal direction because we want our button to grow horizontally when i try to adjust this label but let's suppose we want something to grow vertically in that case we would need a vertical direction so let me show you another example let's suppose i create a rectangle here i'm gonna just increase the corner radius amount like that let me change the color and now i'm gonna add a shape let's say a circle here let me just duplicate it a few times and i'm gonna change the color of these circles to white that we could see them better and now i'm gonna select them all and hit shift a and as you can see figma automatically change the direction to vertical because we want them to stack vertically on top of each other and i can simply adjust the padding right there and let's suppose i want to remove one of these circles i can just double click on one of them and hit delete on my keyboard just like that what if i want to add something else i can i can just create let's say a square and drag it and drop it and you will see this little blue indicator allowing me to add something else into this auto layout frame if i drop it there it is the height automatically adjusted accordingly so let's suppose you want to add an icon to this sign in button i can do that easily so let's suppose you want to use this icon for example this one i'm gonna select it if you just double click on it you will enter this frame in the layers list and you will go down and down until you reach this frame i can just drag it drop it and place it right there and here it is you see how easy it is to work with auto layout there are many things we can do with auto layout and if you want me to create a more advanced tutorial specifically for auto layout please let me know in the comment section down below alright we talked about auto layout now let's talk about components let's suppose you create this button i'm going to remove this other button and this frame as well so here is our sign in button so here is our button and let's suppose we want to design 20 40 50 100 other pages how can we use this particular button on other pages well one way is to just recreate it which is not good at all the other way is to just go ahead and copy it hit ctrl c or command c and let's suppose we have another frame here okay i'm gonna remove this you can just paste it right here but that's not a good way and the reason is if i do that let's suppose later once everything is ready the company or your client decides to change something let's say the corner radius amount then you need to go ahead and manually adjust all of those pages all of those buttons one by one which is a tedious task so to avoid that we need to create a component components are basically reusable elements we can turn this button or any other element into a component and later we can reuse these components let's suppose we want to reuse this button i select it and to turn it into a component i can head over to the toolbar and i can click on this create component button as soon as i do that you will see its boundaries color change to purple and also if you take a look at the layers list you will see it turned purple as well and also its icon changed to this diamond icon this icon indicates that this is a component but how can we use our components first let me rename it to primary button this is going to be the name of this component one way is to just duplicate it if i just duplicate it hit ctrl d or command d and move it up you can see that i have an instance of a component if you take a look at the layers list you will see the icons are different that's because this is our master component and this one is an instance of this master component it's basically a copy of it but you shouldn't confuse these two i can simply remove this instance without removing the components this master component but if i go ahead and remove these components the master component from my design file it will be gone forever and i won't be able to reuse it again and again anymore so what's the difference between the instance and the master component let's suppose we create different pages okay i'm gonna select this artboard or frame and i'm gonna duplicate it a few times hit ctrl d or command d and i'm gonna reuse this button as i showed you before you can also go to the assets here from local components you can just drag and drop your primary button right there and i'm going to repeat the same thing here a few times just like that let me go ahead and put it right there put this one here as well well now we use this component on four different pages let's suppose you want to adjust its color what should you do well if i just want to change one of these instances i can select this instance and i can simply adjust it without affecting other instances let me show you how just like that you see nothing else changed i can also adjust the corner radius amount like that i'm gonna undo this i'm gonna hit ctrl z or command z a few times but if i go ahead and adjust the master component look what happens you see when you change the master component you are affecting all of its instances as well but when you modify a particular instance the changes will be applied to that particular instance just keep that in mind it's very very important so now let's suppose you want wanna change the font of this button you can simply adjust it here i'm gonna write enter and there it is all these buttons changed accordingly all right now that you've learned about components we're gonna talk about something even more interesting which is called variance but before we do that if you enjoyed this video so far i'd appreciate it if you hit the like button so that more and more people like you could find this video and benefit from it all right what are variants and how we can use them so let me show you an example here we have our master component right here is our button i'm going to bring it out for now let's suppose you want to create different versions of this button because usually we create different states of our button for example we could have default we could have tapped hover disabled and also we could have a version with icon a version without icon and as you add more and more variations to your design system it would be very hard to keep everything organized but using variants it's very easy to do that let me show you how it works here is our primary button if i head over to the inspector here we have a section called properties and you can see that there is this plus icon right here if i just click on it this window pops up there are a few different options and i'm gonna click on variant as you can see it says create new property i'm gonna click on variant and as soon as i do that this little dashed frame is created and it allows me to create different versions of this button or let's say different variations so first let's select this component okay we named it primary button and by default it has these values okay property1 and the value is set to default what i'm gonna do is i'm gonna change this property one i'm gonna call it button and then for the value i'm gonna write primary so here is our button and if you take a look at the layers list you will see that we have our primary button master component and inside if you just extend it you will see that we have this variant and this variant is called primary so button and the type is primary and i'm going to create a new variation now and to do that i'm gonna click on this little plus icon right here and as soon as i do that a new button is created you can easily select your master component and adjust the dimensions of this uh let's say dashed frame so that you could organize all your variations here i'm gonna place this new version probably here and then i'm gonna go ahead and change this value here to outline okay because i'm going to create an outline version of this button and then let's go to the field section we don't need the color anymore so i'm going to click on this minus button and instead i'm gonna add a stroke to it let me change the color to the same color uh the thickness is gonna be let's say two and also i'm gonna adjust the color of my text so i'm gonna select it to select this text you can hold down the ctrl key or command key and just click on it let me change the feel to the same color and for the icon as well i'm going to select the icon and the color is going to be the same so here we have the outline version of this button right but how can we use it well as you remember we used different instances of our master component right if i just click on this one and let's say you want to change it to the outlined variant the way you can do that is you can head over to this section in the inspector you will see you have your primary button component here you have the button property and here you have this drop menu as you can see we have primary and outline as we just created in our canvas and you can see them in the layers list as well if i just change it to outline there it is we can easily change our button type it's so so handy because imagine you have many different buttons and it would be very very hard to keep everything organized and in case you want to make changes you can simply head over to your master component here let's suppose you want to adjust the thickness of this border you can select it and i'm going to go ahead and increase it to let's say 4 for now it's too much but i just want to show you how it works as you can see the change that we just made has been reflected here as well now let me show you another example i'm going to undo these okay and i'm gonna create two different buttons with and without icons so i'm gonna remove this one let me just adjust the dimensions of this frame and here i have my primary button but now i'm going to change these names i'm going to change this one to icon and i'm going to set the value here to true it means that we have an icon actually in our button now i'm going to click on this add variant and place it right here and i'm gonna change this one to false which means we don't have an icon and in fact let's select our icon here and just remove it okay now let's see what happens when i select this button as soon as i select it you will see that on the right side here we have this toggle button it says icon the name of our property and here we have this toggle button which allows us to switch between different variants so if i just click on it there it is we have the version without icon if i enable it and here is our icon the reason we get this toggle button is because i use that true false value okay if i used any other text it wouldn't work just keep that in mind and as you can see the name here in the layers list has been changed as well icon equals false icon equals true all right great now let's talk about plugins a plugin is a third-party app or let's say piece of software which allows you to add more functionalities to figma and do something additional to what figma has to offer and there are many useful plugins in figma that you can use and i'm gonna show you a few of them so that you just get an idea of how you can use plugins how you can run them etc well basically you can look for plugins in the figma community so if you just go to the figma community here and if i scroll down you will see here we have all resources if i just click on it i can go to plugins and here you can find many different plugins that you can use in your projects and to try them out you can just click on this tried out button but instead of doing that right here i'm going to go ahead and show you how you can use any plugin inside your project i'm going to get back to our project and let's suppose we want to use a plugin you can go to this resources section go to plugins and just look for a plugin that suits your needs here i'm gonna look for content real in fact we have it right there under recent because i recently used that it's a fantastic plugin it allows you to add real data to your project it has icons it has profile images etc let me show you how it works if i just click on it i can just click on run and it will run immediately all right next next and start so this plugin has different uh tabs home text image icon and ad let's go to text and here you will see different libraries okay for example we have number we have email we have full name lorem ipsum us full address etc then we have image we have different avatars you can see there are different libraries by different creators this one is created by microsoft this one as well then we have icons let me show you how you can actually use this plugin let's suppose you have a shape okay i'm gonna add an ellipse here and you want to add a profile image here and you don't have an image for it so what you can do is this you select it you run the plugin you go to image and from here you just click on this avatars and there it is if i just keep clicking on it let's see what happens you see it just changes the image immediately you can try different libraries even you have logos there are many different libraries created by different creators that you can try i really like this toy face by emirates like that if you need icon you can just go to icons from here i'm gonna choose this fluent icons field created by microsoft and then you can just simply look for a specific icon drag it and drop it into your project and there it is i'm gonna bring it down here as you can see it's so easy to use this plugin what about text so let me go ahead and create a few text layers here i'm gonna just create one let's call it address and i'm gonna duplicate it a few times okay maybe six times let's suppose you need six different addresses okay i'm gonna select these text layers and then here i'm gonna go to us full address if i just click on it there we go we have different random addresses we can use in our design you have email addresses as well full name um number currency company names anything you want okay so just keep that in mind that's how you can use a plugin there are many different plugins you can check out for example if you want to check the contrast ratio of your colors you can use a plugin called contrast let me go ahead and run it i'm just gonna click on run if i just select my text here on button as you can see it says for normal text less than 24 pixels or points it failed so i can make my button darker if i just select my instance and i make it darker and now select my text you will see that it passed the contrast ratio checker test i highly recommend you to go ahead and check out different plugins in figma as you may need them in your projects alright now let's talk about exporting your files let's suppose your design is ready and you want to hand it off to your developer the way you can do that is like this you select whatever you want to export let's suppose you want to export this whole home page frame you head over to the design inspector scroll down you will see this export option right at the bottom if you just click on this plus button you will see it says export at 1x you can specify a suffix here it's optional and here you can specify the format you can choose between png jpeg svg and pdf and then you can just hit export home page and it will be downloaded immediately okay but you may ask what is this one x 2x etc well this basically determines the dimensions of your exported file depending on the needs of your developers and depending on the needs of your client you may need to export your files at 2x 3x or sometimes just 1x it really depends so let's suppose you design an ios app and the developer or client would require you to deliver all the assets at 2x well when you export the assets at 2x whatever dimension you have here let's suppose your width is set to 375 it will be doubled okay your height as well so the quality of your exported file will be higher therefore when they use the assets on the app or it could be a web app or website it would be crisp and very high quality so keep that in mind that's how you can export files on figma the next thing i'm gonna talk about is grids well grids are basically guidelines that help us to align everything and keep everything organized on our page and the way you can activate grids is by heading over to layout grid section and here you can just click on this plus button to add a grid to your page as you can see and if you just click on this icon this window pops up and you can change the type of grid you're looking for we have grid we have columns and we have rows most of the time we use grid and columns okay some designers prefer columns some designers prefer greed you can also combine them if you want but most of the time we use columns and grids and here you can specify the number of columns let's suppose you want to have four and you can change the color here the opacity the type you can set everything to center and then you can change the margin let's set it to 20 you see when i set the margin to 20 i will have this gap from the edge of my artboard or frame if i set it to 40 you will see that it will be increased what is this gutter well the gutter is basically the amount of space between these columns so if i just set it to 10 you will see that this gap will be smaller if i increase it to 40 you will see that this gap will be bigger okay i'm gonna set it to 20 and i can just hide it alright so we talked about exporting your project but sometimes you don't need to export your project sometimes you just want your client or the developer to preview the project in that case you can head over to this share button right here at the top this blue button and if you click on it this window pops up you can publish your project to the community if you want or you can invite other people or other designers to your project you can enter their email address here then hit this send invite button an invitation link will be sent to them and they can accept it and preview the project they can also work on a project as you can see here we have this can view option this means that they can only preview the project but if you change it to can edit they can actually modify the project so you can create a team of designers and just collaborate with each other on a single project that's awesome isn't it you can also get your project link using this copy link button right here if you just copy it share it with someone else they don't need any invitation they can just paste it on their browser and enter your project the other thing i'm going to talk about is this comment section let me show you how it works let's suppose you are working on a large scale project and you have a designer team and you want to get feedback from other designers or maybe other members of a company or stakeholders in that case they can simply add a comment let's suppose they want you to go ahead and change the corner radius of these buttons so they are going to create a comment here and they say hey arash could you please make this button completely rounded they send it then you can open it up you can reply here and let's suppose you made the changes you made it completely rounded let's go ahead and do that and then you just reply done you can put an emoji here as well and send it and once it's done you can close this comment as well if you just click on this resolve button so it's very very helpful when you are working with other people and when you wanna seek feedback okay now let's talk about prototyping well what's a prototype a prototype is basically a simple version or let's say the initial version of your final product it's basically a concept you can show how these screens are connected together how a user should be taken from one page to another page you can actually illustrate the flow of your app or website because nowadays it's almost essential for all projects to have at least a kind of basic prototype okay so let's create a prototype together quickly it's so simple i'm gonna select this first artboard let me disable this layout grid what should we do well basically when the user clicks on this button we want him or her to be taken to the next page which is home page the way we do that is like this we select this button which is a trigger because the button should be actionable and then we head over to the prototype tab here as you can see this little circle appears right here around the boundary of this button if i just left click and drag you will see this arrow line i can just hover over this second screen and now we created a connection between these two screens and as soon as we create this connection this interaction details window pops up here you can adjust the settings of your interaction so first you need to define the type of your trigger whether it's on drag whether the user should drag something or the user should hover over something we have many different kinds of triggers but here the designer already created this click interaction i'm gonna remove it and let's go ahead and set it on click okay so we defined the trigger and here as you can see it says navigate to home page so that destination the final destination of this transition is this home page and then we need to define the type of animation here we have instant dissolve smart animate moving move out etc i'm gonna set it to maybe instant for now and let's see how it works so to preview your prototype you can either click on this play button here it says flow one or you can just click on this play button right there i'm going to click on this button there it is now i'm gonna click on this get a started button and let's see what happens there we go as you can see we've been taken to the home page as soon as we clicked on it and that's exactly what we needed right so now let's go to home page and we want to create another interaction so i want to click on this tab here tab to select it in the layers list go to the prototype and i'm going to create an interaction like that let's see what happens now i'm going to go to my preview just refresh the page once again get it started and if i click on this button look what happens there it is we've been taken to this detail page or trading page so as you can see it's very easy and simple to create a prototype inside figma this is the most basic type of prototyping of course you can create advanced prototypes and animations inside figma but we are not going to dive into the details of more advanced animations as it requires so much time all right now that you know how to prototype in figma let's talk about something else let's suppose we wanna animate this button okay so i'm gonna remove this interaction for now and i'm gonna select this button let's suppose we wanna create a hover state for this button and yes you're right we don't have a hover state on mobile applications but for the sake of this tutorial i just want to show you how to do it you can use it for websites of course you may say well we can duplicate this page like this then we can select this button okay and we can go to feel we can probably add another field here make it lighter just like this then we can create a connection we select this get a started button go to prototype create a connection and then we will change the trigger to while hovering and animation to instant or smart animate and let's give it a try let's preview it so here is our first screen if i just hover over this button look what happens you see it works but this is not a good way to do that because in this case you need to go ahead and duplicate your screen again and again and again every single time and imagine you have like 50 or 100 or 200 different screens you can't just duplicate them every time you want to create a new prototype or a new interaction that's going to be very hard instead we are going to use a smart way and it's called interactive components right again we are going to talk about components so let's get back to the component that we created here do you remember that i'm gonna select this signing remove it for now and i'm gonna select this one let me go ahead and change uh the name here to button and here i'm gonna call it primary then i'm gonna add another variant and this one is gonna be hover let's go ahead and add a new feel to it make it lighter just like that so we have primary we have hover now let's make these components interactive to do that you just need to select your main button this one go to prototype and then try to connect this one to the second variant and just like the example that i just showed you you can select the trigger and just set the animation that's all so i'm gonna set it to while hovering and then smart animate that's all and now whenever you use an instance of this master component it's already interactive so you don't need to go ahead and make it interactive on all pages so here we have one of those instances right if i just select this artboard and i hit this play button here is our button i'm gonna hover over it and look what happens there it is as you can see it's interactive so the way you need to make your buttons and your ui elements interactive is by utilizing the interactive component feature of figma that's so so powerful you can create awesome things using interactive components all right now let's talk about constraints well if i select any elements on my page you will see that this section appears in the inspector which is called constraints well any element by default has a few constraints okay as you can see these blue dashed lines these are called constraints so they allow figma to understand how they should be positioned based on the size of your frame if i just create another frame let me go ahead and create one quickly just like that and i'm gonna select this button and place it right here right in the middle okay if i head over to the constraints section you will see that by default the constraints are set to left and top what does it mean if i select this frame and i try to adjust its width look what happens it stays where it is it doesn't move that's because of these constraints right here but let's suppose you want this button to stay right at the center whenever you adjust the dimensions of this frame the way you do that is like this you select your button you go to constraints and here instead of left and top you set the constraints to center and center now look what happens when you adjust the width and height it always stays in the center so when it comes to responsiveness constraints are so helpful let me show you another example here we have this a home page and we have this tab bar right at the bottom let's suppose you designed this page and later you decide to make it scrollable so you need to increase the height if i just select this home page and increase the height look what happens you see these elements they all move but that's not good okay that's because of not using constraints properly so how can we fix it well we can select for example this tab bar right at the bottom and then change the constraints i'm going to set the constraints to bottom okay and center look what happens now you see now when i increase the height of this home page this tab bar stays at the bottom of this page now let's take a look at another example let's suppose i want to make sure that this button is responsive okay so i'm going to select this button and as you can see the constraints are set to left and top if i adjust the dimensions of this artboard you will see that this button stays where it is so to fix this issue i'm going to select it and i'm going to change the constraints to left and right so here we have the left and right option and also i'm going to make sure that it always stays at the bottom so now let's give it a try as you can see it's responsive but our text is not in the middle that's because of our auto layout alignment if i just select this frame and i change the alignment to center now it should work just fine okay we can do the same thing for this title i'm going to select this title and i'm going to set the constraints to center and top because i always wanted to stay right at the center let's do the same thing for this one and now for this one as well but we need to just change the alignment because it doesn't make sense right now just like this let's align everything to the center and also this picture to the center i'm gonna set it to center and top but this one is set to left and right and top okay let's give it a try now everything is responsive good but here we have a problem if i decide to increase the height of this page look what happens our button doesn't move that's because we set the constraints to top here if i set it to bottom now it should stay at the bottom just like that alright guys thanks for watching if you like this video please hit the like button and subscribe to my channel for more tutorials like this if you want to learn more about ui ux design make sure to check out these two videos on the screen have a beautiful day and see you next time

Channel: DesignWithArash

Views: 53,026

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, figma full course, figma auto layout

Id: BOt3MNB71gI

Length: 61min 20sec (3680 seconds)

Published: Mon Sep 05 2022