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

ever wondered how top designers create those clean modern websites in figma in this crash course I'll show you how to master figma's most powerful features

from Auto layout and components to AI tools and prototyping in just 90 minutes you'll learn everything you need to start designing stunning websites and apps today no experience needed and if

you're serious about mastering UI design and becoming a professional uiux designer you can check out my comprehensive UI design and figma Mastery course at the design mastery.com

after watching this video so let's dive in all right first things first if you're new to figma and you have no account head over to figma docomo and you can sign up for free you

can use figma on your browser or you can head over to the products right here and head over to the downloads page and from here just download the desktop app you

can get it for Mac or Windows however I personally prefer to use the browser version of figma here you can see the pricing page as well for now if you're a beginner you don't need to have a paid

account you can use the majority of figma features for free so make sure to create a free account and once you're logged in you'll land on the figma dashboard here on the left side you'll

see recents then drafts trash all projects and right here at the bottom you'll see this explore Community button and on the right side you'll see these

big buttons we have new design file new fig Jam board new slide deck and import and right here you can preview all your recently viewed projects if you head

over to drafts you can start creating private projects you can organize all your projects right here you can also create a team from this drop- down menu

if I just click on it you can create a new team you can give your team a name add team members to it and just start collaborating with other team members all right but for now we are not going

to create a team here and if you're looking for inspiration UI kits design templates Etc you can head over to the community right here and here's where

you can find different design resources such as plugins UI kits Etc we'll dive into it later but for now just keep in mind that there is a design community in figma all right now before we start

creating a project let me show you how you can personalize your workspace all right so if I just head over to this top left menu and I click on it here I can change the theme if you prefer light

mode you can easily set it to light if you prefer dark mode you can set it to dark or you can just leave it as system theme then you have settings you can

also get the desktop app from here using this option and you can add different accounts here and switch between different accounts from this section all

right so what about these buttons this first button the new design file button allows you to create a design file as its name suggests and that's basically the button we use almost all the time

here we also have the new fig Jam board this is another product of figma it's basically a whiteboard for brainstorming Gathering your ideas Etc we're not going to discuss it in this video but keep in

mind that it exists we also have this new slide deck button which allows you to create a presentation it's also another product of figma but what about this import button well if you want to

import different design files into your dashboard you can use this import button however keep in mind that we don't use this button for importing assets like

images or icons Etc okay this button exists to let you import design files like figma files or sketch files if you've used sketch which is another

design software and you want to import your sketch file into figma you can use this button alternatively you can just drag and drop your files into your figma dashboard all right so that's all about

the dashboard now let's go ahead and start creating our design file I'm going to hit this blue button here and I'll be taken to the figma editor here is where we design our projects generally we can

divide this whole interface into four main sections we have the canvas which is this middle section this gray area right in the middle that's where we

place our elements like frames shapes text pictures Etc basically we design everything right here then we have the navigation panel on the left side here

we have the file section and the asset section right here under the file section we have we have two main sections we have pages and we have layers okay under the pages you can

create different pages in order to organize your projects for instance you might need to create a design system for your project in that case you can hit this plus icon right here name it design

system and you can start creating Your Design system right here and you can easily switch between these pages keep in mind that each page has its own canvas all right and here under the

layers list you'll see all your layers we'll talk about layers in a few minutes but for now keep in mind that all your layers will be organized right here what

about the assets tab here is where you can find your UI kits your components basically anything that's reusable will be organized right here for example here

as you can see we have some default UI kits iOS 18 plus iPad OS 18 we also have material 3 design kit and this figma simple design system you can also add

more Library is here you can even create your own Library if you have your own design system you can add it to your project using this option okay here we have libraries and from here you can

just go ahead and add libraries to your project all right here right at the top you'll see the file name by default it's said to Untitled to rename it you can easily click on it and just change it

let's change it to draft like this now if I click on this Arrow icon right here I'll see these menus such as show version history export add to sidebar

create Branch etc for now we are not going to discuss these options as they are not that important right here if I just click on this figma icon I can access this files settings okay I can

head over to file I can head over to edit view object text arrange Vector most of the time we won't need to adjust anything here but keep in mind that sometimes if you want to change the

preferences of your project you can head over to the preferences right here and just enable or disable something just keep that in mind the next thing you need to keep in mind is that you can

expand these panels just like that but also you can collapse them if you need more space for your project if I just click on this button it allows me to minimize UI just like this the next

component of the editor is the toolbar right here at the bottom essentially the toolbar is a hub for all your design tools here you can find everything you

need to design an interface here you can find the move tool hand tool scale then here we have frame section and slice here we have different shape tools we

will talk about all these in a few minutes then we have the pen tool the text tool the comment tool and the actions panel and finally the dev mode and the last component of the editor is

the properties panel on the right side here's where you can modify the properties of your elements currently since we haven't selected any elements we don't see all the properties here we

only see the the page background color property which allows us to change the canvas background color okay just like that so when nothing is selected on the

canvas here you will see all your local styles for example color styles text Styles Etc in addition to the design panel we also have the Prototype panel

which allows us to create a prototype basically this panel allows us to create interactive elements for example if you want to make a button interactive you can use this prototype panel the last

thing I'm going to mention here is this question mark icon right at the bottom right corner okay if I just click on it you'll see a few options if you want to learn more about figma keyboard

shortcuts you can click on this option and here you'll have different categories of shortcuts for example we have Essentials tools view Zoom text Etc

you can go through them and look for your specific needs and just learn them now if you've used figma before I'm pretty sure you're aware that figma has updated its interface from the ground up

and currently we are using ui3 however if you want to use the old interface you can head over to this question mark and from here you can click on go back to

previous UI and as soon as I do that as you can see the toolbar is repositioned and its place right at the top that's basically the old interface however for

this video I'm just going to stick with ui3 which is is the latest figma interface all right now that you're familiar with the editor's interface let's start talking about all these

tools right here in the toolbar these are basically the building blocks of your design so let's start with this one the frame tool and as soon as I select it on the right side I'll see these

pre-built frames here we have phone we have Android compact we have iPhone 16 16 Pro Etc then we have tablet desktop

presentation watch page Etc okay you can use one of these pre-built frames if you want to for example I'm going to select iPhone 16 and as soon as I do that this

new frame appears right here and also you can see that it's been added to my layers list right here and since it's selected you can see it's highlighted here in the layers list as well but what

if you want to change the dimension of your frames you can simply select it head over to this drop- down menu right here and you can change it easily for example I can change it to iPhone 16 Pro

instead of 16 so that's basically how you can create a pre-built frame however if you want to create a custom SCI frame what you can do is just hit F or a on

your keyboard that's the shortcut for the frame tool you can see the shortcut appears right here next to the tool and then you can just click and drag

somewhere like this and this way you can easily draw a custom siiz frame just like that so what are frames for frames allow you to define the boundaries of

your design it could be a web page it could be a mobile application or even a UI component imagine you want to design a web page it could be a landing page the first thing you want to do is add a

frame to your canvas and then you will start adding more and more elements to your frame so the frame allows us to specify the dimensions or let's say the boundaries of our design currently since

