Original subtitles

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