this Frame is selected on the right side you can see that many properties appeared we have the position and here we have the alignments these are not enabled yet then we have the coordinates

we have X Y then we have the rotation property and these flip options right underneath we have the layout section here is where you can Define the width and height of your frame essentially

here is where you can Define the width and height of any element you select so here as you can see the width is set to 349 if I want to change it what I can do

is just select it and just typee in another value for example 500 hit enter and it will immediately change the same thing applies to the height property

alternatively I can just hover over this withth property click and scrub just like this to decrease or increase the size but there is one more way to adjust

the frame size you can simply hover over this blue line boundary like here and as soon as your cursor icon changes you can simply left click and drag to modify its

width just like this all right good now to remove this Frame you can select it and hit delete on your keyboard now let's hit a or F to create another frame

I'm going to head over to desktop and I'm just going to add a desktop frame just like this now you might ask how can I move around the canvas well it's so simple to move around the canvas you can

hold down the space bar on your keyboard then left click and drag just like this okay if you want to zoom in or zoom out you can hold down the command or control key on your keyboard and then scroll

using your mouse wheel just like this all right so here is our frame now let's discuss the other options here we have the section tool and the slice tool we use the section tool to organize our

frames on the canvas let's say you have many frames for example you've designed many different pages for a mobile application and you just want to organize them to do that you can use the

section tool and just left click and drag just like this and now as you can see we have this section one and our frame our desktop frame is placed inside

the section one all right and if I just make it a bit bigger and let's say I want to add another frame I'm going to hit a on my keyboard and just draw

another frame inside now both of these frames are placed inside this section and I can simply rename this section if I just double click here and just change

it to desktop for instance okay okay it's quite useful when you want to organize many pages for instance let's say you designed a website and this website has different breakpoints for

example desktop tablet and mobile what you can do is just create three different sections call them desktop tablet and mobile and just place all the desktop frames in the desktop section

all the tablet frames in the tablet and all the mobile frames in the mobile section this way you can make sure that everything is understandable and is clear to work with okay so that's

basically how the section works we also have the slice tool which allows you to select a specific portion of an element and Export it we are not going to discuss it now all right now let's get

rid of this desktop section and just add another frame you know what to do hit a on your keyboard and just select one of these pre-built frames like that and now it's time to move on to the shape tools

here as you can see we have many different primitive shape tools we have rectangle line Arrow ellipse polygon star and we also have this image video

element these are the most basic building blocks of any design usually when you want to design an interface you use these shapes a lot a rectangle line

ellipse polygon Etc and again you can find the shortcut for each one of these shape tools right next to it okay so let's start with the rectangle I'm going to select it to draw a rectangle just

like frames you can just left click somewhere and drag just like that so now I just drew this rectangle and as you can see the dimension is set to

362 by 381 pixels but what if you want to create a perfect square well in that case what we need to do is select the shape tool hold down the shift key on

your keyboard left click and drag this way as you can see the width and height of this shape are the same allowing us to create a perfect square okay and it works for all shapes keep that in mind

all right now that we have this shape let's see what kind of properties we have here on the right side since this object is selected you can see different properties here we have the position

properties like the alignment if you want to align this object to the left you can simply hit this one if you want to align it to the center you can simply hit this one these are the horizontal

alignments and these are the vertical alignments all right you can align your elements vertically and horizontally and here we have the X and Y coordinates if if I set it to 0er and zero you will see

that it will be placed on the top left corner of this Frame which is the parent of this rectangle as you can see here we have this rectangle inside this desktop

frame this desktop frame is the parent of this element and this rectangle is the child of this desktop frame all right so that's how the coordinates work right underneath we have the constraints

we're going to discuss this option a bit later because it's a bit more advanced next we have the rotation property which allows you to rotate your object just like that you can use these options as

well flip horizontal flip vertical I'm going to set it to zero and underneath we have the layout we already discussed it we have the width height and here we have this icon which says lo aspect

ratio all right so let's say I'm going to resize this element if I just left click here and drag I can freely adjust its width and height however if you want to make sure that you maintain the

aspect ratio of this shape when you're resizing it you can just lock the aspect ratio using this icon I'm going to lock it now and then if I try to resize it as

you can see the aspect ratio is maintained which is a quite helpful option especially when it comes to resizing images the next property we're going to discuss is the appearance here

we have the opacity property and also we have the corner radius the opacity property allows you to make an element transparent by default it's set to 100%

which means that we have no transparency however if I try to decrease this value like this this shape will become more and more transparent to show you how it

really works I'm going to need another shape all right let me create another rectangle right here and as you can see we have rectangle three here which is

placed above rectangle two in the layers list I'm going to bring it down we'll talk about the layers list and how it works in a few minutes but for now I'm going to make sure that this rectangle 2

is placed on top of rectangle 3 and while this rectangle 2 is selected I'm going to decrease the opacity and look what happens you see now this element is

transparent and we can see through it so that's how the opacity property works I'm going to get rid of this rectangle three and set the opacity to

100% And then the next property is Corner radius this property allows you to make your elements rounded here as you can see we have sharp Corners if you

want to make your Corners rounded you can just increase this value like that all right alternatively you can just hover over these areas and you'll see

the radius property appears if I just left click on this node and drag I can increase the corner radius easily if I want to modify the corner radius of one

corner what I can do is just hold down the alt or option key on my keyboard and just left click and drag just like that if you want to increase the corner radius value incrementally you can hold

down the shift key on your keyboard left click and drag right next to this property we have this option as well which says individual Corners if I just click on it let's say you want this

corner to be sharp what you can do is set this corner to zero however since we flipped this shape now this corner is changed because we already flipped it I'm going to flip it once again and now

it's correct if I want want to increase the corner radius of this corner I can simply left click and scrub all right great now if you want to hide an element

what you can do is click on this option okay you can simply hide it alternatively you can head over to the layers list and as soon as you hover over this layer you will see these two

icons the lock icon which allows you to lock this element so if you want to make sure that you don't accidentally move your layers around or you accidentally select it on the canvas you can just

lock it if you want to hide it or unhide it you can just use this icon the next property we are going to discuss is the Field property which allows you to change the color of your elements if I

click here you'll see that this window pops up and here we can pick our desired color I can simply use this color pick here and just change it to whatever I want I can change the Hue here I can

change the opacity here remember the Field property also has its own opacity property just like what we've discussed here so you can make your color

transparent then here we have different color modes we have hex RGB CSS hsl HSP and here you'll see all your saved colors if you want to pick a color from

your canvas you can use this ey dropper and just choose your desired color on the canvas right here at the top we have this libraries option as well if you have color styles saved you'll see all

your color styles right here but what are these options when it comes to the field property we have four options here we have the solid option which allows

you to pick one single color then we also have gradient which is basically a transition from one color to another color here as you can see we have two

colors we can just modify their position like that we have two stops 0% 100% you can adjust the gradient stop position right here and also you can add more

colors here if I just hit this plus icon I'll add another stop and I can simply click on it and adjust just the color just like that and again you'll have the

opacity property here as well so you can make your colors transparent but you can also control the direction of your gradient using these handles as simple as that if you want to rotate or flip

your gradient you can use these options here we have flip gradient we also have rotate gradient just like this we are not limited to only one type of gradient

currently we are using the linear gradient which is the most popular type of gradient but we also have radial like this we have

angular like that and we also have Diamond which looks like this but as I said most of the time we use the linear gradient the next thing we have here is

image so if I click on this it allows me to upload an image from my computer and that image will be placed inside my shape we'll talk about images later we

can also add a video to our shapes if we use this option however this particular option is only available to paid users now the next property we are going to discuss is stroke stroke allows you to

add borders to your elements if I just hit this plus button you will see that now we have this very slam border around our rectangle all right you can control the thickness of your border using this

property here just like that and you can also decide whether this border should be added inside your element like this or it should be added outside your element or it should be placed right at

the center we can also change its color just like what we've discussed right here and you can add a gradient to it you can add an image or video whatever you like now when it comes to stroke we

also have some Advanced options if I just click on Advanced stroke settings you will see that we have the stroke style here by default it's set to solid you can change it to dash if you want to

get a dashed stroke a dashed border around your shape and you can change these values here for example I can set it to 10 I can set the Gap as well I'm

going to set it to 30 you can change the dash cap currently it's set To None we have square we have round as well you can change the join as well you can set

it to Bevel or round now if you want to add a border to only one side of your shape we can use this option if I just click on it I can by default it's set to

all I can add it to top I can add it to to bottom I can add it to left right or I can use this custom option and just specify it like this the other thing I'm

going to mention here is that you're not limited to only one stroke or one F you can add as many colors or as many borders as you like to your element

using this plus icon if I want to add another fill on top of this color I can hit this plus icon and as you can see now we have this dark overlay I can change it and I can come up with my own

color combination here I can adjust the transparency of this color if I just increase it to 100% you will see that this bottom color is not visible because

it's placed right under this Top Field if you want to change the order of these colors you can hover over this area and as soon as your cursor's icon changes to

this hand icon you can just left click and just drag it up just like that so keep that in mind the same thing applies to all these properties Okay so so I can

add one more border to this shape or even more and now it's time to move on to the next property which is effects the effects property as you can guess from its name allows you to add some

effects to your element it could be a drop shadow it could be an inner Shadow layer blare and background blare so let's start with the drop shadow here by

default it's set to drop shadow and if I want to change its properties I can just click on this option effect settings and it allows me to change the position like

that the X and Y coordinates it allows me to change the blare property so basically here we can change the Blair radius then we have the spread property

as well just like that you can change the color you can set the opacity here and that's basically how we add Shadows to our elements but we can also use inner Shadows if I just change it to

Inner Shadow you will see that now the shadow is placed inside our shape most of the time we don't use this option however if you want to create some

specific effects for example glass morphism or something like that you would need to use the inner Shadow what about these two properties layer blare

and background blare well imagine you want to make this shape blury if you want to do that you can simply add a layer blare property to it and just

increase the blare property just like that but what about the background blare well if I set it to background blare you'll see that nothing happens well that's because in order for this option

to work first we need to have another element placed behind this object so let me go ahead and add another shape maybe an ellipse like that left click and drag

I'm going to hold on the shift key to create Perfect Circle and I'm going to place it right under this rectangle two in the layers list now I'm going to

select this rectangle and I'm going to increase the background blare like that again nothing happens there is one more thing we need to do to make this work and that is decreasing the opacity of

our field not the appearance but our feel so if I just decrease it here to 50% and I just decrease the blare amount

here a bit you'll see that now it works you see it allows us to create this kind of glass effect so that's basically how this option works now let

me get rid of this effect and just increase the opacity here to 100% all right and I'm just going to get rid of this ellipse and the next option we are

going to discuss is the export option well this option allows you to add an export setting to a frame or to any selected element it could be a frame it

could be a shape whatever it might be so here I'm going to select this rectangle and just add an export setting to it and here we have different properties like the scale by default it's set to 1 x you

can increase it to 2x basically when it's set to 1x and you export this particular shape the final dimension of your exported file will be 400 by 500

but if you want to make sure that you'll get a higher quality shape you can set it to 2X and then the final file will be much larger the width will be 800 and

the height will be 1,000 and then we have different file formats we have PNG jpeg SVG and PDF and here we have some Advanced options that we are not going

to discuss and finally you can preview what you're exporting and hit export to export that file so that's basically the general properties each element has in

figma we have position layout appearance feel stroke effects and Export however keep in mind that some elements have their own unique properties that we are going to discuss in a second all right

now that you're familiar with the properties you can modify for each shape let's head over to the next shape right here which is going to be line so to

create a simple line you can just select this line tool left click and drag if you want to create a straight line you can hold down the shift key on your keyboard if you don't you can freely

create a line just like this and as you can see the rotation property will be changed if I set it to zero again it will be straight so a line is

essentially a stroke by default there is no feel and here as you can see we have this stroke if you want to change the color of your line you can simply change it right here if you want to change the

thickness just like what we've discussed you can change the thickness here but we also have access to these two additional options okay we can change the styling of our line for example if you want to

create a line Arrow you can use this option a triangle Arrow reverse triangle Circle arrow diamond arrow round and square let's say you want to create a

line Arrow you can use this option you can also set the end point to line Arrow as well and you will get such a line so that's basically how lines work quite

simple isn't it what about the next shape the next shape is Arrow arrow is basically a stroke if I just create an arrow but by default the end point is

set to line Arrow nothing different what about the next one which is ellipse if you hold down the shift key on your keyboard left click and drag you can create A Perfect Circle however this

shape has its own unique properties as well if I hover over this node right here you'll see it says Arc if I left click and drag I'll get access to other properties here and I can specify

different values for example I can change the start Point like this I can change these values sweep and ratio these properties are quite helpful when

you want to create charts for example so if I just increase the ratio let's set it to 30 you can create such a shape I can easily adjust the ratio here as well

I can change the sweep amount I can change the starting point just like that but we can also make it rounded we can increase the corner radius here let me set it to 30 and as you can see it will

be rounded so that's how you can create an ellipse and the next shape is polygon let me just hold on the shift key on my keyboard and draw a perfect triangle and

here we have this new property which is called count the minimum number you can set for this object is three but you can increase it as much as you want just

like this you can also control this property right here you can increase it or decrease it and change the radius as well if you want to make it smoother now

the next shape tool we are going to discuss is star so if you want to create a star we can use this shape tool and here we have different properties as

well such as count and also ratio I can make it rounded I'm going to set it to 24 and just change the ratio now the last thing we are going to discuss here

is the image video option if you want to import an image or let's say images to your project you can simply use this option alternatively you can just drag and drop them into your figma file keep

in mind that you should not drag and drop your images into your figma dashboard it won't work it should be imported to your figma file right here okay so using this option I can simply

select one image and as soon as I do that I'll get the option to place the image wherever I want I can just left click somewhere and the image will be

placed right here the other thing we can do is just select the image then left click and drag to specify its Dimension that's the other thing you can do or if

you want to add this image to a shape you can just select it and then just hover over any shape it could be this one this one this one and just left click and that image will be placed

inside your shape if you want to add multiple images simultaneously you can select them all just like that and then you can just left click one by one and

they will be placed here or you could just select them let me show you you can left click and drag to Define their Dimensions one by one like that but as

you may remember I also showed you another way of adding images to your shapes yes you're right you can use the Field property so let's say let me create another frame here let's say you

have a rectangle okay I'm going to draw a rectangle here and you want to add an image to it what you can do is head over

to F and from here choose image and upload from computer and let's just pick this image and this image is now placed

inside your shape if you want to crop your image you can use this option by default it's set to feel which means that if I try to resize this shape the image will try to feel this shape

however if I set it to fit now we'll be able to see the complete image inside and now if I try to resize it we still see the complete image if I set it to

crop I can simply crop this image just like this and I can move the image around as well just keep that in mind and if I hit enter I can confirm that

the crop looks good we also have tile which allows us to create a pattern but most of the time we don't use it so we are not going to discuss plus that and as you may remember you can modify these

settings as well such as exposure contrast saturation temperature tint highlights and Shadow now I have a question we've discussed all these shape

tools but what if you want to create something custom let's say you want to create something that's not included in these shape tools well I have good news

for you these shapes are all vectors what does it mean it means that these shapes are constructed by nodes so you can easily customize them so here I'm

going to create a rectangle let me just simply draw a rectangle and let's say you want to customize it while it's selected I'm going to hit enter on my keyboard and I

soon as I do that we'll enter another environment okay here we'll see all the nodes that this shape is constructed with and we can simply left click on one of them and just drag it around to

create something custom we can also make this corner rounded if you want to just like this but let's say four nodes are not enough for the shape we have in mind

well don't worry we can simply hover over these lines and we can add more nodes to this shape to make it even more customized if I just add one more note

here just left click and drag I can create something like this okay so I'm going to hit control Z or command Z and you know what let's create something fun

let's create a bookmark icon here to do that we can simply add a node right at the bottom left click hold down the shift key and move it up just like this

and now we have this bookmark icon but let's say you want to make it completely rounded what we can do is select all these nodes and just make it rounded and once you're done with the customization

you can hit enter to confirm the other tool you can use to create custom shapes is the pen tool here as you can see we have the pen and pencil tool I'm going

to select the pen tool let me get rid of this shape I'm going to remove it to use this pen tool you can simply left click to add a node just like that and then

you can move around and left click once again and now you've just created a simple line if you want to have some curvature you can left click and drag

simultaneously it's so important and you can create such a curve just like this and if I want to close this path I can

just connect this node to our first node and this shape is now closed now what I can do is just click on this option

close and I can add a field to it just like this and I can get rid of the stroke we don't need that and here is our custom shape the possibilities are

endless you can just create any shape you want using these tools and the pencil tool Works similarly all right the next tool we are going to discuss is the text tool which is one of the most

important Tools in figma because as designers we need to use text all the time the shortcut for the text tool is T and to create a text you can simply left

click here and just start typing I'm going to type welcome back just like that I'm going to hit control a or command a to select the text and right

here apart from all the properties we've discussed before we have access to a few additional properties for this text element here we have this typography section which allows us to modify the

type face or font let's say here you have access to free Google fonts you can also use your own custom fonts but for now we are going to use these Google fonts and you can change it easily let

me change that to plus J cart sense there it is then we can modify other properties like weight the font size Etc I'm going to make it semi bold

change the font size to 4 we can also change the line height the leather spacing the alignment but also we have access to these type settings

these Advanced type settings such as decoration like this we can change the case property here like that we can use these advanced settings like vertical

trim list style paragraph spacing Etc but we are not going to discuss them as they are more advanced and it's not needed at this stage now when it comes to text layers you need to keep in mind

that that we have three types of text layers here under the layout section you see by default it's said to Auto width which means that if I keep typing something here the width of this text

element will increase okay let me change the letter spacing here a bit and also I'm going to change it to none here but we also have this option Auto height if

I set it to Auto height look what happens if I continue typing something here you see that now the width is fixed but the height grows the next option we

have is this one fixed size if I set it to fixed size the boundary of this text layer will be fixed which means that if I just copy this text and paste it here

look what happens the size is intact most of the time we use AO width or a the height so keep that in mind it's so important all right now that you're

familiar with these tools let's talk about layers Basics but before we do that I'm going to quickly show you how you can learn more about these properties if you are completely new to

figma let me create a shape here for example a rectangle and we already discuss these properties right but these properties don't have any labels for

example here we have width here we have opacity but we cannot see any labels for these values well what you can do is head over to this percentage drop- down

menu just click on it from here you can turn on property labels and as soon as you do that you will see that these labels appear on top of these values and

this way you can Master how these properties work and what they mean essentially all right but for now I'm just going to turn it off and let's get rid of this shape and what I'm going to

do is head over to the dashboard and from here I'm going to head over to the community right here and I'm just going to look for a landing page basically a

readymade project so we can discuss the layers Basics so here I'm just going to look for landing page you can look for an app or a UI kit

whatever you like but I think a landing page would work I'm going to go with this one let's click on it and then to use this landing page as our template I'm going to click on opening figma and

I'll be taken to this project here as you can see we have different pages we have cover we have desktop phone style components that's basically how the designer structured this project we

don't need to see the cover we are going to head over to desktop phone and style and here we have different frames we have the style frame where we see all our text Styles and color styles we also

have the home landing page that's what we need for this section of this video so here if I select this home frame in the layers list you see that we have

this Frame and we see this Frame icon right next to it and inside you'll see that we have many other elements we have footer block contact block testimonials

we have this button group of cards CTA block and each of these elements has its own unique icon because in figma each element is represented by a unique icon

for example here is the frame icon these are the AO layout icons which we will discuss in a few minutes and then again we have a frame here we have an instance

of a component we'll talk about components as well then here we have a group so so we can quickly understand that here we have a group of elements and if I select any of these text

elements for example this one you will see that the text element has its unique icon as well all right now let's talk about the order of layers well when it comes to layers the order of your

elements matters why because depending on how you organize your elements in the layers list the visibility of your elements changes what do I mean by that

well let's select this section for example Services block okay okay if I just try to move it up like that you'll see that now it covers part of this

section we no longer see this button book a consultation right and the reason for that is that this particular element Services block is placed on top of this landing page frame you see we have this

Services frame then we have this landing page frame and since it's placed on top of that part of this Frame is not visible now if I want to make sure that this section this Services section is

placed behind this landing page what we need to do is just select it in the layers list or here on the canvas then left click and drag it down like this

and place it right under the landing page you see that now this particular section is behind our hero section or this landing page section so that's why

the order of elements matters in figma or any other design tools now the other important thing about the layers list is that you can easily rename your layer layers if you want to rename your layers

or frames what you can do is just double click on its name and try to modify it like that I'm going to rename it to Hero section and hit enter now what if you

want to place an element inside another element for example you may want to put this Frame inside this frame in that case you need to drag it and then hover

over this Frame and as you can see now it's highlighted and then just drop it and now this hero section is inside this Services block section all right I'm going to hit control Z or command Z to

undo the operation the other thing we are going to discuss now is how you can select a particular element on the canvas well here if I select this Frame you'll see that this main frame landing

page is selected right but what if you want to select an element inside this parent frame in that case you can either head over to the layers list and just look for your desired element and then

select it for example this text this heading or or you can just double click a few times until you reach your desired element but a more efficient way for selecting an element inside another

element is to just hold down the command or control key on your keyboard hover over the element you want to select and as soon as it's highlighted you can just left click and there it is now this

heading is selected let's say we want to select this particular shape inside this illustration what we can do is hold down the control or command key and now since I'm hovering over it it's highlighted

and if I just click on it it will be selected all right now that you know how layers work in figma let's start talking about Boolean operations what are Boolean operations well imagine you want

to create a custom icon I'm going to hit a on my keyboard and just draw a simple frame and here I'm going to create a few circles hold down the shift key left

click and drag like that to create a perfect circle and just change its color to something else maybe blue then I'm going to duplicate it hit controll D or

command D just like that and bring it here now we have two circles overlapping each other right if I select them both and I head over to the design inspector

and I click on this icon I'll see these four operations Union selection subtract selection intersect selection and exclude selection okay these are the

four formulas we can use to combine different elements and create unified shape shapes so let me show you how it works before I use them I'm going to select these two duplicate them move

them to the right duplicate them once again and once again there it is now I'm going to select them both remember to be able to use the Boolean operations you need to select at least two elements on

the canvas so here while these two elements are selected I'm going to use Union selection as soon as I do that you may say well nothing happened well if you take a look at the layers list now

you see that these two circles are combined into one shape we have Union and you can obviously rename it and if I try to change its color look what

happens you see now the color of both circles changes but what if you want to modify this shape you can do that you can just easily click on this Arrow icon

just like that to expand this Union group and then just select any of these layers any of these circles and just modify that you can make it smaller like

this you can make it bigger you can just move it around just like that however you cannot change its color because when you use this Union operation your elements cannot have multiple colors

therefore if I just try to change the color of this circle nothing happens you see that's because their parent element which is this Union group has a different color so that's basically how

the union operation works the other operation is subtract so so here if I click on subtract selection you see one element is subtracted from the other and

we can still customize it if you just expand this group we can just select this element and move it around what about the next Formula I'm going to select these two and from here I'm going

to choose intersect so as you can see now the overlapping section of those two circles is intact but the rest of the shapes is gone and now I'm going to

select these two and I'm going to choose exclude selection and here we have the opposite of intersect so basically the overlapping part has been removed from

these two circles and we have a hole inside so let's say you want to create an ie icon in that case here we can just select this shape that we just created

rotate it I'm going to hold down the shift key on my keyboard and rotate it just like that let me zoom in then I'm going to draw another Circle right here in the center and you know what to do we

just need to select them both and from here we just need to select subtract selection so as you can see Boolean operations allow you to combine different shapes into a unified shape

and it's quite useful when you're trying to create different icons for instance now you might ask well how can we ungroup these shapes in that case you can just select your desired element

right click on it and click on ungroup and there we go now we have two separate shapes all right so far so good now that you're familiar with Boolean operations let's start discussing more advanced

features like Auto layout let's say you want to design a simple button for example a signning button how can you do that all right so here I am inside the file that we initially created our own

file and you might say to create a button we can simply draw a rectangle just like this then just add a text element

inside like that we can make it a bit larger maybe bold and we can place this text right in the middle well we can do that of course we can just select them

both and then group them as well to group elements you can hit contrl G or command G and now we have a group of elements and we can move it around we can resize it however this is not a good

method for creating a button why because let's say you design this button let me just select this rectangle make it a bit smaller okay and then I'm going to

select this text align it to the center all right and I can even make it rounded and let's change the color I'm going to change it

to let's say blue all right and I'm going to select the text and it's going to be dark blue I'm going to select this blue and make it a bit darker okay so

here is our sign in button now let's say we need another button maybe get a started or sign up I'm going to rename it to sign in you might say all right right we can

just select it duplicate it hit control D or command e bring it down and just change the text well look what happens when I do that I'm going to type get us

started you see that we have an issue our button is not responsive so the width is not determined by the text inside by the content inside well how

can we resolve this issue that's where other layout comes in Auto layout allows you to turn your elements into responsive frames let me show you it works so instead of creating the button

this way we can just create a text and just type sign in then while this text is selected we can just add other layout to it to do that we can just hit shift

and a like that and now as you can see the icon has changed and it indicates that now we have an other layout frame and this text is inside this Frame let

me rename it to button like that and now we can go ahead and start less button so while this button frame is selected we can just add

a field to it and change its color to something else maybe this blue then I'm going to select this text and just change its color to this dark blue as

well like that and now if I select this button you can see that now we have this new section called a layout and we have all these properties that we are going to discuss so the first thing I'm going

to do is just make it rounded like this button let me just increase the corner a radius to 8 we can set it to four something like that and now if I try to

change the text look what happens I'm going to change it to get a started you see that now our button is responsive so basically since we have an

other layout frame the width of our element is now determined by the content inside that's so cool isn't it now let's discuss all these properties here here

we have the resizing options we have hog content fixed width we have have hog content fixed height we have these AD mean height add Max height all these properties we're not going to discuss

all of them right now because I have another comprehensive video about Auto layout so if you want to Master Auto layout and how it works make sure to check out that video but for now let's

discuss these simple and basic properties like the direction well when it comes to the direction of Auto layout we have three options we have vertical we have horizontal and we have wrap okay

figma automatic determines which direction works better for a particular layout in this case it automatically set it to horizontal but we can change it to

Vertical as well and nothing happens the reason is here we have only one element inside this Frame if I just select this text and duplicate it and then I select

this button frame and just change the Direction look what happens now we have a vertical stack of elements so that's basically how this direction works let

me show you another example quickly I'm going to create a few shapes okay like this maybe a square as

well and a star like this okay now I'm going to select them all and I'm going to place them inside other layout frame to do that you know what to do just hit shift

and a like that and now they are neatly organized inside this Auto layout frame we already discussed these two direction we have vertical horizontal but what

about this one let me add a field to this Frame and just change it to Black like that and then let's see how this option Works wrap if I try to resize

this frames width look what happens the elements are intact they don't move but look what happens when I set it to wrap now I'm going to resize it you see that

so basically now the frame is wrapping the content inside and it's quite helpful when it comes to creating responsive design obviously we are not going to go through many examples in

this video but keep in mind that this option exists and it's going to save you so much time when it comes to making your elements responsive all right good now let's discuss the other properties

here we have the horizontal gap between the elements inside basically using this value you can Define the spacing between the elements inside your othero layout

frame currently it's set to 10 you can simply increase it like that however since we resized our frame now we have a fixed width here we are going to change

it back to hog content which means that the main frame is hugging the content inside and if you change the spacing inside the frames width will change as

well like that so that's basically how the hug option works instead of having a fixed width we have a relative and responsive width well these two properties allow us to specify the

horizontal and vertical padding inside our frame okay currently they are both set to zero that's why we have no padding around our elements if you want

to have some empty space around your element you need to change these properties like that I'm going to set it to eight and eight you can also Define

an individual value for each side using this option now let's get back to our button here I'm going to select it and I'm going to set the horizontal spacing

to 16 and the Very vertical spacing could be eight now our button looks good the width is set to hug the height is set to hug as well that's why our button

is responsive if we set it to fixed again it won't be responsive look what happens you see that so keep that in mind that in order for our button to be

responsive the resizing option should be set to hog right next to these properties we have this alignment option as well which allows us to align the

elements inside our frame if I set it to left nothing happens here you know why because here the width is set to hot contents and we also have only one element inside if I change the resizing

option here for example I set it to fixed width and I just make this bigger currently the text is aligned right to the center but if I want to align it to the left I can easily change it so

that's how the alignment option works now that you learned about other layout let's start talking about compon components what are components well in simple words components are reusable

elements whenever you want to create an element once and reuse it multiple times across your project you can create a component so let me show you how it

works imagine you've created this button all right and you want to reuse it across your project maybe on the homepage on the contact us page on the

signup page Etc so what you can do is this let's say we have another frame I'm going to hit a on my keyboard to select the frame tool and from here I'm just

going to choose iPhone 16 there it is and I'm just going to duplicate it a few times hit contrl D or command D okay now I'm going to select this button and I'm

going to bring it down here all right nice obviously we need to make it a bit bigger because currently the height is set to 35 it's not optimal so I'm just

going to set it to 44 and now let's say you want to reuse this button on all these other frames how can you do that well you might say we can just select it

duplicate it and bring it right here duplicate it once again just like that and we can go ahead and change the text well of course you can do that however imagine you want to make a change to all

these buttons simultaneously how can you do that well one way is to just select them all like this and then make a change for instance if you want to

change their color you can head over to the field section and from here you can just change it to whatever you want however you need to select them all but what if you have many different pages

like hundreds of different pages and then each page you will have one or many buttons like this and you want to change them all whether you want to change their color their size their Corner

radius Etc in that case it would be too time consuming to just go ahead and select them all and change all those properties so essentially what we need is a component and components allow us

to make a change once and the change will be applied to all the instances of that component let me show you how it works I'm going to hit control Z command

Z like that and then I'm just going to get rid of all these buttons and right here we have this get a started button and it's named button

right to turn it into a component while it's selected we need to head over to the design inspector right here and we need to click on this button create component as soon as I do that the

boundaries turn purple and it turns purple right here in the layers list as well the icons change too now we have this unique icon which represents a component before I show you how you can

create instances of your component let me show you where this component is saved if you head over to the assets tab right here if I just click on it it says

we have this button component and to create an incense of it essentially a copy of it you can just simply drag and drop it right here and if I head over to

the layers list now you see that this one is an instance of our main component and you can see that its icon is different this icon represents an

instance of a component but this one represents the main component so what's the difference between the two well essentially the main component or let's say the master component is the parent

of the instances for instance this parent can dictate to his children how they should behave and look well let's say we have many instances of this button I'm going to bring this instance

right here I'm going to duplicate it and let's duplicate it once again I'm going to bring it down here okay let's say we want to change their color all at once well we don't need to select all these

instances instead we can just select the parent or the master component and just make the change here I'm going to change it to let's say red and as you can see

now all the in instances of this particular Master component have been changed and that's how components work so essentially all these instances are linked to the master component but what

if for some reason you want to make a change only to one instance of this particular Master component well in that case you can select that particular

instance and just change its color and when we do that look what happens now we made the change to this particular instance and the other

instances are intact so if I just go ahead and select the master component and just change the color you see the Field property or let's say the color property of this instance is no longer

linked to our Master component because we already changed it here however all other properties are still linked for instance let me just change the color

let's say we want to change the corner radius if I just increase the corner radius here this instance should be changed as well look you see one thing

you need to keep in mind is that you should never remove the master component all right if I just select this master component and I remove it it's gone

forever if you head over to the assets it's no longer there okay so make sure not to remove your master components now the other thing I'm going to mention

here is how you can detach an instance from the master component and it's so simple you can just select this button and head over to the the design inspector and from here just click on

detach instance right here and as soon as I do that you see that the icon has changed and also it's no longer purple which means that now we have a simple

Auto layout frame instead of an instance of a component okay and this particular button is no longer linked to this master component so if I just go ahead

and change its Corner radius now you see it's intact there are other things about components that we are not going to discuss in this video as they are more advanced such as component properties as

you can see here we can add component properties to this master component but we'll cover this topic in a separate dedicated video as it's more advanced and we are not going to discuss all the

advanced features in this video while we are talking about components I'm going to mention another important feature which is variance so here we have this master component right I'm going to

bring it down let's say we want to have different variants of this particular component for example when it comes to buttons we usually have different states

like default hover clicked Etc so how can we create different variations of this particular component it's so simple first you need to select your master

component head over to the design panel and from here just click on ADD variant and as soon as I do that as you can see this new frame is created a around these

two components and their icons changed why because now these are variants here we just created a component set and inside this component set we have two

variants okay so here the first variant is named default I'm going to select this one and if I just double click on it you'll see that it says property 1 equals variant 2 I'm just going to

change this part and I'm going to change it to hover and while this hover variant is selected I'm going to make a change for instance I'm going to change its color a bit now I'm going to select this

and I'm going to duplicate I can either hit control D or command D or I can click on this plus icon to add a variant just like that and we have the third

variant and I'm going to change this part to press like that and now we have three different variants so while this pressed variant is selected I'm going to

make it a bit darker of course we can change the text color as well but for now I'm going to leave it as is okay so how can we use this component set well

now if you select this button which is an instense of our Master component you'll see right here that we have this property it's called property one and we

have this drop- down menu and inside we have three different variants default hover and press so we can basically switch switch between different variants

of this particular component that's so cool isn't it but how can we change this property name it's so simple we just need to select our component set and

here we can just click property one and just change it to State like that and now instead of property one we have this state property just like that all right

the next thing we are going to talk about is figma plugins what are plugins well essentially plugins are thirdparty applications created by the community that extend the editor functionality so

let me show you how it works imagine you're looking for a few images for your project what you can do is just go ahead and Google it find some websites with royaltyfree images download the images

and import them to your Figo project that's one way but the other way and the most efficient way is to just head over to this option actions and from here

head over to the plugins and widgets tab and just look for the unsplash plug-in you can find thousands of different useful plugins in the community but here I'm just going to show you how plugins

work but we are not going to check out every single plug-in that exists all right so here I'm just going to look for unsplash for those of you who are not familiar with the unsplash website it's

basically a website that provides you with royalty-free images that you can use in your projects for free and here is its plug-in its official plugin I'm I'm going to run it all right this

window pops up and here is where you can just go ahead and look for your desired image you can head over to the preset stab and you can choose from one of these categories for example portrait or

you can just head over to the search and just type in what you're looking for for example let's say 3D product I'm going to hit search and

there it is we have many 3D products that we can use for example this one this one some of them are paid but most of them are are free let's see what we

can use maybe this one it looks good I'm going to click on it and it will be placed inside our canvas and now we can easily move it around edit it and do whatever we want and remember you can

use this photo for free because these are royalty-free images what about other plugins as I mentioned you can find many useful plugins in the community but for

now let's check out a few other plugins here we have HTML to design this plugin allows you to turn any website to a figma design file so here if you just

run this plugin and just type apple.com and hit import it will import the Apple's website right here let me show you how it works and it's not going to be just a static image it will add every

single layer that's been used for this particular project here inside this Frame you see we have section and inside this section we have background we have

all the layers and we can just select them move them around we can change their properties Etc and this plugin is quite helpful if you're

trying to get into UI design and you just want to learn how other designers structure their website if you want to learn from big companies like apple

Google meta Etc you can use this plugin to learn how to structure your design how to use colors typography Etc all right now let me get rid of this section

that he just created what about other plugins well here we have this Arc plugin which allows you to bend your text layers it's quite fun to check out

different plugins however first we need to add a text layer I'm just going to type welcome I'm just going to copy it

and just paste it a few times like this now while this text layer is selected I'm going to run this Mark bend your type plugin and there it

is we can basically change these values until until we are satisfied with the result so here I'm going to hit apply and there it is now the next thing we

are going to discuss is layout GDs what are layout GDs well layout GDs help us align different objects within a frame let me show you what I mean by that I'm going to head over to this project and

here if I select this homepage you will see that we have this layout grid section the designer use the grid here which is hidden but if I click on this I

icon I can just unhide it and you will see these vertical lines basically now we have 12 columns here as you can see we have a column GD we have three

different types of geds in figma we have greed like that we have columns greed like that and we have rows like this

okay usually we use column greets and if you want to adjust the preferences of this greed you can just click on this icon but for now let me show you how you can add a greed to your frame

well let's say we have a frame I'm just going to draw a frame here and we want to add a layout grid to it to do that while this Frame is selected you can just head over to the layout grid

section and just hit this plus icon and just like that you can add a layout grid to your frame you can change the type of grid and then you can just modify the

preferences here so now let me just select this homepage again and just click on this icon layout grid settings again here you can change the type of

greed then here we have this property called count which allows you to define the number of columns you want to get here usually for the desktop version of a website we use a 12 column grid but

you can change it to whatever you want you can change it to 16 you can change it to eight whatever you like you can also change the color you can change the

type currently we have this stretch type we have left basically using this option you can align your layout grid to the left side

you can align it to the right align it to the center or set it to stretch when you set the type to stretch the width will be disabled because the width is

determined automatically based on these two values margin and gutter so here if I select this home frame and I try to resize it like this you see that the

width of our layout grid changes that's because the type is set to stretch and now let me show you what these two properties are margin and gutter what do

they do well here the margin property defines the margin on the sides of this layout GD currently it's set to 100 which means that on the left side and on

the right side we have a 100 pixel margin if I just increase that to let's say 150 look what happens now we have more empty space on the sides but what

about the Gutter The Gutter defines the spacing between these columns so if I set it to 32 you see now we have a

narrower Gap if I set it to 60 now we have a wider gap between these columns so that's basically how the layout grid works again if you want to master how

the grid works I have a dedicated video about that on my channel make sure to go ahead and check that out the next thing we are going to discuss is prototyping how you can make your design interactive

to do that I'm just going to head over to the community and just look for a mobile application project project okay so from here I'm just going to look for mobile apps all right we have many

different options to choose from let's see what we can find I like this one I'm just going to open it up hit open inigma cool let's head over to design and here

as you can see we have different pages right we have the splash screen we have onboarding we have signing and here we have the homepage we have the product detail Etc so let's make these Pages

interactive let's say we want to make this card clickable so when the user clicks on this apple card he or she will be taken to this page how can we do that it's so simple first we need to select

the element we want to use as our trigger which is going to be this card okay so I'm going to select it then I'm going to head over to the Prototype tab right here and as soon as I select this

tab I can just create a connection between these two pages here if I hover over this blue boundary you'll see this plus icon appears I'm going to left

click and drag and just connect it to our next page and as soon as I do that this window pops up here as you can see we need to specify the trigger the

action destination and the animation so the trigger by default is set to unclick which means that this card will be clickable that's good we have other triggers like UND drag while hovering

while pressing Mouse enter Etc we are not going to discuss this because I have many different videos about prototyping on my channel so if you want to master prototyping in MMA make sure to check

out my other videos for now I'm going to leave it as is and the action is going to be navigate 2 because we want to transition from one page to another but

we have other types of actions like back scroll to open link Etc let's leave it as is and the destination is going to be our product detail page okay so this

page home screen is our starting point and this product detail page is going to be our destination nice now as you can see here we have this flow if I just

click on this icon this window pops up and now if I hover over this you see that my cursor changes to this hand icon indicating that this is clickable now so if I click on it I'll be taken to the

destination page which is this product detail page however here the transition was instant because we didn't set an animation for it but now if I just click on this Arrow line I can change the

animation from instant to Smart animate or move in move out Etc I'm going to set it to Smart animate like that and I'm going to play it once again click here

and now we have this fading animation of course we can make it much better than this but I just wanted to show you how simple it is to create a prototype in figma super fast all right now that

you're familiar with prototyping in figma let me show you how you can make your components interactive and as you remember we created this component set this button component set but our button

is not Interactive right so here if I just draw a simple frame and I just drag and drop an instance of our button and I select this Frame and I preview it here

like this obviously it's not a mobile frame but that's fine if I just hover over it nothing happens because we didn't make these variance interactive so how can we do that well it's so

simple if you just head over to this component set and we select our default variant and then we head over to the pro prototype tab here we can just connect

this first variant to our hover variant like that and we are going to set the trigger to while hovering and the animation is going to be smart animate

you can set the duration here as well I'm going to leave it as e and then I'm going to select this hover variant and just connect it to our press variant and this time the trigger is going to be

untap like that and it should be smart animate nice and now I'm going to select this Frame three hit shift and space bar and if I hover over this button look

what happens you see now it's interactive now if I click on it we'll see the press button of course we need to set the animation in a different way to make it work however I just wanted to

show you how you can make your components interactive in figma all right now let's say you're done with your project and you want to share it with your client or your other team members how can you do that well there

are two things you can do you can either download the figma file and save it as a local copy on your computer and just share it with your client or your team members and then they can just import it

to their figma account and the way you can do that is just head over to this menu and from here you can just click on Save local copy however there is a better and more efficient way for

sharing your projects with others and that is using the share button right here if I click on this share button I can invite others by name or email to this project and basically I can

collaborate with other people alternatively I can just copy the project link and just share it with others and then they can just join this project but in order for them to be able

to edit your file you need to move your draft to your projects and you can easily do that using this button all right now that you know how you can share your project with others let's see how you can ask for feedback let's say

you already shared your project with other team members or maybe the project manager and they want to give you some feedback to do that they can simply click on this icon comment and let's say

they want to comment on this button okay they can just left click here for example they could say this button could use a darker shade of green and then they can submit it you can head over to

the comments here and just write a reply I'm going to type done and hit submit like that and once the issue is resolved you can just click on this Mark as

resolved icon like that and it will be gone the next thing we are going to discuss is constraints so what are constraints let me draw a simple frame

right here and inside this Frame I'm going to draw a simple shape okay maybe a circle let me hold on the shift key and draw a simple Circle right in the

middle and I'm going to change its color okay can you see these blue dash lines these are called constraints so essentially constraints allow us to tell figma how our elements or let's say how

our layers should behave in terms of positioning and sizing when we start resizing their parent element in this case the parent element is this Frame

six let me just rename it to frame and this circle is the child of this parent frame so now as you can see the constraints are set to top and left we

have many different options we have right left and right center scale and the same things for the vertical constraints all right so let me show you how it works when the constraints are

set to top and left it means that when we start resizing this parent frame figma maintains this layers position relative to the top and left edges okay

so if I start resizing this frame look what happens you see this element stays where it is and it's not moving because

the constraints are set to top and left if I set it to top and right look what happens now if I start resizing this this Frame you see now it starts moving

because now figma is maintaining this element's position relative to the top and right edges of this Frame okay so that's how constraints work let's say you want this element to be aligned

right at the center of this Frame and you want it to stay at the center when you start resizing the parent element you can just align it to the center like this and as you can see the constraints

are automatically set for you and now if we try to resize the parent frame look what happens you see now this circle stays right at the center no matter the

parent Dimensions but apart from center right left and top we also have left and right and scale let me show you how these two options work here if I set it

to left and right look what happens when I resize this Frame you see now this element is stretching but we also have another option called scale it works

similarly to the left and right with a small difference let me show you if I set it to scale and I try to resize it this element is still stretching however

figma will convert all the values like the left and right margins here to a percentage value so instead of having pixel values we are working with percentage values now let me show you how you can actually use these

constraints when you're working on a project so here we have this mobile application and if I just select this explore frame and I try to resize it if I try to increase its height you see

that the T Bar here stays where it is and it's not sticking to the bottom edge of this Frame okay so what we need to do is Select this tab bar and as you can

see the constraints are set to left and top so if you just set it to left and bottom now if we try to resize this Frame this T Bar should stick to the

bottom edge of this frame look what happens you see that it works perfectly constraints are quite powerful and we can combine them with other layout to create fully responsive layouts in figma

the next topic we are going to discuss is AI tools if you head over to the toolbar right at the bottom and you see this icon for your actions panel it means that you've been granted access to

figma AI tools if not if you're seeing another icon it means that you don't have access to AI tools yet because AI tools are not available to all users so let's see what tools we have here I'm

going to open it up here is our actions panel and right here you see we have a few design tools tools we have a few writing tools and image editing tools okay here under the design tools we have

rename layers first draft add interactions so what do they do this one rename layers renames your layers automatically in seconds and I'm sure you know that many designers including

me are guilty of not naming our layers properly when we go through the design process and this option saves us so much time so let me show you how it works

here what I'm going to do is Select these frames okay maybe this one and I'm going to click on rename layers okay and as soon as I do that it starts renaming

all these layers inside this Frame automatically that's so cool isn't it make sure to give it a try what about the next option the next option we have

here is first draft okay so this feature lets you turn your ideas into ready wireframes or High Fidelity designs in seconds let me show you how it works

here right at the top you see we have a few libraries okay we have basic app components we have app wireframe basic site and site wireframes okay depending

on your needs you can choose from one of these libraries okay let's say you want to create a basic app and you have no idea how it should look in terms of layout so what you can do is choose this

basic app library and then you can just describe what you're looking for you can type in whatever you like let's say you want to design a fitness app so here I'm

going to type type an app for a fitness company okay then I'm going to hit make it and then Figo will do its magic you

see now more and more elements are being added to this Frame all right it's done let's check it out here at the top we have this heading then we have this large picture which has been generated

by Ai and then we have a heading we have the subtitle we have this description we have a few icons then we have a few buttons and finally we have this tab bar

it's not perfect but it gives us an idea of how we can create a layout for this app okay if you're not satisfied with the color palettes you can choose one of

these for example this one or this one just like that then you can hit make changes and you can also change the styling of your elements for example here if you want your elements to be

sharp you can just decrease that if you want them to be completely rounded you can increase that just like that you see that these buttons are now rounded as well then here you can Define the

spacing whether you want to have more wi space around your content or not depending on the use case and finally here you can change the font just like

that okay so that's basically how this option works and as I showed you here we have many other options for example if you want to design a website you can

choose basic site and then you can just type a landing page for an interior design company all right

it's done here as you can see we have a navigation bar at the top then we have the hero section we have a large image here looks good then we have the our

services section we also have the testimonial and the fooder again as you can see it's not perfect but it's a start all right the next tool we are going to discuss is make an image okay

using this tool you can describe what kind of image you're looking for and figma will generate it for you for instance here I am going to hit Tab and I'm going to hit make it like that and

see what it's going to create there it is that's beautiful isn't it here we have four options to choose from maybe this one this one looks a bit better or this one that's awesome now what about

the next tool the next tool we are going to discuss is remove background this tool as you can guess from its name allows you to remove your image backgrounds if I hit it look what

happens there it is the background is gone all right what's next the next tool we are going to discuss is this one translate to which is so so helpful this

tool will translate your website's content to any language you want in seconds let me show you how it works here I'm going to select this hero section and I'm going to use this tool translate to and then I'm going to

choose from one of these supported languages maybe German and look what happens you see that all our text within our hero section have been translated to

German that's awesome isn't it we have a few other tools as well that we're not going to discuss now such as this find option or rewrite this you can check them out but I'm sure you've got an idea

of how these AI tools work and last but not least we are going to discuss the dev mode so what's the dev mode well the dev mode simplifies our hand of process

what do I mean by that once you're done designing a project you usually hand it over to a developer or a team of developers so that they can turn your design to code right and then the

developers need to get access to your project and just inspect it and try to convert everything to code using Dev mode the handoff process will be much smoother why because here the developer

can easily select any element and on the right side he or she can see all the CSS properties depending on the platform you're designing for for example if it's

a website they can choose CSS if it's a mobile application for example iOS they can specify Swift UI or UI kit let me show you and they'll see the relevant

code here let's say they want to learn more about the spacing of your elements in that case they can just hover over these elements and as you can see they can quickly learn about the layout for

example here the margin between these menu items is set to 40 right and here the margin between this heading and this top navigation bar is set to 70 but Dev

mode is much more than that if you want to learn more about Dev mode make sure to check out the dedicated video I created about it on my channel if you want to learn more about UI design principles and become a professional UI

designer make sure to check out this video thank you so much for watching this video if you found it helpful please hit the like button and subscribe to my channel for More Design tutorials

have a great day and see you soon