Mastering Figma Motion Design: A Pro Tutorial for Seamless Animation 2024

hi everyone and welcome back so what we're going to get into today is we're going to talk about why is motion so important this is one of my favorite kind of topics here because people often

think motion isn't as important as it actually is so let's Jump Right In so why is motion important you know

motion design is a very crucial element in making users interactions with a brand digital products more intuitive and streamlined and people don't

understand that and one of my favorite quotes is motions tells stories everything in an app is a sequence and motion is your guide for every button

clicked and Screen transition there is a story that follows and that couldn't be any more true I'm sure some of you may know this

quote so let's get into some of the things things that really bother me in terms of the misconceptions that people do have about motion unfortunately

motion is just an afterthought in a lot of product teams in like fast-paced startups or startups that you know just don't want to maybe spend the money or

the time to really develop their motion design practice so let's get into some of the common misconceptions that I often hear I actually hear this dayto day but you

know it's always getting better as long as you somebody advocating for it so let's get right into it now this is a big one you know people often say you know you should be focusing on other

things motion is just not a core part of the ux right now you know we we'll do it after in a later release and people generally believe that you know the cores of a product is just basically all

the other facets of design like the ux the UI and research and that kind of means that you know motion is separate from the design process and doesn't play

a large role in the actual usability of products and that's just not true because motion really does help kind of tell stories if you think about like

this little application here this little example I have on the right if you see how the user goes through the flow understands that their form is being

processed sees the different types of content actually come onto their screen they're able to process all that information differently and understand

where they are within the flow let's take a look here see the content comes in nicely and as they're going into the flow here they see the button pop up

they can see where they are within the flow they can see that their flow is processing and complete let's get on to the next

one another misconception we can just add motion later now motion is generally not considered you know in the bulk of work that it takes to actually create

like a full digital product and there is just that this idea here where people think that once everything else has been completed then they can just add motion

later without just giving it much thought and when people think like this they actually you know they neglect to think about all the ways motion has

affected interaction Concepts That Couldn't exist otherwise let's take a look at this example over here if we didn't

think about motion and how motion really helps the usability of this little product and every type of transition here just happened instantly you know it

would be really really hard for the user to comprehend what's actually happening you know anything from the swiping and the touch

gestures to how this screen transition leads to a full siiz picture if that all Happ happened without motion it would be really abrupt for the user and thinking about that at the beginning of the

process of Designing is just much more intuitive in the end when you have your final result here's another one motion is just

animation you know it is true that there is a lot of Animation sometimes in motion and that's totally fine but it isn't just animation people often just make this assumption that it is and

animation you know it includes things that move and draws from our understanding of like classic animation you know the one thing that comes to mind when I think about this is like

Pixar Disney all those kind of animated movies but generally when people think like this they just think of motion as a way to kind of add personality to design and

product and ultimately that's just not true as well although animation is kind of part of motion you know motion just isn't

that as we look at the example to our right we can see how motion really helps connect these two types of concepts of these people that you're inviting it allows users to kind of make

that connection quickly and in a fun way so it is adding a bit of Animation but it's doing it for the purpose of usability and

Delight hey everyone and welcome back so we're going to be talking about motion and usability so we just kind of got over all these different types of misconceptions and now we're going to

get into you know why it actually truly is important and why you should be using it all the time in your design process you know always thinking about it from the beginning so let's get right into it now it's unfortunate that many places

you know treat motion as an afterthought because these beliefs are just untrue more specifically you know when we're treating motion as an equal to UI animation where UI animation is almost

always used to provide just Delight for users or just like a cosmetic change it just has no bearing on how successful the ux is and you know when we're

treating motion like that we aren't doing it justice because motion is not that motion is actually

behavior and behaviors can only help or basically hinder the actual user experience so motion supports usability

in several ways and this is the first one when users interact with UI elements what motion behaviors do they really expect to see that's kind of what I'm

thinking about so does motion meet the expectation or does it cause confusion when I ask myself this question I'm thinking about how users perceive what

an object is and how it actually behaves and we really want to do our best as designers to minimize the gap between what the user expects and what

they actually experience so let's take a look at this small example I have here on the left if we take a look at how the user interacts with this kind of little website you know if they click they

expect to see that image pop up you know go into that Details page and we can make that transition much more easier with motion now if we see we're kind of going

to loop back to the front here we have a little bit of scrolling and when we go back we can have a transition that really helps navigate the user even how the different

types of content comes onto the screen we have that kind of cascading in a certain Cadence when users are typing in locations we actually have this kind of

popup that generally just pops up so when a user actually interacts with an object you know we want to provide a great experience and we also want to make sure that you know that experience is kind of expected and if it's not

expected it's a delightful experience experence otherwise let's get on to the next way here's another one are interactions consistent across the actual user

experience here I'm thinking about actually a couple of things user flow and the general actual consistency of the ux so there's two kind of Concepts here

there's inonu you know the continuity within a scene like a little scene whether that be just kind of like one page or one

little like mro interaction and you have inter continuity and this is basically the continuity within a series of scenes that make up the total user experience so we want to make sure that all our

interactions are consistent now if we take a look at this example from Open Door over here we can see that the actual interactions that happened on

like this kind of small level here and how they connect across both screens is very very similar to how the transition perform how the different types of UI

elements pop up onto the screen it all feels like it belongs in one consistent system now if we were to have like something bouncing here and then have

something like swiftly come out out of nowhere on this page like this little bar then you know there is a bit of Disconnect so we can actually use motion to create like a consistent user

experience and that should always be at the Forefront of your mind when you're using motion you know just to make sure to overdo it or make sure that it's absolutely consistent to you know really

help with usability when it comes to the smaller interactions and how we connect all those interactions to form a full user experience let's get on to the next

one now do the interactions and motion behaviors create a logical progression of events now when I kind of read this back

I think our interactions and the motion behaviors they trigger tied to an actual progression of events that satisfies the

user intend so when a user is moving through an application all the different types of things that are actually happening do they seem logical do they seem rational like do they actually

expect those types of things to happen when we design experiences we need to make sure that the moments and events that we prototype and designed you know they connect together in a logical way

throughout the entire user experience you don't want random things to actually like be popping up like I mentioned before so let's take a look at this example

here so the user is going to click on this little object and there's a couple of different options that pop up it it's telling you the different options you can do with

this current thing and when it opens there's a nice slow pan you know to kind of connect this image to this screen so this a very smooth transition so it's

very logical once we actually you know start using this app to understand that when I click this object over here it's going to gently open up a page there's

not going to be a harsh transition we know how to actually use the app much more easily because we're using actual motion to really help dictate how users

use these apps the last one how do the spatial aesthetic and hierarchal attributes of

UI elements relate to each other and influence user decision making now this is another big one how

does motion really impact the various relationships of elements that exist let's take a look at this uh little example if we think about this

website it's kind of like a portfolio for a digital consultancy or agency but they use Motion in a very interesting way to really help dictate how you users

kind of read the content there you know interact with the content there and if we think about the way that the different types of content in here and the UI elements are displayed we can

actually you know make those connections as to what should I be reading first what should I be actually looking at they give a full background to the

phone and the way they transition the phone onto the screen allows you to kind of have much more context into what you should be looking at same with the title here we have the titles coming in first so you can kind of get understanding

that this is the headline and the body copy afterwards and these kind of UI elements uh these kind of paragraphs popping in

later it really makes for a delightful experience hi everyone welcome back now we're going to talk about you know we're still on the topic of why is motion so important we just talked about usability

and we're going to dive a little bit deeper in how you know motion really helps create narrative you know simply put motion serves as an

explanation to the user of how one gets two and from various places in the interface this explanation you know can be thought of in terms of coherence the

degree to which the explanation aligns with the ux content and mental models let's take a look at this example over

here now motion is really helping the user understand where they can go where those other extra screens are in

relation to the content of the app so you know in this case like taking a picture and understanding where that screen is we're going to see how they interact with this content you know

filling out a form and where they're going to go next and to imagine this without motion you know if we play this interaction with a simple cut like I've said in

previous uh little lectures what you're left with with is that the beginning and end states of the interaction are you know they're kind of different

conceptually motion connects these kind of two concepts and ideas and offers a very very coherent explanation you can even take a look at

this option here this little example you know it really helps you understand that when I click you know this button another controller is going to

pop up from the side if I remove it you know those controllers will go away so it literally helps the player understand how many players are going to join this

game and even just the kind of little click that we get when the user clicks on this button and presses this whole card down the user understands that

they're interacting with it and it's not just a static screen you know motion is just fundamental it's not just an add-on but something that requires deep

consideration during the design of any two screens or even just a simple interaction you should think of ways to actively use it throughout your design process now we're going to get into

something a little bit more complex and we're going to talk about mental models you know mental models exist in the minds of users and designers when we create products that we want others to

consume you know we always need to keep in mind that when the user interacts with that product and you know they're trying to make sense of it for the first time they have their own types of mental

models the design system itself and the mental models of the designer so like you and me Etc they're thinking about those two things you know not necessarily actively but they have their

own understanding of how am I going to make sense of this design of this system and us as designers are trying to you know bridge that Gap motion plays a large role in how users perceive what

objects in the interface are and what they do motion does this by using our existing mental models and or by creating new ones motion can really do

this by using a combination of three different methods the first one skew amorphic Behavior I know that's a pretty tough word we have existing mental models for

how we interact and navigate our physical environment like picking up a cube or touching water or liquid or something else like that if we can understand these mental models

we will actually be successful at interacting or interfacing with a users's perception and reasoning around them so if we take a look over here even

though we don't see this very often we do see this at in certain types of Design Elements whether it's very skew amorphic or like origami like we are

allowing people to make these kind of threedimensional connections with this slide up to kind of go to a next page you can kind of see

how you know the user is creating this very slow ease you know pulling it like it's stretching some sort of goo and immediately we kind of make that connection because I think we've all

played with like Silly Putty or Play-Doh or any type of like fun type of toy or craft like that so it really helps kind of create that model or you know meet the connection between that model that

you already had or at least that understanding of how to interact with certain things number two is rules so as humans we are wired to learn rules you know

even though you know we like to break them sometimes and generally as a designer we are taught never to make the user think about the design they are using you know you want to make it as easy as possible and you know you want

people to just kind of like effortlessly stroll through your designs put it more simply we don't want to have our user learn new systems or rules but there is an opportunity here and I promise there

is definitely an opportunity all user experiences have and will continue to have state changes this is essentially the change from one thing to the next

you know you click a button something happens or you type something something happens now this can be like a small interaction or even a larger screen

change now simply put there's always going to be a gap between those two things user will expect something and you know how we deliver upon that expectation there's always going to be a

little Gap app now this Gap forces the users to kind of learn we are more than capable at learning interaction patterns because of this if you think about the

first time you used an app sometimes there are certain interactions that may have been new to you but all it took was one or two times to really understand and if we really focus on creating these

new rules or design patterns using motion it could really enhance the usability of the application thinking about what happens when we type here

we have just a simple uh type typing interaction that is just automatic but you know as soon as they actually start to type a day of the week we have like a

popup come up and we see this little notification pop up as well onto their little calendar

icon and we see that kind of skew morphic Behavior as well as this expands as they reach the second line and another popup show up as soon as they

start to actually type in file we can see a loader and all this just it really helps the user to understand the different

types of rules they may have to learn to actually use a system but once they do learn those rules motion really helps enhance this whole experience which would have otherwise probably been very

manual for the user so there definitely is an opportunity the Third Way is through interactional and visual cues know

visual cues and static designs imply that there is some sort of cause and effect in the interface the motion Behavior the effect is what comes after the actual initial

cue that motion either aligns or conflicts with these cues this is a big opportunity for designers to get right now if we think about how the user

actually interacts with this we can see that there is like a new notification you know these types of things that pop out and really help us

as users and designers you know continue to bridge that gap between understanding what's happening on the screen and what the user should be doing if that were to

just statically pop up we may miss it if this is maybe something that happens repeatedly a few times it's very hard to miss and it could be kind of subtle in the way we execute upon it so now the

user knows that they should tap on on their phone or there is like a new message or their cart is full this could be used in so many different types of ways if we even think about the

different types of visual cues we get when we use like these types of reactions I know Facebook's really popular when it comes to this kind of micro interaction that they've come up

with this one is an alternative to that but seeing these kind of little interactions this is kind of purely for Delight but it could really help strengthen brand as

well now if we take a look at all the things we just talked about motion has the potential to connect with those mental models and drive actual results

within your product motion and digital products is a very powerful tool this is very important for designers who look to make a great

product that connects with users it can be very challenging to deliver on because of its natural complexity it's not really easy to be honest but when it's really done well and you give it

enough time and enough preparation it actually has the potential to really connect with those mental models and create a very successful

product so that is why motion is so important oh hello there didn't uh see you there this is Andre just a quick

little secret here this course has two paths now most of you are coming to this course with different levels of experience so what should you do well if

you are still new to figma and you don't know that much about figma the next section is an introduction to figma so continue with the course keep watching

the lessons in order and we'll introduce you to the basics of figma so you can follow the rest of the course for the rest of you who are familiar with figma

maybe you've taken one of our previous courses or you just know your stuff you have some experience as a designer well in that case you can skip through the

next section which is the introduction to figma and jump to the section after that because we dive straight into motion design all right let's go have

some fun I'll see you in the next one bye-bye okay now we learned a bunch of different concepts we learned about different tools we learned about different panels and you're probably thinking Daniel I just want to kind of

get started I want to jump in and trust me I truly believe you and that's what we're going to do right now we're going to build a very very quick Ling hero section just to test out what we just

learned now I have a couple of images that I dropped into here the easiest way to drop in an image is to either if you go in here you can place

an image which is like literally it is uploading an image from your desktop or a file folder over here you can even get these images through a plugin and we're going to learn about how to use that in

different lessons in the future but I have these images here I'm going to make them available for you and you'll be able to use them in your file I really encourage you either to follow along and try to recreate what

I'm doing or just try and do your own thing I mean it's just for fun it's just to get used to the program before we actually jump in and start doing some more complex things so let's do

it so one thing that we didn't necessarily go over really quickly was the grid and auto layout so the layout

grid is really important for laying out things on your frame and so if I select the frame I'll notice in the design properties panel I'm just going to click layo grid and this little grid comes up

and that's not what we're going to use that's more for creating icons but if I click on that grid and I click columns that's what we want so just follow along

and I'll teach you how to create better grids in the the future we're just going to set the count to 12 we're going to set the margin to 100 your margin is your side on the left and

right and we're going to set our gutter to 32 so let's just stick with that for now but this is going to be our guide now this isn't going to show up in

the final designs you can toggle these on and off if you go to your view section here you can show your grids you have your pixel grid which we have showing

but your layout grid now this is my shortcut which is contrl G so if I click Control G it's going to toggle it on and off and that's just there for you to use

for your guide it's not going to show up in your final designs like I said but we're going to do that and I'm just going to place this here and we can

scale this image any which way we want so we'll just place that there for now now what we're going to do is we're going to create like a company page we're going to create some shapes so I'm going to select my rectangle tool I'm

going to go up here I'm just going to select my rectangle tool like that let's zoom in and let's give it a fill of say like like a red like

that and now what I'm going to do is I'm going to maybe create another shape so I have polygon it's like my triangle and let's give that another

color maybe like a yellow bring that over here and I'm going to select my circle

shape and make a circle and make this one maybe like blue and there we go so we kind of have like these shapes I'm going to actually

use them as my logo so I'm going to just like rotate this any which way I want circle is obviously fine

we'll just keep these together so we have our little logo here and if we wanted to we can group these so if I rightclick I can go in here and group

this selection so I can easily move that any which way I want it's going to be on my grid it's going to be at the top perfect so I'm going to create like a consultancy website hero Page look at

these people they're talking about something really important let's get some text so I'm going to write T I'm just going to drag and so I have some text so let's write

transforming the way organizations Define design and build

software and if I select it all I can go over here and change the font now a really nice font I like is Merryweather I'm going to change the

font weight and keep it to regular we can even change the font size that's going to be fine these different options here

so what I like to do is I'll just do an auto height so that's based off of how many lines of text you have so I'm going to do

that and I'm going to let that let's go all the way or we can just do something like there we go so it's going to take up five columns and my image is going to take

up seven so that's looking really good what else I'm going to do is I'm going

to make another text and we're going to write some more copy we connect

strategy now I have all this text prepared and you can either just like redesign

somebody's landing page for this little test that's what I'm kind of doing so data services what else do we

have here to bring your [Music] organizations most valuable so

software driven experiences to life okay now I'm going to select this all with command a and I'm going to make this a different font

let's do something like open SS that's nice and we are going to bring that down oh 14's a little too small we

can go up a little bit 18 is fine and we'll keep it on regular and once again I'm just going to make it auto height and it's going to be the same with if we wanted to we can even bring that in a

little bit more and what we're going to do next is we are going to make a button now the way I like making buttons is I like

making them within a frame so you can put frames within frames like I have a frame tool selected right now and I can make a frame and I can make another frame if I wanted to so this is my

button you can't really see it right now I'm just going to put it right here but I'm going to fill it I'm going to fill that frame with my team colors so let say

black uh no let's do blue there's my button and inside my button I'm going to select the text tool and I'm going to select inside that frame and if you notice inside my layers

my text will go underneath my frame so now we have kind of this layer within a layer here so I'm going to say let's do learn

more so I'm going to select all of them that I'm going to select the fill and let's do white I'm also going to set that to centered and I'm going to make

sure that it's Auto width so that means it's going to grow with the actual width of the copy inside so I'm going to select that text

again I'm just going to center it within this Frame now this is where things get a little bit interesting now I'm going to select this Frame and what you can do is you can do

this in two ways we're going to rename this to button first you can do this in two ways you can select your text and you can go to

your constraints remember what I said about having something within a frame resize easily you can send it to Center and center and every time you move your

frame it's just going to move if you set it to left and right what's going to happen is it's going to shrink because it's only the size of the text so that

means you would need to expand a text now I'm holding option here while I'm expanding it all the way to each side now if I go back and I set it back

to Center that's one way to make a big button and we can round the corners on that so I set it to five and clicked enter to confirm that and now I'm going

to hide my grid it's Control G for me so I have a nice button but if I wanted to do say an auto layout I can click this little Auto

layout while I'm selecting the button frame click that and what it's going to do is if I have two or more items within this Frame it's going to automatically

lay it out in a horizontal Direction so if I say copy this and paste it it'll be automatically added and it will grow the

entire frame you'll see that the space between is 10 if I make it like say something like 24 it's going to grow if

I make the space around you can make that over here so this is your top and your bottom your left and your right and where it is

within this actual frame so everything is to the left and the right so your auto layout right now is these are kind of like your constraints of your auto

layout all the content I want them to be centered to the middle in this case right now they are packed together you can also have space between so if I

select this Frame and I scale it they're going to be to the left and the right in this case or top to the bottom if there's positioned vertically so let's remove all this I'm going to command Z

all the way back but we're going to keep the auto layout and what we're going to do is we're going to set this can be set to zero because cuz we only have one

thing in here we're going to go in here we're going to set this to the center we're going to do 16 for the top 16 for the

bottom we're going to have space of 40 on the left and space of 40 right and that's perfect so it's packed in there and we are going to set the constraints

so if it's hug contents that means it's going to not grow when I move it left or right so if I select this Frame and move it left or right those things are not going to

grow so let's make this a little bit smaller okay so I don't want that to grow I just want to stick it to the left and the right perfect but I want all

these to be in their own frame as well so we can do that so I'm going to select them all and I'm going to put them in a frame now there's a couple ways we can

do this if I rightclick I can go to frame selection and the the short hand for that is option command and G so now they're all in their own frame so I'm

going to rename that content and here I'm going to go to auto layout again and I'm going to position them apart

16 let's make it 20 for a little more space Maybe 24 okay and what I'm going to do is I'm going to leave everything like that

that's perfect the constraints I'm going to put fixed and I'm going to make sure that it's going to scale left and right we can leave it to hugging content

cuz if I add say more text at the bottom so I'm going to command C command V this Frame is going to grow and this is great for adding content like if you have lists and you want to constantly add new

items to your list you can do that with something like Auto layout it's really great for growing lists or shrinking things awesome especially for Content like this if I wanted to say add more

content everything's going to grow the more I type okay so now that we have that set up it's going to be left and right and if we go back to our

frame now that is going to shrink once we set the content within so the content within is right now is at fixed with but if I do fill to container and and this one is fill to

container so it's going to go all the way to the edge let's see how everything moves so now it's automatically responsive now

that is pretty wild for me I love that that about figma perfect so we have that built out the image is very similar what I'm going to do is I'm just going to select that

I'm going to do left and right we're actually going to bring this image in let's overlay it and we can do something like

this and we can make the image left and right we'll make this left and right and you can start seeing how this plays nicely

together so we kind of have like our own responsive little design really cool stuff okay next what we're going to do

is I'm going to select the text layer again and I'm going to have some navigation options so I'm going to have

home I'm going to command C command V I have about I have [Music]

Services I have case [Music] studies and the last one I have contact so these are all my options and

I can do that same thing I can right click and while I select all them frame that selection we can make that into an auto layout and we can space them any which

way we want and I'm just going to put them all the way on to the right for now and Center it if I select all these I'm going to go up here and I'm just going to Center

them on that vertical axis and now we kind of have our header really cool stuff here so this button let's talk about quickly components so now we have this button that want to reuse say

through the website as our primary what I can do is I can create a component out of it by clicking that button up there and I can rename this component to

primary now I'm going to go into my prototypes and I'm going to want to use that primary so I'm going to go into my assets tab it's on desktop right now and now I can reuse that primary button that

we just created I'm holding down option while I'm dragging it option and shift is going to going to let me drag it while

keeping it on the on the same vertical axis you can space that and snap it to grid and we can modify this and create different variations of that primary

button if we wanted to but this primary button is reusable now so I'm going to delete those and go back so as you can see with what we learned we could easily

create a little web page we created some shapes here we learned how to use our text layers we learned how to create components with buttons we had images

constraints creating a responsive website using frames and using the new auto layout feature that figma had just released and we were easily able to

create something that looks really great so let's toggle that grid so I have contrl G let's toggle that and that

looks really really nice it looks really professional and now you're ready to go if you have any questions don't hesitate to reach out to me and I'll get back to

you really quickly hello everyone and welcome my name is Daniel and I'm going to be teaching you about web and mobile design and best practices while also

teaching you how to use figma along the way you're going to learn a bunch of different things everything from learning how to design a UI to learning

how to collaborate with others to building Design Systems and prototypes it's going to be really great now here we are on the figma web page here you can learn a little bit more about figma

if you wanted to you can learn about things like design prototyping Design Systems collaboration everything you can even get downloads if you really want to

download the actual desktop application but if you want it to work within the browser you can do that as well here you also learn about pricing and you really

aren't going to need anything but the free starter tier you won't need to use professional or organization in the future you will be

on a design team and they'll have a paid plan for you to you know share Design Systems and stuff like that but you won't need to worry about that right now

another very important part about figma is the community there's thousands of files and templates that you can even download and duplicate

there's plugins that you can use and we're going to get into that later there's also things like events and live streams best practices education

programs and user groups so buckle up we are going to sign up for figma next and jump right in and I'm going to teach you how to use figma

from the ground up hey everyone and welcome back so by now you should have signed up for figma if it's really straightforward I usually just use a Gmail account or whatever

account that I'm using if I'm working at a different company but when you come to figma for the very first time what you're going to see is this screen this is kind of like your dashboard so let's

go through all the different things you can do here so these are some basic files they set you up with over here I have a shared file so we'll get into that later but we have your colors we

have figma Basics you can go in and learn about you have WI framing igma you have prototyping so they have a bunch of different things that you can already

access they kind of give you these little starter kits now if we look to the left we have our little account section so if I go and click that I'll

see my email here I'll see my name I'll see all these different things that I could use like especially if I'm in a team or if I'm working with an organization a lot of that kind of stuff

will be here and if I download any plugins I don't have any installed on this account since this is my test account but if you have any installed plugins they're going to show up in this

area and if you're part of any team generally any file contributions will be here so since I have a figma Basics resource file for you all that's going

to be my shared file to myself so that I'm using so I'll teach you how to use shared files as well so right now I only have Daniel's team and Daniel sano's team so I really don't have any teams

because you know I'm not on a team right now I'm just working solo and I know most people will do that on their personal account so no need to worry about

that we also do have search so if you want to search for a particular file if you have like 100 files or even like 20 files it's easier to search for them or if you need to search for people in your

organization really easy to search for them you can even search based off of community if you wanted to and that's the next thing we're going to get into which I think this is is one of the most

amazing features that figma has you can use this community uh little tab over here to find different plugins you can learn about different files that they

have that you can duplicate so let's go in and see what we can find for wireframes so I'm just going to click wireframes over here and if you notice you'll see all

these different files and plugins you can sort by one or the other so if I wanted to say use this userflow kit I would just open it

up I could like it if I wanted to or I can duplicate it so I've duplicated this and now as you can see this is the file and it's

open now this may be a bit confusing but here all I would need to do is I'm just going to go back to this

little button at the top here and click back to files and you'll see this next tab the drafts so this is where all my drafts

live and drafts are essentially just little files or big files that don't have a project now I duplicated that file and that's what you're going to be doing

with the files and resources I give you so if you can see right here figma Basics is a file that I have and I also have userflow Kit so if I wanted to

create a project I would just come over here so this is called first project if I wanted to I can even create

a new project I can just say this is test so I have test project so what I'm going to do is I'm going to go back into my drafts I'm going to click this I'm going

to open it up so it's opened up in this tab and I'm going to click this little dropdown and I'm going to click move to

project and over here I can select which project or I can search so I'm going to click test and I'm going to move it so right now you'll see that it's in your test project so if

I click that I can see that little check mark we're good to go so when you do get a file in the resource section what you're going to need to do is you're going to need to go to the file cuz you

won't be able edit it right away you're going to have to click this drop down click duplicate and once you duplicate it you'll have to go to your drafts and you'll see it in your drafts and you can

go and move it anywhere you want now we can see that I have my project here I have another project we have our drafts you even have teams you can create new teams if you

want to you don't necessarily need to create any teams especially if you're using it personally for yourself but that's another option that you

definitely do have and that's it for the basics of your dashboard hey everyone and welcome back so we kind of went over our dashboard a

bit now we're going to actually get into a file so I'm in my test project here all you need to do to create a new file is click this little plus

button so I'm going to click that plus button and I'm just going to click a blank canvas you have different templates that you can use here which are really great if you need to but

let's just create a quick one now let's go over what we have here so this is what your blank canvas looks like we

went over a little bit about this kind of like middle bar over here you can show your version history you can export this you can duplicate it you can rename it so I'm going to rename this

to my test file perfect you can delete this and you can move it to any other

project now another important thing is in this little menu over here getting back to your dashboard is really easy just by clicking that but you can also

access any other thing here like files you can save it if you want to you can export it you can save it as an actual figma file if you don't want to keep it

in the cloud I never really usually do that I usually always keep it in the cloud and just send links to people but this is where you would do that you have your edit options here your view options

object options all these different options that you can access you can even get the desktop app if you really want to but for the ease of use right now I'm just showing you how to use it within your browser that's why I really love

figma you can use it in your browser as well so the barrier to entry is very very small so let's get get right into

this so we have all our different tools here we have our move tool over here our scale tool we have our frame tool and your

frame is essentially kind of like your artboard in sketch I can make a big frame like that or if I select the frame tool

you'll see this is the shortcut which is f so if I select F which I just did you can see all the different things that you can do here if I wanted a phone

frame I have options I'm going to go to desktop and I'm just going to select uh let's select MacBook Pro so there you go you have your

frame you also have slicing if you want to use slicing we won't be using that in this whole project and these are your shape

tools these are your rectangles your lines your arrows ellipses you have your polygon star you can even place an image and once again they conveniently show

you all the shortcuts so if I want to place a rectangle I can select that or I can select R if I wanted to make a circle I

select the circle and I can put that in if I wanted to keep the proportions the same and make this an actual Circle and not like an oval I will hold down

shift and I can scale that which way I want same with rectangle so if I select R to select a rectangle tool I can place that and if I hold

shift I can make a square really easy stuff next we have our pen tool and our pencil tool pen tools really great for

making icons all you need to do is just click and you can make anything that you want you can make any shape you can edit that shape shape by

pressing that point you can even add a fill and we're going to get into that later but you can easily make vectors

with that pen tool and next we have our text tool and all you need to do is press t for text tool so we have our text tool selected and you can either

create a big box I'm on uh Mac so I pressed command Z to go back but let's do that again so we got our text tool you can just click and start

typing and there we go you can just keep on going press enter to go to a new line command a on Mac

to select all and backspace and the text layer disappears next we have our hand tool and we have

comments so this will get into a little bit later but comments all you need to do to leave a comment see this is a different state now if you notice the right has changed you click and you can

add a comment and click comment and there you go this is a great way to collaborate with others so I'm going to delete this

comment by just clicking on it and clicking delete comment and if I click v v is the shortcut to the move tool so if I click V

I will go back to the move tool so these are your basic tools for just getting things set up within

figma and using like just your basic shapes your frames using the pen tool your text tool that's all you're really going to need to get going so I'm going to select all these delete this and

we're going to move on okay so next what I want to teach you about is the left panel so we have we have the layers panel we have assets and we have pages so let's get right into

that so this is the page that we're on right now but sometimes a file could have multiple Pages sometimes I'm working on different types of Concepts or I may have the High Fidelity designs

and then the prototypes right after that so what I would usually do is I would select this page so you can see and if I double click on it I can easily edit and

I can say we'll call this one Concepts and if I click this little plus button right here I can add a new page and I

can call this one something like prototypes and if you just toggle between the two you'll notice that I don't have anything on the prototypes

but I have something on the concepts page I have this Frame of this desktop now this Frame is a layer if I

want to create a new one I'll just copy that you can right click or double click it depends what your settings are on your computer but if you right click you

can see the copy right at the bottom you can copy properties and paste

Properties or you can just in the case of a Macbook you can just do command C and command V and I'll have my new frame right there and now these are two separate layers

now within the actual frame I can start placing stuff so I will select R to select the rectangle tool and there we go that's a one layer

but if I copy that layer so I'm going to command C and I click this Frame I can paste it with command V and now I have a

layer here too so now I have two layers and I can rename that if I want they show you you the shortcuts all along here so command R is the shortcut in this case so if I click it command R I

will have the option to rename this so I can say rectangle to and if I wanted to say hey I wanted

to select both of these I can click this and hold down shift and click the next one and copy both of them and go to the

next page and paste them and I can have my FR and my layers all there all in another page easily

accessible and you can rename them any which way you want so this is essentially where a lot of our stuff is going to live all within

the layers and Pages panel on the left assets are something else entirely assets are for components and we're going to get into

how to create components in a second but if I were to make this a component I can find this in my local components now and I can reuse it but

we're going to get into that very soon hello everyone and welcome back next what we're going to learn about these options up here in the middle when

you select like a frame or say like a rectangle or shape like that so let's jump right in so I'm going to select R and now I have the rectangle selected as you can see and I'm going to draw a nice

square right in the middle of my little frame over here let's zoom in and you have three options let's go through them individually so the first option is edit

object so I've selected edit object and I have a couple options up here I have the move tool I have drawing tools like the pen tool that we saw before and the

pencil tool I also have the bend tool which will allow me to to make some really nice curves and I have the paint bucket tool so I really want to focus on a couple of

these tools because you won't be using them all pretty often but if we use the move tool we can select like a point on this

square and we can move it any which way we want so in this case if we move it in I'm going to make a little bit of a diamond so I'm going to select both points and bring them in little by

little and now I have a diamond now if I wanted to use say something like the bent

tool I can take that and start twisting it any which way I want I can even make this into a little bit of an oval now these are really great for

making your own custom icons and we're actually going to get into this in a later section of the course where we create our very own icons but just so you can get used to some of these tools

we have it here so I'm going to do that for this side too not a really nice oval we have going here but it's going to

work and we can even select these different points and bring them in kind of looks like an egg about to topple over but you don't need to

actually click into here to to get those options you can just double click on your shape and those options will appear so that's to edit your object the next

part and what I spoke about in the last video was a component now this is one of the most powerful things about figma and something that you will definitely use

if you're on a team I even use them when I'm doing solo work now the difference between using components within a team and by yourself it depends really on the

plan that you're using with inigma now if you're using a free plan you will only be able to use components within the file you can't have a component be

reused outside of the file on a professional plan or an organizational plan you can use components across teams across files and across

projects and we're going to get into how to do that later but this component little option here just

creates a component now you'll notice that over here now this is really great for interface design if you're creating new things that you need to reuse like

buttons or logos text there's different things that you can do and you can recreate now if you see my component

right here there is four little dots and those four little dots basically signify that this is a master component

so you don't want to touch this one but if you do want to reuse it what I would do is I would copy it so I'm going to command C and command V now I have

another component but this is an instance and what that means is this is another variation of this

component so you can have a file with your main component or a page with your main component and you can have the instance

be reused throughout the rest of the file in the case of using it within a free plan like we will be using it for this project that we're going to be

building so let's take a look at that so in the assets panel I'll see I have local components and it'll show me which frame

it is in so if I want this is the frame so if I rename this I can call this components and if I go back into my

assets section I'll see that those are where my components live so I have my rectangle one and it's selected that's my master component but I don't have this

component there because that is just a copy of this so let's go to a different page let's see how we can use this so what I'm going to do here is I'm going

to go into this Frame and I'm going to go into my assets and I can just drag it over and there we go have an instance if we go back to my layers we can see this

little Diamond shows that I have an instance of it and I can delete it if I want and that component will always be there now if I go back and I go back to

that original component if I delete that I have no more components let's go back and fix that so there's my component and

that's how you create component components within figma it's really easy really easy to use across different parts of your app it's what we're going to be doing even in like the userflow

section we're going to be doing it when we're creating our very own components for our design system it's going to speed up your workflow can you imagine if you have to keep on designing the same button over and over again when you

can just easily go over to the assets panel and just copy and paste it from there at least they'll all be the same and they'll all be very consistent and your designs will be much more

consistent afterwards it's a great practice to have a component library for whatever file you're working on especially when you're in the final stages so we're going to delete this

component next I'm going to create a new rectangle so I collect R and I'm click shift and I create a square over here

I'm going to zoom in so I'm just sliding in the next option are

masks Now to create a mask I'm gonna copy this so in case of Apple I can do option

shift and drag and now I will drag a new square or you can just do a command C and command v a copy and paste it doesn't matter but we're going to make

one of these a mask so let's select a different color so I went over to my fill I'm going to

select red bright bright red now if I select both of these and I click the mask option right

here you'll notice that one of these is hidden while the other one is showing now if I move

over you'll notice that the rectangle on the left was actually acting as kind of like a window or like a frame into viewing this rectangle this is

great for imagery or if you want to like hide different shapes so this is a great way

to kind of do that and if I delete this it shows again so let's do that one more time this time let's overlay

them use as mask and rectangle 2 is now the mask and now if I move rectangle 3 you'll see that it is being hidden by

rectangles too so really cool way to create masks but another great thing so I'm going to click rectangle again and going

make another Square you can create you can use Boolean options here so these Boolean options are

operations are right here and usually this is when you have two or more shapes available if I select all them I'm just going to drag my cursor over

them if I select all these I have Union selection I have subtract selection intersect exclude and I can even flatten these so if I do Union you'll see that

they're all together now they're one shape if I double click in here I can you know pull them out if I want but they're still a

union now if I go back bring that back in go back command Z I'm commanding z now I have all these shapes again you can do

subtract you can do intersect you can do exclude all these different options and at the end if you

want to finalize your design you'll see like I said before like you can access these layers underneath and you can fiddle with them

if you want but if you want to access your design I'm going to just fix this okay cool this looks pretty cool I'm going to actually select it go to my Boolean

operations and click flatten selection and now I can no longer select that but now I can edit it like it's its own shape so I can start clicking the move

tool the bend tool if I wanted to and go in a little bit deeper and do weird stuff like this this becomes really handy when you're

actually using these different types of tools to create stuff like icons and that's it for the top

bar hey everyone and welcome back now we're going to get into the design properties panel now this is where you're going to be doing a lot of work as well so I've created another Square

in my frame I've placed it in the middle and I'm over here on the right so you'll notice three options

design prototype and inspect we're going to be focusing on design and we're going to go through all these different options that you may see and it's going to be different

really depending on the different things that you are going to be doing like text and a shape will have different properties and we'll go over that so let's go through it so the first thing

you have is the alignment this is going to align this object based off of its parent so in this case if I click left it's going

to be to the left if I click to the middle this is the middle the horizontal middle right top

middle bottom so you can if I want this to be centered perfectly now it's centered to the middle vertical

this is the middle vertical and this is the middle horizontal if I want to be left and bottom bottom left that's all I would have to do so if I want it to be

right I would click this option Al line right and then Al line top so this is really great if you need to align an object to your canvas or

your frame but if you wanted two objects what you can do is you can align them together this is really great if you have two objects so if you don't want to drag over these

objects and say if you have three objects and you just want to select two you just select one hold down shift select the other and now they are

both centered to each other and then you would remove them manually to be Center to the actual frame so those are the ways to align your item so I'm going to delete delete

these other two squares bring this one back to the middle okay next we have these different values we have a bunch here we have your

X and Y values we have your width and your height so these are your positional so if I select something like 200 it's going to move 200 to the left so your X

is your horizontal axis and your Y is your vertical zero is going to set me to the top so let's go back back your Y and your H are your width and your height

and this little chain is going to connect them so if I affect this property right here if I say change it

to 400 it's going to actually be 400 height as well but if I unlink this chain and I say set the height to

200 now the width won't change so let's go all the way back okay and what I'm going to do is just set this all to 500

and I'm going to center it again on my frame so we have a 500x 500 pixel Square next we have our rotational value we can

change this to say 90 which in the case of a square it's not going to do anything but if we do

45 there we go or if we do 15 so we can do that manually but if you want to actually not do that manually you can do it just by going over here

and you see how my cursor changes as I get close to a corner if I hold that I can spin it if I hold shift it'll go in increments so I think it's 15°

increments and you can spin it any which way you want and this is your corner radius so if I want 100 it's going to make it

rounded you can even select this little dot here and Pull It in so now I have 250 radius and that looks like a circle or I can make it

small like a little card on a UI that looks really good now if we go back and just reset it to zero we'll go back to our Square below that we have

constraints now constraints are really good for responsiveness in general and basically it's how your item

reacts to when your frame is being stretched or contracted so in this case if we look at our constraints they're

left and top so that means if I resize my frame from the right in the bottom it's not going to do anything so I'm going to command Z and go

back but if I select from the top left it's going to move with that top left so pretty cool right now this is where it gets really

interesting now if we want to make like say responsive cards and stuff like that all we need to do is set these properties so in this case say left and

right and top and bottom let's scale this you'll see that now it's going to scale with

your the way you scale your actual frame so this is great for responsiveness if you you're working on like different screen sizes and you want to create like maybe card components

that you want to be able to reuse at different sizes and the content moves easily within this is the way to do it so I'm going to command Z all the way back to when we had a beautiful square

and there we go next what we have is different blending modes so this is kind of something you would see in Photoshop we

have like multiply we have screen all these different things really great for if if you're using like multiple colors and I say I want to make this

multiply we can do that also with INF figma so those are your blending your blending modes next we have our fills this is very

self-explanatory you just need to click this little section here and you can edit the hex value you can even change to RGB you have hsl CSS and so on and you can go

and just drag your cursor and change the color you can change the Hues and you can go up and down get all those different values and get some really nice colors

so there go we got kind of like this nice turquoise teal bright color right here you can toggle that to turn on and off if you're working with different layers maybe different components you

can also add more color fills on top of one layer so in this one this is a linear one you can change that up here

so in the case earlier we had a solid color and we can change that opacity to say like 20 so you can see the layer below it so if I go back and I go up

here I can change it to linear I can change it to radial angular diamond and you can even have an

image so a lot of different options for you right there so let's go back let's actually remove this layer just by clicking this minus button so we still have our nice fill

over here you can add Strokes so you can see a light black outline around this shape we can change that over here so if I change that to 10

that's the value there we go so there's different ways you can have it centered you can have it inside outside that's sometimes up to preference depends on what you're doing

like say if if I'm using a button I'll usually have it set to inside so it doesn't affect like different sizing in terms of the pixel width of the actual button itself in the pixel

height you can have different effects here so if I click that plus button the default effect is going to be a drop shadow you'll see that very faint drop shadow right

there so you can edit the values of that drop shadow so I have it set to like 10 y so it's going to move it down 10 and if I

want to move it 10 to the right it's going to look like the shadow is being cast to the right that means the light source is coming from like here and you

can blur it any which way you want so I blurred it to say 20 and you can set the opacity and the color of that shadow so in this case let's make it like a dark

blue and we can see that right there that's one effect other effects that you can do are inner

Shadow you can do layer blur and you can do background blur so let's stick to our regular drop shadow the last part of here is the

export so you can export any which way you want you can do multiple exports we can set the sizing kind of

like the prefix you can set the which file type you want really easily be able to export those to whichever desktop you

have file folder and easily access all those files next we have text so I'm going to

delete this nice square that we made so I'm just going to click delete or backspace and I'm going to select t for the text tool and I'm just going to

click I'm going to write hello and a command a which will select all of them and you'll notice that they still have the similar properties like we don't have the corner radius here yeah that's

basically kind of what we don't have but now we have a text and we can change the copy to be whatever font or type face that you want in this case we can do

like helvetica or something like that we have our different font options our weights and we can adjust the size we have leting we have all

those different options we have erning in there too so this will the line this will affect your line height you can set it manually you can set your king and your letter spacing to whatever

percentage you want and you can still use those different options like if you have text over image you can select like a drop shadow effect to fix that if you

have any legibility or readability issues and that's all you really need to know for designing with INF figma at

least using the design panel over here hey everyone and welcome back so what I wanted to teach you really quickly is just how to create a very

quick prototype so what I'm going to do is I'm going to create another Square surprise surprise so we're going to create a square we're going to set it to the middle here and we're going to select this

Frame and we're going to copy and we're going to paste it so I'm going to do command C and command V and there we go we have two different frames here and we're going to rename these frames so

I'm going to select this Frame I'm going to select my shortcut which is command r or I can actually just double click this layer or this Frame and I'm going to name this Frame

one and I'm going to name this one frame two now next thing I'm going to do is I'm going to click

prototype now we don't need to select a device but if you're on a phone you can do that if you like it looks really nice you can set the background you can set

your starting frame in this case what I'm going to do is I'm going to select this Frame and what I can do is I can even select the objects within this Frame so if you

had a button you can imagine if I click this button I want to go to this page so all you're doing is clicking this and dragging it so on click you'll see these interaction details and we're going to

get into this later in much more detail in depth and we're going to talk about how to create some really nice animations we're going to talk about how to prototype some really cool prototypes and it's going to look pretty pretty

accurate it's going to look like it's a coded design or a coded app and you'll be able to impress clients you'll be able to even impress users when you're testing with them but this is just the

basics so let's just show you how to just make a simple click and we can go on from there so we're going to select onclick and we're going to now navigate to frame 2 and this is going to be just

an instant animation that's all we're going to do now I'm going to click this little play button up here to click present that's going to

open up a new tab and this is my prototype you'll see even when I'm in here I can hover over it you have prototyping options if you want to kind

of fit it to your screen if you want to show hotspots so if I click anywhere away from here it'll show me my hot spot so if I click on this it's going to go

to my next frame if I click r i can restart that so if I click R I go back to the beginning pretty cool now let's go back

I'm going to close this tab and I'm actually going to make sure that if I click this I'm going to go back and I'm going to add something really cool I'm going to click smart

animate just to give you a sneak preview of what cool things you can to be doing in the future so smart animate is actually going to animate this because they're named the same so rectangle one and rectangle one it's going to think

they're the exact same layer and that means that when this clicks there it's going to twist so let's see I'm going to click

play and going click R and I'm on my first frame I'm going to click it and you can fine-tune these animations to do some really cool things like buttons growing cards growing all

that kind of stuff and I'm going to show you how to do that later so that's how you prototype easily within figma just by connecting frames if you want to test something quickly and just to see what it looks

like hey everyone and welcome back we're going to be talking about smart anime now what smart anime is is it's a thing with INF figma that really allows to bring your prototypes to life it's going

to allow you to add some serious motion effects into your prototypes some of them can get really complex and you can even use it to make some really simple animations I'm going to get through some

of the very Basics to get you started and jumping into like your first project so let's Jump Right In so as you can see uh in this file you have it as well this

is the Smart animate examples file we have some examples and we also have some basic prototypes in here and I'm going to go through each type of example in terms of what you can use it as when you're using smart animate in your

prototypes and these are the different types of properties that you can use so let's just start off really easy let's go right into the first one now this is

scale now what I've done in this prototype so I've just basically created a basic frame and to do that you can just use f to select the frame tool

which is up here and I just have it set to the I think it's the iPhone 11x Pro or 11 Pro X it really doesn't matter you

can do this with anything I just kind of like using this as my base uh screen or artboard but when it comes to just quickly designing for mobile or or whatever even just showcase some

examples like this so what we have here is scale and when we talk about scale I'm thinking about things that increase in size and things in that decrease in size and smart anime allows you to do

that so it is in such a harsh movement from left to right so let's take a look at what it would look like without Smart animate so I'm going to go into my prototype tab in the top right corner here so there's the design tab this

panel allows you to basically design easily and the Prototype Tab and what the Prototype uh tab allows you to do is allows you to kind of start creating

interactions so if I select so I have this scale artboard over here this Frame and I have another scale frame over here and if you notice both of my layers here

the circles are named the same so I have ellipse one and ellipse one so that's going to be very key for using smart animate now let's Jump Right In so if I

go into my prototype and I literally let me zoom in here so if I zoom in I just used command you can use control and I use my scroll bar or you can do command

plus or control+ so I've zoomed in and I'm just going to click this little button and drag to this Frame so I've dragged it to

the next frame you can do it manually by just kind of setting those interactions once you click that plus button but I have click navigate to scale I have

instant so I'm just going to let that go and I'm going to go look at my prototype right now I'm going to click that little play button in this top right corner so that's going to load up for us

and we see scale so if I click this it's going to actually move to the next screen that's a pretty jarring experience right and if we want we can click on

this other ellipse like to actually cause that click effect and go back that way so if I click on it it's going to going to shrink back to the normal scaled frame and if I click on the small

one it's going to scale upward and here you can kind of Define the interaction you can do it on drag while hovering you can do it like on Mouse enter leave up down it's really great for making like

active States when you're doing like Mouse down and up but for the sake of this example we're just going to keep it on click so here we go we have it on click and it's just going to go back if we go back here it's going to live

update so we can see that boom boom back and forth now that's pretty jarring the way we're going to actually make this animate nicely is we're going to go back

and look at these line so if we zoom in we can see line going from this one back to the smaller one and the larger the smaller Circle going to the larger Circle so let's click the smaller one

first and we're going to go into our interaction details and from here we can really Define the animation we can do dissolve let's see what dissolve looks like so we've clicked dissolve and

that's a little little less abrupt so it's kind of like this nice fade in you can see that you can actually you know Define the different type of Animation using easing we have ease in ease out

ease in and out ease in back so there's a couple things you can do here you know for for the sake of less complex animations I wouldn't really spend so

much time fine-tuning this because it could take a long time and at the end of the day some of these effects you don't need to kind of put so much thought like that into them as long as you kind of

get the basic interaction down and you can fine-tune that once it's kind of being implemented but you know totally up to you so I have it on E out the

timing is much more important to me so if I increase that to like say a th000 milliseconds that should last for like a full second that whole uh interaction so

I'm back here and as you can tell it moves in really slowly now let's actually look at if we actually use Smart animate so I'm

going to click smart animate over here while I'm clicking on this line and I'm going to do the same for this I'm going to go back to the larger Circle and I'm going to actually click smart animate

from the animation menu I'm going to leave it at e out for now and I'm going to actually set this one to a th000 so I have 1 th000 ms click enter and everything should be updated let's

go take a look at our prototype let see if the Prototype actually updated so we can see smart anime actually takes the original Circle that we built and

uses that same name to scale it so if we go back and forth so you can see you can do a lot of things with using scale as a property that you change between the two elements so I have it shrinking down and

up you can do it on button clicks and you can make it very subtle just to give feedback to users I'll actually get into how to do that for a button so that's how you use scale

Within in smart animate hey everyone and welcome back we're going to be talking about another property that we could use something like position and this is something that we would probably use a lot of so when I

was talking about scale and using like smart anime as your animation type uh same thing applies to when we're thinking about position here so if you I'm going to go back to my design tab just because it's easier to navigate UI

elements when you're kind of working through prototypes rather than using the Prototype panel as you can see as soon as I click an element I already see the ability to kind of Define an interaction

so I'm not going to kind of use that for now but going back to the actual design panel if I go in here you know I

actually look at the design I've created and I go into this Frame as well on the right once again the thing that you're going to see is your layers that you

want to Smart animate need to be named the same or else you're not going to get that actual effect so if I go ahead and say I name this little ball cuz what we're going to do is we're going to

create like an up and down slider for this because we're going to define the position of um this over here this little ball within the slider and we're going to move that position to the

bottom but what I'm going to do first is I'm actually going to rename this one I'm just going to call it ball you can call it whatever you like as you work along with me just to kind of test it

out and you really get comfortable with smart you don't want to be jumping into some complex things right off the bat because it could get pretty overwhelming okay so I've renamed this

little ball ball and this one's just ellipse 2 now if I were to go back into my prototypes panel over here select this ball go to that side I'm going to

call smart anime it's at uh the same settings it's going to carry on those settings that I had from the scale video that we just went through and I'm going to do the exact same thing I'm going to select this ball

whoops I'm going to delete that interaction and as you can see you can actually see these interactions over here so if I click on this Frame the first one you can see the amount of interactions within this Frame so I I

have uh the actual flow starting point because if we go back to our project we can see that I have all the different flows figma now allows you to actually

create multiple flows in one page in a project file so that makes things really easy in terms of like like showing your engineering team or others if you're like showcasing your portfolio to somebody all the different types of

examples or interactions that you've thought of and you'll see in some of the other project files within the course that we have a bunch of them when I'm trying to show you how to do things like

Parallax or dragging or map interactions you'll see a lot of different things like that but going back to our original file here you'll notice that you can see the interactions you can even decide the

actual flow starting point so I have this one named position so it's it's named accordingly to the example but over here I can actually click on the interaction if I don't want this anymore

I can either just drag it out and disconnect it or if I press command Z or control Z to go back and bring that back there I can actually

select it and go into this panel here and just remove it easily so now that interaction's basically dead so let's go back here select that ball and you know

go back to the original screen screen once again you'll see that smart anime animation come back in here it's going to be reused as we kind of go through this entire

process and you'll see the amount of time so this interaction is going to last one full second so a th000 milliseconds and let's go take a look at

our example so I have the position flow loaded up right here one thing I want you to notice and remember is that we renamed the ball in the second frame so

if if I click it the duration of the interaction will still happen but you won't actually get the sliding animation that you really

want so let's go back and take a look so if I rename this so that was ball we'll just take this name from this ball over

here so I'm going to command C or control C go back to this ball here double click on the

name and command V control V for Windows users and rename it let's go back and take a look so as you can

tell by clicking we've modified like position and you can do anything you want here if I wanted to actually instead of do onclick on drag to actually really simulate like a slider

you can do that as well so I've changed both of the interactions to be on drag so we're going to get that effect so let's go back we're going to go here and see if I

click it nothing's going to happen but if I drag it I can actually interact with this little thing and now your prototype is not just a clicking prototype your

prototype is actually you know mimicking real life examples so we've created like a quick slider like that and that's it for

position hey everyone and welcome back now what we're going to talk about is opacity as another property that we can actually modify with smart animate so I

kind of have like this glass over here so I have a rectangle with the subtract is what I've kind of called it I haven't

really rename these layers to be honest and I have these subtract over here let's take a look I'm actually going to take

this and bring that over so what I've done is I'm going to go go back just so I can show you I've taken this rectangle and I'm going to actually just copy and paste it I'm going to command C or

contrl C I'm going to click on this Frame and press the exact same thing command V control V to paste it so it's

pasted it into this Frame I'm just going to actually put that layer on the back like on the bottom you can do that in a couple ways you can drag it manually or you can just rightclick it and you can

send to the back that's the shortcut on the right so there we go we have two identical screens well kind of identical

we have the subtract over here and the subtract over here and this is basically the glass and the water that I've kind of

simulated and now what I've done here is I've basically created opacity you know kind of prototype if you look over here in the pass through on the design panel

that I have open right here I have it set to zero so if I had it set to 50 you'll see that now it has 50% opacity meaning that it's 50%

transparent so if I undo that with command V control V I can see that now it's entirely transparent you can't even see it even if I drag it around now it's

down there you can't even see it so I'm going to undo that bring it back so I have it here and now you can see that it doesn't exist same thing with this one

over here this one instead I have it set to 100% so I set to 50 you'll see what that looks like but it set to 100% And we want to kind of get a nice transition

from something appearing from nothing so what we're going to do is we're going to go to our prototype panel I have this one named opacity I have the flow starting point you can even create

a new flow starting point if you wanted to but we're not going to do that because we want to keep it nice and neat so I have no interaction setup but what

I'm going to do is I'm going to show you a different type of interaction I'm going to actually click the whole frame here and instead of doing like a on click or on drag what I'm actually going to do is

I'm going to click this whole frame and I'm going to press the little plus button and drag it to the next frame and what this is going to open up for me is

actually the ability to use something called after DeLay So that is the type of inter action right now we have it set to unclick so if I click the whole screen it's going to work but I don't

want that to happen I want it to automatically happen so I'm going to click after delay and here is where you can actually set up the type of

interaction or the the timing as to how long is it going to take is it going to take like 10 seconds uh from when the screen appears is it going to take like 5 seconds I'm going to just set it to

like 2 seconds so that's 2,000 and as you can tell it's going to opacity here we can kind of Define the different types of frames you'll see in

the left layers panel all those different types of frames being selected but we have it set to opacity over here the one on the right and we're actually going to define the interaction here

once again we're just going to click smart animate so we have the animation set to Smart animate and we'll just leave it at 300 milliseconds and we're going to do the

exact same thing we're going to to click this right frame over here click the plus button and drag it back and we're

going to set it to after delay we'll set it to 2 seconds so 2,000 and it'll automatically put the

milliseconds at the end for you there it's already set to Smart animate it's already set to 300 milliseconds and we should have our animation automatically

starting and going back and forth forth non-stop so let's take a look at what it looks like within our prototype so we already have it open over here it does open a new tab for you so you don't need

to constantly click play but we can click play and it'll bring us there so where are we opacity so there it is so you'll see that it's constantly

going back and forth and that's another property that you can actually animate with smart anime you can use opacity as well and one thing I want you to realize is that something like this like it

doesn't need to be done entirely just with one property at a time you can combine a lot of these properties together to create some pretty cool things like scale in rotation or scale

in position there's a couple of things you can do here to create some really great uis that they feel like they're an actual app in your hands so I want you to think about that as we kind of move forward within the course and we start

kind of combining you know these properties to create some pretty cool uh and Slick animations this is our opacity one right here and like I said it's going back and forth and you can tell

it's disappearing it's reappearing that's something else you can do with smart animate hey everyone welcome back we're going to be talking about another

property one that we use here is rotation and rotation I find is one that isn't used very very often but it could be very

powerful as you can see in the design I have here in the left and the right frame what I have is a kind of a group I've grouped these little squares they're both like I said before they're

both named the exact same thing let's remove that rectangle that was there okay so what we have here is group one and group one if we go into the group we can actually see all the

different rectangles and I haven't named them anything to be honest I've just kind of left them the exact same way but the smarter thing to do would be to name

this like 1 2 3 4 and so on or something easier right now it's kind of a little messy in this file but you know the corresponding names are on both frames

so we'll be able to kind of get around that I have all these items grouped and what I've just done and this is kind of like a easy version of rotation because like I said you can combine the two in

the last video I mentioned that you can combine like rotation and position so if I wanted this to rotate and move instead of to this Cor corner I can have it move to this corner you can do that you can

have them crossing over paths and whatnot but for the sake of the demo what we're going to be doing is we're just going to be rotating this entire group so you can see what that looks

like now let's actually go into our prototype panel and what we're going to do is we're going to keep this very simple we're going to click that group

and click that little plus button drag it to that other screen it's called rotate ation this screen perfect with have the right screen and we're just going to click smart animate same thing we're going to click

on that group make sure that we have that selected we're going to press plus and for the sake of the demo what I'm going to do is I'm going to actually click the interactions panel on the

right and from there I have it already set to click and here we can Define you know what we want it to happen is it going to navigate to we'll get into

other things like overlays so you can see how that kind of works but we'll navigate to we're going to look for that frame it's going to highlight so that's the

one rotation it did highlight on the left we will click smart animate and it's already set to 300 milliseconds and we're good to go let's take a look at

what this looks like press play we're going to go to rotation and from here we're just going to click and you can

see that it's literally going to rotate the actual UI element so this is how you actually use

rotation in smart animate hey everyone and welcome back what we're going to be talking about now is fail fail is another pretty cool property that is used sometimes when

actually animating different types of elements especially when you think about you know changing a button color on a click or having like a hover you know hovering over an interactive element

let's actually use hover this time because we haven't used that yet so we have our rectangle here rectangle 5 what an awesome name and we have rectangle 5 over here and what we've

actually done is we're going to be using gradients so you should see that on the left we have this gradient set a linear gradient on the fill so I have my design

panel open once again especially when I'm working on creating these differences so uh let's take a look here so we have our gradient you know I can modify that gradient in which way I want

by clicking that line I can you know bring that block even further up if I needed to but I'm not going to do that I can

bring this white Etc you can kind of Define that any which way you like same thing for this rectangle over here you'll notice has a lighter gradient so it does have the white that this one

does but the block is considerably grayer now so we're going to see you know a little bit of a scaled back look when it comes to color less harsh than

what we have here so let's actually jump right into creating this prototype so we're going to click prototype we're going to go over here we have our first screen on the left and

this is kind of where we're going to start and you know just so everyone doesn't get confused you'll notice that this fill frame over here it has a

little icon right there and what that means is it's just the thumbnail of the actual file it's going to show you exactly um like that file is going to appear in

your figma drafts or within your figma project with this image so you can kind of set that if you want just by clicking a frame if I use this one that doesn't have it I can set that as thumbnail and

so this screen now will have that icon up there so I just have it set as the thumbnail for now okay so let's think about how we're going to animate this

we're going to click on the actual rectangle we are going to to drag to that screen and now we're going to actually go and we're going to do while

hovering and that's all we're going to have to do because as soon as we hover off of this rectangle it's going to go

back to this darker gradient so what we want to happen is when we hover we're going to go to this Frame over here and when we get off of hover we're going to

go back kind of like if you're hovering over a button or hovering over like an input you're basically simulating the the same type of interaction over here so we'll do that we know we're going to

keep it with smart animate we're going to keep the same timing I think that's totally fine let's take a look at what that looks like we're going to press

play we got all our old flows right there and here's Phil okay so remember what we did we did hovering so we're just going to kind of go over

that and as you can tell we have our hover interaction and that's pretty smooth and hovering is pretty powerful when you know working on things like websites and you want to kind of show

that cursor animation like when somebody's about to hover over something so super helpful for dictating how things should be working and definitely when you're working with like developers

engineers and other designers you really want to kind of create these interactions when you're designing interactive elements so that way they know how to implement it but this is kind of how you use hover

to kind of create this different fill experience and you can do anything with hover I can show you very quickly what happens if so what we're going to do is we're actually going to you know combine

the two so I'm going to create a new frame I'm going to press F I'm going to go to phone I'm going to get that one the 11

Pro and I'm just going to drag it here and I'll go back to my design tab so as I zoom in what I'm going to do is I'm just

going to click t for text I'm going to open up text I'm going to say

hover I'm going to go into my text Styles here and I'm just going to click Auto width so it's just going to you know be centered and the width of the

actual text item won't be so large we can change it to something like 18 so it's a little bit larger so that's good and what I like to do here is I'm just

going to create a frame around it so you can do this a couple different ways I'm just going to press F again and I'm going to draw a frame I'm going to

take this Frame here and you can set the fill to whatever you like we'll do and any color like that up to you entirely it's named frame we'll just

call it button and what we're going to do is we're going to take this layer and place it inside the frame so there we go we have our

button and we're going to duplicate that I'm holding down option on MacBook to duplicate it you can do it a couple different ways actually you can click

that frame command c contrl c and then duplicate it by pressing command V or contrl V and it'll automatically create another frame

and then you can modify this button background so I'm going to make it a little bit dark I actually make it black and I'm actually going to make the text

color that I have selected here white so that's ffff and I'll create I'll make the button actually a little bit bigger

so if I hold down shift and make it larger and I'm going to take this text and I'm going to center it in between like that what then what I'm going to do is I'm going to make sure

that this is centered to the actual artboard so I'm going to click this up here in the alignment section so it's centered both vertically and horizontally same with

this one on the right and then I'm going to to create my interaction this is how you can kind of connect the two when I was talking about using both things like

scale and fill so this is an example of using something like scale and fill together click that button create the interaction to the next screen and you

can click smart animate not on click but we're going to do it on Hover again there we go we have it while hovering let's take a quick look at what

that looks like so this is a new flow so we're going to call it test let's go take a look at our

prototype so I'm just going to press play and test is going to be over here already at the very bottom of my list and you can see that now I've created a

little hover interaction on a button so that's kind of how you use fill and also that's how you kind of start to you know combining these things to create some prettyy cool interactions

this one's a little bigger I'm not sure if I would actually use something like this maybe something a little bit more subtle but this is kind of how you do it within figma and this is why figma is pretty pretty powerful when it comes to

keeping your designs and your prototypes all together in one place and this is it hey everyone and welcome back so we're getting used to using figma and

smart anime before we really jump into things because things can get out of hand really quickly if you don't really know how to use them so we talked a lot about some of the examples in terms of the different types of properties that

you can really animate with smart anime let's get into actually applying those two things like you know screens so you can actually see how they can become a little bit more useful when thinking about real life examples before we

actually get into some real life examples so over here we have three different screens that I have designed once again keeping the layer names all

the same so what you see here is that what I want to do actually is I want something to happen where this item in the list if I'm thinking about this as an actual

application it could be like a mail application or something like that but I want to make sure that whatever is on this list over here this item rectangle

17 in particular is going to you know animate the fill and then from there something else is going to happen it's going to appear so you know we're going

to animate a couple different properties here so what I've done is I have these rectangles all placed I have like a little mini navigation at the bottom I

mean feel free to do whatever you like at this point when it comes to experimenting a bit before we kind of get into a little bit more you know detailed interactions

but what I'm going to do is I'm going to click on this rectangle here go back into my prototypes panel whatever the interaction I do or decide upon I'm

going to make sure that it we're going to this screen so what do we have here so we just have onclick and I'm guessing what I'm going to do is if I click on

this The Fill is going to change let me see what's going to happen Okay so so once again I've renamed my flows I have this one named to simple transition

one so this is my prototype and if I click it okay I kind of have just like a little transition going here where we have the rectangle over here just

changing a fill now let's actually do something cool let's select this entire screen I mean you could do anything you'd want it could be something else where it goes back or you need to drag

it but let's just do something automatically so I'm going to take the whole screen and I'm going to do that other trick I'm going to have after delay

happen and so after 300 milliseconds we're going to Smart animate to this next screen which is going to be a 300 millisecond actual

interaction so it's going to be a click something's going to just kind of change briefly and then it's going to move and all these items if you remember correctly now we're kind of applying all

these different properties together these items are going to shift upward word let's take a look cuz it's not just one item now that is actually being

animated you're learning about how to animate other items within your UI to you know have some sort of effect you know around their surrounding elements

this one is called rectangle 18 that's rectangle 18 this one is rectangle 19 and that one is rectangle 19 so now we automatically know that when I select

smart animate we're going to have these items actually slide up so let's take a look at that prototype oh it already did it so now you're at the end of the Prototype what

do you do if I just press R I restart my prototype or you can kind of go throughout the prototype by using your arrow keys but let's kind of go to the

beginning and start this whole transition all over again so I'm going to click on this and there you go we've already created some sort of of mailing thing

you know when you're swiping mail on your phone whether that's like iOS or Android or whatever you're using in terms of a mail client you automatically can like swipe and get rid of something

and then the rest of the pieces kind of jump up let's take a look at that one more time so I've restarted it by pressing R and if I actually click around I can see the hots spot and you

can change that if you'd like you can go up in here in options you can you know change the scale of your prototype so I have it fit

the scale for now and you can kind of show the hotpots if you want so I have it now that it doesn't even show hotspots now this is like a real prototype this is the real

deal okay we click boom pretty beautiful and you can even start to do other things like if you wanted to now

if I select this whole group like we could group this if we wanted but we'd have to group it where the other frames as well but if I group this these rectangles here and I wanted to simulate

something like searching for a new item I can apply like the drag down interaction so I'll show that in a later one right here so that is how you kind

of just start like putting these properties together putting these interactions together to start creating you know some of these uh small little flows for like deleting items and really showcasing how that's supposed to work

and be implemented hey everyone and welcome back so now we're going to be creating something a little bit more complex now I've already kind of designed this for you all and you can go ahead and really start to

dress these designs up if you feel you want to but for the sake of just learning how to get these UI elements together these layers together you know making sense of all this I mean you can

just leave it as is because I think that's kind of the best way to just approach this type of experimentation until you're really ready but we're going to actually get a little bit more into how we can start creating like

maybe even navigation systems so this I have like a little mobile nav over here and let's take a look at that design so I've zoomed in I'm on my design panel I'm on the first frame over here and I'm

just going to click this navigation so I I don't have it grouped or anything you can group it if you'd like you can put it in a frame if you like you know when we're typically creating like navs we're going

to be putting them in frames so you know it's nice and neat but for the the sake of this example we're just going to keep it like this so this is the background

we have this circle this circle this circle as well and we have a little line here so if I were to think about this as

an actual navigation I have my active nav State I have my inactive State my active state is going to have a little square rectangle here if we zoom in it's

kind of like a little line that I've designed so what I want to have happen is I want to make sure I want to make sure that when I

click Like say this nav item I'm going to go to this screen this is going to change to a different fail but also this active nav state is going to move it's

not just going to appear I mean it's up to you entirely in terms of how you would like it to look but for me I wanted to actually slide across and remember what I said like we can throw

all these different types of properties together to create some pretty cool interactions like right now we can see some position that we're going to be you know manipulating here we're going to see

Phill so let's get to it now I also have this other kind of layer over here and I don't want you to really worry about that too much but what I've done is I've

created a square I have another Square on the second screen and I've just up in this right corner here that is where I've modified the radius so that's why it's kind of rounded if I do something

like 20 it'll be less rounded I have it set to 75 so it's kind of like in between a circle and a square so I just have that there I also have

the text at the very top and if you noticed these are all named differently I don't want it to animate I

mean we can go back and do that if we want but I don't want it to animate this is where we can start thinking about actual screen transitions even the text

at the top is named differently I have text 03 text 02 text 01 I have Circle 3

Square 2 and I have square one so first what I'm going to do is I'm going to work on the navigation and some of these pieces are

going to fall into together so I'm going to click prototype so I already have them set for every single screen screen if you look at the nav I have the second one in its active State and I even have the third

one in its active state so let's zoom out a bit so we can see exactly what we're doing here and this is where it's going to maybe start getting a little bit more complex for

you if I click on this little nav state I'm going to drag it to that screen cuz that's the second screen and from here what we can do is we are going to go onclick and we're going to hit smart animate we're going

to keep it really simple so all I want to do is I want to do the same for the second screen and I want to be able to go back and forth so you know click on that it's going to

create that little plus and it's actually going to go back to that screen I have it set to that I have Smart animate and 300 milliseconds so let's take a look at what that looks

like so here we go simple transition 2 is what I have this flow named so if I click it now two things here that I want to

talk about you'll notice that we actually have our nav animating it looks really cool we have that little active State on the bottom it's going back and forth it's really going to tell our

users what's happening it's going to tell them exactly where you are in your active state which is super helpful now this is the second thing if we look at the top here we're going to notice that there really is no animation the only

thing that's going to happen is if you don't have things named the same and you have things that are smart animating it's going to automatically apply a

dissolve effect so these are just going to kind of slowly come in and change it won't actually animate from a square to a rounded Square so there's a couple things we can

do here you know we could rename these the same and have them actually animate but when we're thinking about different screen states that doesn't happen at all

what typically does happen is a new screen comes in so what we're going to do is we're going to go back to our first line we're going to click that one on the screen to go to the second screen

and here's where we can apply a different animation we can do something like move in and what that is actually going to do is it's going to move in everything like from the right or the left it's up to you let's take a look so

I have it set to move in and you can see with that animation there a little bit of a preview there or you can do like push so let's do push so what's going to

happen is you'll notice that it can push from left to right you can have it come in from the left side but it's kind of weird if it would come in from the left side because if

we're thinking about you know how a user moves from left to right in a nav we want the screens to kind of behave similarly because if I click this second option and I have something coming in

from the left if I started from the first option then it's kind of jarring because if you're moving to the right and you have something else coming in from the left it's kind of weird so what we're going to be doing is we're going

to have this item this screen come in from the left as soon as I click it and another thing to notice here is

that it will have an option to Smart animate any matching layers so if we don't click that this is what it's going to look like the whole screen will

transition so if we do that again now that's not what we want what we do want is to to Smart animate those matching layers so let's take a look at

that go back here we go so pretty cool right as soon as we move to this second screen the nav stays in place while the

entire screen over here will shift like you're transitioning to a new screen it's really helpful if you want users to understand where they are in a flow sequence you know that little bit

of motion really helps keep users Minds attached to like this kind of narrative you're trying to create from going left to right right to left Etc so let's kind of do that for the

rest I'm going to click this one on the second screen and I'm going to do push and I'm going to have that one coming in from the left side click the smart animate button so that way when I go

back the first time this is sliding in left so let's take a look so now I have a very strong narrative

between all these these different types of screens and the navigation items we can go back and even start to you know connect all the other screens if I click

this third navigation item and I do the exact same it's going to actually prefill this push animation for me which is super helpful from working on larger prototypes it's going to be coming in

from the right because it's my right to this active link and same thing for this one I'm going to go to back to the first screen and go all the way to that third screen

it's going to have it already pre-filled it's going to Smart animate the nav for me same thing with the second one but this time that's going to come in from the left side and I'm going to

do it for the very first option all the way at the beginning and that is already pre-filled to the one I just selected so it's going to come in from the left side so it's starting to look a bit messy here but

that's totally fine if you're just trying to Showcase a couple of different interactions in like a little little sequence here and that's why using like a good starting point and creating like

a flow you can have multiple pages so you don't have to worry about like 50 different screens being attached which you could still do for larger flows if you're really interested so let's take a look at what

this looks like if we put it all together so now we have everything all linked up you can see those

hotspots super helpful and now we have a little simple animation with our navigation and we have our actual content within the screen swiping in and

out just from the left or the right depending on the location in the nav that you're in so if I'm in the second screen if I click this it should be coming in from the left screen over here

so let's do it again boom if I'm on the very first option any option I click should be coming in through the right so really really great little animation and it just took us couple minutes to put

that that together hey everyone and welcome back we're going to be talking about smart animated again now we're getting into some pretty cool interactions in our

last video we talked about like creating a simple navigation you see it up here that's something that we just created within like 10 minutes and it was super

easy to do now what I really want to do is I want to get into you know doing this and doing this you know putting these kind of designs together this one

we started animating the actual content a bit like having the screen come in but I want to actually create a little bit of a prototype here where we kind of put

those two types of things together just so you can see how an actual scenario of animating content and navigation all these different types of elements and

how they kind of work together and just ways to Showcase your different designs to your developers and and your product team so let's Jump Right In now once again I

have a couple of different things here so let's go back so as you can tell we have this same nav like I said before I mean if you're feeling ambitious and you want to go ahead and create like a nav

with icons you can do that totally up to you it's so easy to get icons these days there's even plugins out there the material design plugin comes to mind you just have to click

plugin material design icons and you can easily just kind of start dragging and dropping icons into your nav and you know making it more real life like and to get this all you

have to do is go to plugins and you can start browsing the plugins in the community okay now let's get into it now what I have here is I have a bunch of

different screens you can design them as you'd like or you can kind of work with me to prototype what we have here after I'm done here it would be really cool to see what you all have put together

maybe it is like this kind of mail application that I'm kind of creating with just blocks maybe it isn't I don't know whatever is going to float your boat what do we have okay so this is our

first screen I just have something called rectangle 16 I have a title okay so the title I just have it

named title all the way across that's fine what I have here is is I have another frame that houses all these

different elements as you can tell they change from screen to screen a bit and what I really want to happen here is I want to be able to simulate what it's like

seeing you know your messages pop up you know deleting a message so what I'm going to do here is if we look at from screen to screen I want to be able to

click this button this nav item I want to be able to transition to the screen right there and then I'm going to have a

different item over here pop up kind of like if you were to search for an item we can have that just kind of come in in your mail app what you would

generally do is you would pull you drag down and then you know it would simulate like a loading bar we're not going to get into you know throwing a loading bar in there or anything like that at least for now

so we're going to have that and then an item is going to pop up we'll be able to swipe on this item you know delete it and then all the other items are going

to jump up and you know interact around this item that we've deleted or is no longer there and all while staying on this one screen so not really a lot of nav work here and to be honest this is

why you know having different flows is so important you don't want to be connecting your whole application together I mean you could do that for maybe client purposes but it could be a real

big headache so let's jump in so what I'm going to do is I'm going to go to my prototype

panel and going to click on this second Circle I'm going to bring it to that screen and I'm just going to have Push once again so I'm going to Smart animate those matching layers like we did in our

last video we can already kind of start seeing what that's going to look like so if you notice that the title is going to stay the exact same so if we wanted to we could just

kind of go back you know click that first nav item drag it there we have a good understanding of how these things are going to start to work so I have my second screen and my messages my first

screen I don't know maybe that's my home screen so back into our designs we're not going to worry too much about going back and forth within the nav so we'll just kind of leave it at that but what I

want to do is I want to select this whole full frame and drag that over and as you can tell the interactions already set on click but I don't want that to

happen I actually want to delay actually you know what I actually not going to do delay I'm going to delete this interaction that I just did and I'm

going to select this whole section and then move it there and I'm going to do an on drag

let's see what that looks like and I'm not going to click push I just want it to Smart animate at this point I'm not worried about like these animations for screen transitions that's usually what these kind of things are for when you have things moving in

sliding in you can see what that kind of looks like that slide in I just wanted to Smart animate whatever is there so let's take a look at what that looks

like so going back click and drag so we can create like a little drag

okay we can even fine-tune that a bit we can make that last a little longer so I have it set to a th000 I'm going to go back and I'm going to press

R to restart and go back so we kind of created a little thing there where this has popped up now we can do that in a couple different

ways like if I delete this interaction that one can actually possibly use like a screen in between where this is below and there's like a little loading bar or

something like that which would be really helpful to kind of dictate what's happening in between all of this rather than just having a harsh you know transition to that next screen where

this just kind of pops up so you can really fine-tune a lot of these interactions something that's probably a little bit more smoother for this demo is to select the whole screen click uh

after delay and we'll just set it to 300 milliseconds and this can be set to 300

300 milliseconds as well so smart animate as well let's take a look at that so if I press R going back to the

starting point so we have something loading in what we can do is now we can

fine-tune that maybe it is 800 maybe this is 800 as well we press R we can start that

again okay that's pretty cool so now we have that item just kind of growing as the list gets pushed down you know I probably just changed that a little bit

that was a pretty long animation so maybe like 500 okay let's move on now what I want to do is I want to slide and delete so I'm going to going to click

this and if you notice so I had these set this one's set to unread this is the new one that that

just kind of popped up but um right here let's go into our Design This is my group two right here I

have group two as well in this one large frame that houses and group two if you notice it's off the screen pretty cool and you're probably

wondering well why is that off the screen and this is how we are going to animate this delete state that I have on the other screen over here what I've

done is I have this group and I'm just going to kind of move it over I have it selected you can kind of see it coming in that's where it is I have it literally off the screen so I'm just going to command Z control Z that right

out of there so you don't see it anymore but I have it there because when I slide this item this is going to be coming in from the right so let's take a look

because it's on this screen if I complete the whole drag like I intended it's going to perfectly slide right

over Okay so let's take a look here perfect okay so I have this interaction when I interact with this it's going to move to this screen but I'm going to select instead of on click

I wanted to select UND drag and I'll have it set to 300 milliseconds I think that's a very good amount of time for typical interaction that's the small and it will say delete let's take

a look at what that looks like so I'm press R go back to the beginning click on that that's going to pop up now we have if I click around you can see that

I have that one I can play with and there you go you can start seeing that now oh wow like we have another hidden State on these cards so if I click

delete maybe if I you know maybe if I drag it on drag and we're going to go back this way

so on drag I wanted to go to this transition screen right here so we can kind of play with it a

bit so we can go back and forth so it's it's the option to delete but if I click Let's see we can make a second interaction so

this is another thing that you're going to learn now is that you can create more than one interaction on a button it can have a hover state it can have a click state it can have a drag State Etc you

can create a bunch of different things so this one's going to have a drag State and a click state so I'm going to have that one I'm going to set that one to on click

and navigate to this transition screen so I've dragged that Arrow right there and same settings I'm just going to keep them simple and there we go if I click on the

Prototype let's see what that looks like so you notice that I can still drag it but as soon as I delete it it's

gone you notice that that delete button is no longer there pretty cool and if you notice this we're going to go back to the main

screen again I want you to notice one thing about this interaction and particular it's pretty jarring even with kind of smart animate so I'm going to go back new message going to pop up I'm

going to slide this is really smooth this dragging interaction is amazing but when I click here what's going to happen is because I've actually deleted this layer if we go back to our design you'll

notice that this layer is not there anymore no longer I've literally deleted it and so because there is no layer there because there's no layer matching that name

nothing's going to Smart enimy it's just going to dissolve so what you could actually do is you can create another screen in between these two and have

that layer either shrink you can have it move off of the screen in any which way you like you can have it decrease in opacity while it's doing that so that

way this creates a little bit less of a jarring experience where you kind have this moving up as it's fading this can kind of hold at the bottom here while

this is animating and then once it's gone then this moves up in the following screen so it's less jarring like this so that was pretty good though I

think this is going to get you ready and going in terms of understanding how to start animating certain elements you know maybe how to create some pretty cool effects of things moving while

you're dragging so now that you have all all these different types of properties that you know how to Smart animate these are going to be like your foundation for smart animating

inigma hey everyone and welcome back so we're going to actually jump into creating our very first project and we're going to keep it super simple and like you saw in some of the other smart

anime examples that we were working on prior you saw that we started working on things like different Navigation items we had different screen you know

transitions we also had different things like interactions within those screens so what we're going to do now is we're going to start putting a lot of this different stuff together and you have this project file too you have the

design you have the actual prototype already linked up and ready to go but I want to kind of teach you a bit about how I came to create this design and also how I decided to start linking it

up and you can follow along with me to see exactly how I did that and if you're feeling really ambitious yourself I'd really like to see your interpretation

of this type of like Photo inspiration app that I've created here you can do something totally different applying some of the same techniques that I'm actually going to apply here just go ahead jump in and don't be scared to

kind of create something pretty cool so let's Jump Right In so what I have here I'm kind of in the design page right now but what I have here is I have a couple

of different types of elements so if I look at my very first screen I have a basic text element that I have here that just says explore I'm creating this

pretty cool photo inspiration app I have a bunch of navigation items here so what I've done is I have a bunch of different text

items and then I have them all in a frame and within that frame I actually have this dot to kind of indicate this

active State similar to what we built in smart animate way before where we had the navigation we had that horizontal line that was moving between different items and and we're going to do

something very similar today as well so if you can tell I'm just going to drag this so you can see

but I have all these different types of items I'm going to press command Z or control C for Windows users to kind of get back to where it was and I have them

all spaced nicely so if I select all of these items I can press command a or control a to select all the items I can even hold down shift and select this

little navigation dot you can see it in the layers panel here I'm going to kind of Select that so it unselects all them and now I just have the text selected

and you can see that they're all spaced 40 pixels apart you can change this to be like 32 if you want it to be closer I'm just going to keep it at 40 keep keep it consistent so that way when you

do animate things like you won't have all these items moving as well that'd be kind of funky looking so I have them

spaced at 40 and then I have the actual Gallery below and what I've done here is just simply created small and larger squares and I've placed images inside if

you notice in the fill there is an image in there and you may be asking well how do you do that and I'm just going to take one of these

items and I'm going to hold down the option key and I'm going to drag it another thing you can do is you can click command C or control C and go off

screen and it'll it'll duplicate it but it's going to be on this screen still so you can just drag it right off so I have that here and I use a plugin you can do

whatever you really want to be honest but the easiest way I found was I have a plugin called unsplash and you can get that from the community plugin page but what it's

going to do is going to pop up that plug-in and I'm just going to search something like portraits and there is a lot of portraits here there a lot of them and so what I'm just going to do is I'm

going to select the actual rectangle and I'm going to select the portrait and it's going to automatically create a fail inside of there so you can turn that off you can

change it at any time it's a really easy way for you to go ahead and you know load images into your designs so I'm just going to delete that by just

clicking and pressing backspace so that's basically what I've done here you can also just kind of Select that fill over here for this image I'm just going to press command C

or control C and I'm going to select another rectangle here and just paste it right in there and now I have multiple layers of fills so that's another way

you can do that I'm just going to undo all that so that's basically how I came to start throwing all these images in here and you can do that really easily as you can tell I have portraits I have

things around nature and even architecture so totally up to you as to what you want to do now the other part I want to talk about was the navigation so

this navigation I'm just going to make a copy of it I'm going to command see command V it and I'll just bring it off the frame so as you can tell this

navigation is built within a frame so I've named it navigation and I have this little active dot that's just called ellipse one for now you may want to call

it something better like active dot totally up to you and I have all these different icons and I did mention it before but I will mention it again another plugin that is super helpful is

material design icons there are a couple different icons based plugins but this is something that I use pretty religiously literally just I'll grab an

icon click it and it's right there ready to use so totally up to you as to how you want to pre-fill these icons but let me just remove that frame that it comes in because they do come in

their own frames like this if you look at the icon it'll say like home and inside there you will have this kind of like little blank background Vector you can get rid of that or not it's totally

up to you and you will actually have the vector and this is where you can kind of you know dictate what the color is in

this case the fill is set to Black you have other fills here this one is 20% of black so the opacity has been modified

on this one to kind of show an inactive State because right now we're just going to stick to the home screen we're not really looking to go back and forth but that is kind of how I came up with this

design here and like I said before you know if you select all of these you can just hold shift while uh selecting so I'm just going to click this one to start off and

I'll hold shift now and I will click this this one and this one and you can tell they are all spaced 56 pixels apart

you can make it 24 pixels probably wouldn't do that but you know you can also do something like this where these are not spaced properly if you select all these

icons you can go up here and distribute horizontal spacing so it's going to keep that spacing

perfectly across all icons depending on the start and the endpoint so that's another way to evenly space your icons out in your navigation so that's kind of

how I came about creating that navigation I'm going to actually delete that right now but totally up to you as to how you want to do it so forgot to mention is if you notice in the actual

layers panel you'll notice that there is fixed and Scrolls and everything on this page is going to scroll except this navigation and that is because I have

the fixed positioning little icon box selected so that means that when I look at this prototype let's take a look because we'll be able to just kind of start it up right

away if I see this prototype everything is going to scroll and what you can do is let's get into if we were just to create like a

starting point we're just going to call that flow one we're going to find that flow there we go okay perfect and we're going to

actually unclick everything and use a device so we'll just use the 11 Pro because that's kind of the screen that I've been designing on so we have the 11 Pro

and as you can tell it's a little bit longer than the typical screen and that's because the content does extend beyond that point so if you see it the content will extend beyond and you can

tell that the navigation is locked in so another different type of thing for you to understand if you want to keep like a

sticky bottom nav so I have that set to fixed if we get into the bottom screens I mean another thing about the navigation as well this is kind of like

the secondary navigation if you can see from screen to screen like this is the nature version and I have all the items moving over until nature is aligned with

that active dot so if I command a or control a and press shift while clicking that dot I'll just unselect it and you can kind

of ensure that you have the right position for the next page in this case it's nature and then and I just kind of changed the images now I do want to

showcase an interaction from going from one page into another and what I have here is this young man waiting for the train that's essentially what I called

it and if I click this image I want to go into this screen where I can you know see this gentleman and I could see some other information about him I can also see

like that navigation now it's no longer on a home screen or anything but this is essentially kind of the interaction I'm trying to build here is going from

showing different transitions with like a subnav but also going into another page that's connected to one of these images and all I've done here is I have

a rectangle like before with that fill of the gentleman I have a new icon here I have some text with some different styles so this

is more of like a paragraph style I have a horizontal rule that is going to to separate these two types of content another title for some similar

photos and that is all so you can modify this file as you like if you have any questions please drop questions for me in Discord or for our community in Discord in relation to you know how do I

build something like this because this is pretty easy super self-explanatory but if I didn't do a good job of explaining here then you know we do have a community to really help out if you do

need it so that is kind of how I designed this whole little mini application hey everyone and welcome back and right now we're going to jump

into actually prototyping a bit with this photo inspiration app that I've kind of provided as a resource I would love to see what you all kind of come up with when it comes to either mimicking

this or even going ahead and creating your own little transition using kind of some of the similar Concepts that we're going to learn today and that is essentially you know applying some of

those different property changes when it comes to uh your designs now for the first part I really want to focus on just this navigation here because that's going to be kind of the bulk of what

we're going to think about now what I have uh like I mentioned in the previous video when I was kind of explaining some of these design assets is that you know I do have the same type of layout so I'm keeping

it super simple I mean you can go ahead and like have this one down here and these kind of Stack up there there totally up to you but for the sake of this example we know we're going to keep

it a little bit more simple and we're just going to really worry about you know changing those fills making sure that animation looks nice and smooth but also kind of making sure that we display

some really great motion when you know a user wants to move throughout these different types of options for this navigation so I'm going to go ahead into

my prototype panel here and if I look at this subnav I have haven't named properly and remember what I said before that you know your subnav

all your layers need to be named exactly the same so we can do a couple of things here if I click nature I can just go there and click

smart animate have that last for 300 milliseconds I think that's fine enough and same thing with this one architecture I'm going to move to the third screen that I already have laid

out for architecture and have it click to Smart animate now there's a couple things here in terms of how you can go about doing this but this is the easiest way we're just going to kind of Base it

off of Click so if we kind of look at this screen we're going to restart it by pressing R if I click that so you know

automatically we're going to kind of see that transition what properties do you think we actually animated here there's actually quite a bit we have position of

the actual uh options the nav options we have the fill or the color of the actual active States we have the fill of the

different types of gallery items we have here and we can even like do something else where we have scale where you know maybe this image like I said gets larger totally up to you if you want to go that

extra mile but we're going to kind of keep it simple and remember what I said about I'm going to go back to my design panel for this but remember what I said about you know creating multiple types of

interactions because sometimes in navs you can use different types so I'm going to select all the actual nav items and you can do that in the layers panel if

you want I can collect technology and hold down shift and click portrait and it'll just select all those items and totally negate that navigation Dot and I

can actually put those in a frame so you can frame the selection and it'll show you the shortcut there or you can group The Selection it's totally up

to you I will group it and we'll just call this nav items and we're going to do the same for

all the other ones so select all the nav items in there we're going to group it on Mac it's going to be command

G so I'm going to call that nav items make sure that it is spelled the same and what do we have here we are going

to I'm doing it in a bunch of different ways here but they all work the same totally up to you in terms of how you want to increase your

workflow so I have them set to nav items and we can actually see if it's going to work so we're going to press R so it still works the way we intended but now we can't go back and and there's a

couple ways you can do this so we can actually say when I drag the nav item so if I go to my prototype panel if I drag here I just want to move to this

screen so on drag you know we're going to keep these same smart animate properties so the animation's going to be smart animate it's going to be 300 milliseconds because you know we're dictating what's going to happen on

screen by the next screen being slightly different in terms of animating those different types of properties or sorry changing those properties so we know that when we drag we're actually going

to have to move things if we look at the Prototype again and we start it from the beginning if I drag you can start seeing

that you know it works the same way in a way so we're just allowing people to have more different types of ways to

navigate so we'll select that nav items group and go over to this screen so if I drag I want you to know also that figma

like we saw before when we were uh you know using drag to animate a slider you can go back and forth and figma automatically will pick up if it will uh you know go back to the previous nav

item or not so in this case we're going to do a drag and if I drag to the left figma will automatically know that architecture will be the next item if

I'm dragging this way going that way if I'm dragging the other way you know dragging right we can even apply another drag so let's take a look at what that could look like so first I want to test

out if the drag to on this screen over here the nav items you know towards architecture works properly so I'm going to restart

so if I drag so it's working properly now I want to be able to drag backwards so I'm going to go on the third screen and we're going to basically do the

exact same thing that we you know applied prior but we're going to go back so architecture if I drag towards the right I want to go back towards nature

so on tap and nope I want to do it on drag so obviously this is now starting to just populate the exact same way so we're just going to keep it we're going to go back there and

we're going to add a new interaction you can even do it up here if you'd like I always find it easier to like click the plus icon and drag it to your screen find it saves a lot of time and it

pre-populates everything for you and that should be it let's take a look so what we have here is we have

being able to actually click a nav item but being able to actually a drag the nav item container that holds all the different nav items to kind of get to the next

screen so if you see now we can you know oops so so this one's not working it's only working in this

scenario but it's not going back let's take a look at what happened see that is because we didn't actually set it to

drag we set it to tap so that is my fault so let's set it to drag if you already did that uh and didn't mess up like I did then yours should be working

so there we go okay now let's take a look at our beautiful prototype we have portrait nature I'm just going to click on architecture boom it's automatically going to slide in and nature

automatically knows if we go this way it knows it can go to Portrait if I let go and drag this way it already knows I can go to

architecture so creating some really smooth animations for this kind of subnav and allowing users to just easily kind of go back and you know just

navigate those options and so that's the first part I really want to focus on I want to really focus on this little interaction here when it comes to

navigating the different types of you know photos that you can explore in this application when I think about different types of applications that you all could design for not even applications even

just uh if I were to think about when you filter on a website I mean the possibilities are endless here so I want you to kind of do your best to think

about where you could apply this type of design pattern you know this kind of subnav where you're filtering through different types of options and you know see what you can

do hey everyone and welcome back now we're back in our photo inspiration app you have this resource you know it may be a little bit different based off of what we've been kind of throwing

together but you know there's a bunch of different options there in terms of prototyping and you know just to kind of get you started as to you know having a good resource to see how to apply

something like this to even something else your own personal project the next part of this series is to really understand well okay I want to create a

nice transition from an image to you know an image's detail screen and what that could possibly look like so what I've designed here is just like an image screen it's going to have the main image

at the top it's going to have some similar photos it's even going to have a like button we'll get into even maybe even creating this little micro interaction and keeping it super simple

at least for now but we're going to actually just get right into it so I'm on my prototype panel and if you notice

within the design file you'll see I have this one named as rectangle 2 I have this one named as rectangle 2 as well so I I'm sure you know exactly

what's going to happen here we're going to have a nice transition from this page to this page with this scaling up because this is now much larger and it's

going to be positioned differently with all the other content you know dissolving in so let's see what that is going to look like hopefully it

works we are going to you know will uh drag over to this next screen so we have the animation set we're going to keep it simple for now we

have it set to 300 milliseconds so on top it's going to navigate to that screen everything should work properly so I'm starting at the beginning by

pressing R and if I click that boom so a couple things did happen here if you notice this dissolved into the screen because this wasn't there before

but also the navigation changed so now we're not on a home screen so we probably if we were thinking about kind of animating backwards we would need to add a back button or something like that but you

know for the sake of this tutorial we're going to keep it here now let's restart it boom now we're here

okay so there's a couple things we can do here you know we can go ahead and we can

even animate this if we like let's do something different what I'm going to do is I'm going to just move this over I'm going to hold shift so it doesn't move

up or down just stays on that line just a line out there I'm going to command C and command V so I have a new screen

here so what I want to do is I want to be able to actually drag back and forth between this container maybe there's more photos so let's take a

look so there's a couple of ways we can do this you know we can go ahead I'm going to hold down option for me and just drag those

two off the screen here you can command C command V that frame if you'd like it's called similar photos and I'm going to open up unsplash

I'm going to search up portraits again and I'm just going to take you know maybe couple of the first

ones and so these are named the exact same so this is rectangle 7 rectangle 9 we'll just call this new photo

one new photo two and we're going to select both of these photos and I'm going to command C them actually you know what I'm going to

just drag this right into this area so it's dragged onto the frame we see similar photos we're going to rename that frame that we were just working on we're going

to call it more photos and we're going to hide it off screen so what you can do is you can just kind of align it you'll

see those red sides and hide it just oops you can just use your arrow keys to hide it until it is actually off the screen so I have it hidden

there I'm actually going to delete this screen that we just created because we don't need it right now but I'm going

to duplicate this one screen again command C command V and manipulate that so I've selected both of these frames

one with the similar photos and one with the more photos and I'm going to move them make sure that that

is in frame so now what we can do here is we're going to click prototype there's a couple ways we can do this I'll show you both ways in terms of

dragging your photos so if I select this whole container called similar photos I'm

going to drag it over to this next screen and if I select UND drag it's just going to you know pre-fill that smart animate animation and I'm going to

do the same for this one I'm going to click uh more photos I'm going to go back left and I'm going to do on drag for the type of interaction and the animation is going

to be smart animated again and I'm just going to leave that and I'm going to go back to our app so now we can come down here and we can start seeing that okay we we have a dragging animation between

photos so this is really helpful if you want to kind of show that it's not just going to be two photos we'll have like four or more but at least for your team to kind of know that they have to kind

of design some sort of Carousel or Implement some sort of carel now you can do this in a variety of ways this is one way to kind of showcase kind of like an animation of two photos just sliding in you can also do it in a way where you

actually can scroll through it and I'll show you that right now so I'm just going to copy this screen down here you can copy and paste

it I'm holding on option and shift and I'm bringing it down here and I'm just going to actually delete all the interactions that have to do with this

screen I'm going to take the more photos that are off screen you can see they're selected and they're off screen I'm going to actually move those into this

Frame and I can delete that other frame called more photos oops there we go let's make sure that we're on our design panel so we have this

Frame now if you see but now it's kind of bound just to these two photos what we can do is we can extend

this Frame and I'm holding command so it doesn't affect anything when it comes to the constraints of these images so I'm holding command while I'm doing that so

command and I'm going to extend it to the Ed edge of the right side and I'm going to extend this one I'm going to leave that one there I'm going to make sure that it's not clipping any content cuz I want content to be able to show

beyond the frame but I want to let figma know that I want to be able to interact with this Frame so right now I have the photos here there's the new photo 2 new

photo one I have the rectangle 9 rectangle 7 and I'm just going to select the frame because I want to be able to see images

flying from the side and I'm going to be able to go to prototype and it'll say overflow scrolling and right now it says no scrolling so you know before I even

start I'm going to create a new one scroll and going call it scroll container I'm going to go into my project I'm going to see our original

flow drag container over here you can even see like it houses the other animations that we came up with but I'm going to go to the scroll container one and here it's just this

page but you know it just has this kind of container and now you'll notice that I can't scroll on it I can't drag it I can't do anything to it now if I do set

it to horizontal scrolling I mean you could do vertical scrolling if you want you can even do horizontal and vertical scrolling but I'm going to send it to horizontal

scrolling you'll see that I can actually create that drag animation within this one single SC screen so it keeps it nice and clean and what people like to

generally do here when it comes to images they like to you know do something like this let me go back to my design panel

and they'll go something like this maybe it's uh8 but you know giving users I'm going to hold command again to shrink

that and if I go back you'll see like a little bit of the next photo so you can you know easily go ahead and change that

and again if I uh move this Frame and I just align it not only you saw how this image just stopped at the very edge and we don't want that we want it to be able

to kind of stop right in the margins here same with this one on the left so we're able to go and go back and forth and this is really nice if you kind of

want somebody to be able to scroll Beyond and and probably the easier interaction that you can create without necessarily going from screen to screen but if you really do want to showcase

like a certain type of uh swiping gesture then it's probably best if you do this and you can kind of really fine tune the swiping but if you want to just kind of

showcase them being able to horizontally scroll then let's go to our next flow this is totally fine so that is how

you kind of create not only that secondary flow from going from an image to a screen but also connecting the two together but also how you can create like two different types of drag

animations one using the actual drag interaction and the other one just creating a frame that houses different types of items off the screen and the selecting horizontal scrolling when you

have the frame selected and while you're on your prototype panel like this hey everyone and welcome back now we're getting into to the last part of

our first project and that is creating a little micro interaction and there's a couple different things that are going to go into this so what I'm going to do is I'm going to press V to kind of get

onto my little cursor here and I'm going to select a couple of these screens start a new flow all together I'm going to collect this one and this one so I've

held down shift while I clicked both of these screens and I'm going to hold down options and you'll see that kind of duplicate

button and I hold down shift and drag it down so there we go I'm going to delete that I mean you can do this any which way you want you can hold down command C and you know go down here and paste it

totally up to you but I'm going to keep this really simple okay so a couple different things we can remove the more photos that we

created cuz we're not going to be worried about anything here in regards to dragging what we really want to focus on actually is this heart we want to

actually create some sort of you know click and popup or something where you know you click this it'll turn to red and maybe we'll get like a little notification here you know in one of my

previous courses what I did was I actually created a full-on micro interaction but that's pretty complex and you honestly don't need to go that entire route you can just keep it really

simple so what I'm going to do is I'm going to if I were to click prototype and click on Save outline right now you can tell that you know they aren't

actually named the same so we just have it you know smart animating like normal the flow is already started automatically it's called a flow to

we'll just call this a micro interaction and micro interactions are these kind of small little interactions on uh you know buttons like

a hover or like a ball bouncing it's a smaller things when you're interacting with these UI elements okay

so I'm going to do the same for this fill version of the heart and I'm going to go back and we'll just take a look at what that looks like so I'm going to go to the micro interaction flow right

here and you know just to scale that up a bit there we go I have this set to fill scale down or up to fill so it's going to fill the entire vertical space

because of the phone so if I were to click that you know you still kind of get a nice animation because it's going to dissolve nicely but what we can do is we can actually extend this a bit so if

I were to shift and hold that and if I were to create like intermittent screen right in the middle let me just command C command V that much more

easier so we can delete this flow because that's what it's going to do it's going to actually create a flow we can just click that minus button cuz that's not where it's going to start now things are looking a little bit more complex what

we're going to do is we're going to create a hover animation so instead of ont we're going to be doing let's go ahead and do like on click cuz it'll be

the same type of Animation so maybe touch down and then this one on touch

up okay and we're going to just modify this one a bit we're going to go into saved outline go into our design panel here cuz what we're going to do is we're going to make sure that this is going to

be a click you'll see something happen here and then it's going to turn into that so what could happen are a couple different things we can just keep this one simple as well so if we go into our

saved outline we'll see that there's nothing really here we can even just take this Vector if we wanted and uh we'll set it to 100 we're actually going to create a

fill for it so now you've seen this fill and what do we got so we'll just keep it white but we're actually going

to H we can do block and you know reduce the fill a bit like that and if I hold down a shift and

option at the same time I can scale that larger so I have it eight pixels around the border and you'll see that it kind of just turns into a square and the

problem is is because this is set to clip content so I'm going to uncp that so what's going to happen is I'm going

to see that click and it's going to go to the next screen let's see and when I unclick this it's going

to just go back to the original so let's kind of see boom so I'm not sure if you caught that

really quickly but if I click you saw that little movement there this is where you want to start adjusting the timing so I have a set to

500 so you'll be able to kind of see that a bit more and you can even do it the other way around if I you know create another

screen here and instead of going directly there I'm going to take that line that was going to the original one and bring it to the next and I'm going to do the

exact same thing I'm literally going to go on top I'm going to go touchdown 300

and touch up it will go 500 and this is where we can just kind of like copy we're going to take that

Vector that we just created right there command C or contrl C go into this saved icon and we can take the exact same vector and paste it in there so it's in

there but now we just have to bring it to the back delete the old one and remember go go to that saved frame and

click clip content so that way you can see beyond so we can see what that looks like right there so now we've created

this kind of little cool like bubbly saved micro interaction and you know you're showcasing this really nice little interaction micro interaction and we

didn't even need to actually you know keep the layer names the same in this instance because the dissolve worked the exact same way as like changing in opacity so we weren't too worried about

that but we were able to kind of create these nice little Shadow to show the user that you know something is happening here we did record your

interaction and saves a lot of confusion in the future now if we were to go back and we were to start to think about

this a little more in detail command C command V I'm me create a copy I just drag it and brought it all the way

down so what we could do here is we could actually you know modify the navigation a bit so if I were to think about like if

I have something saved I want my users to know that they have something saved that's new and they should probably go check it out or if they've added something to the cart like this is another instance where you can kind of go out of the box there and you know

think about where else these could be used if I click add to car I want to to see that pop up somewhere so I'm just going to do the exact same thing here but I'm going to create a circle and the

way to create a circle is to press o the letter o or you can go up here and select ellipse and I'm going to hold shift and

create a circle inside this little saved navigation item so I've literally just created the circle it's in the top right corner of this Frame you can see how

it's placed and I'm going to would just like make it red like that doesn't matter and that's it for that so what we

can do here is we can actually take this navigation we can even copy and paste it in here I'm going to there we go we can even get

rid of this screen if we want so while you're working on different aspects of these micro interactions you could just kind of copy and paste you know these items off screen and work on them individually totally up to you I don't

really like working directly onto a prototype I like to kind of create those items that you know are going to change and then modify them and throw them in there later so you know you can do the

same thing for here so I'm going to command C I'm going to delete that and you know go back and paste this new one

that I just copied over to here and now you can do the exact same thing for here but now like if we really want to showcase like a little type of Animation we can do that pretty easily and you can

do that by you can make this one pixel make this really small make this one pixel by one pixel and just you know

turn it white so you can't see it so when this screen does move to here you're going to see a little ball pop up out of nowhere and that's enough to kind of let

users know that they have something that they should view it brings attention to different parts of the screen and that's where you can really use these different types of principles to bring attention

to where you want the user to be whether that's like checking their mail adding something to a c checking out you know notifications it's really helpful for stuff like that so let's take a look at

what it looks like so we're at the beginning of our micro interaction flow and if I click this we're going to see that circle come behind there and then it's going to transition to the new screen where there is the red icon over

here and we'll see that pop up as well so let's take a look so we have like a little screen like that and it goes away pretty cool I mean one other thing

we can do here is instead of making this white we can actually keep it the same color so I'm going to copy that color code that's over there I just have the actual frame selected and it'll show

show me the selection colors so I'm going to go back to the saved one over here with a small circle and I'm going to go to ffff which is white because that's going to be the

vector you can even just go and select it directly and I'm going to actually make it red but I'm going to press like

zero to ensure that it is zero opacity so we're going to do opacity we have scale there and the color Allin one for that micro interaction so let's see what

that kind of looks like we're going to start again so that's like a little bit better the other one had white coming through so that one's pretty

cool so that's how you can make a little small micro interactions and multiple flows within one larger project right here we've already been able to kind of

dictate you know how you can navigate through this app application different ways that you can view uh similar photos different ways that you can connect the

narrative between screens by keeping the image the same and that's something we're going to get into when we talk about like motion design principles and we also talked about things like micro interactions ways to kind of make those

within figma but also ways that we can you know bring attention to certain areas whether that's the actual click that we saw right there or whether that's seeing something pop up really

quickly at the bottom and that's your first figma smart anime project I hope you all learned a lot and I would really love to see some of your examples

whether that's with the same application here whether that's with a new application go out there experiment before we get into some more complex

things hi everyone and welcome back what we're going to be talking about right now is motion design principles and just to give you a little bit of a primer about the types of principles we're

going to be talking about these are all different principles that we are going to be using in upcoming projects that are really going to help us make sure

motion design is on point for our app or website or whatever we're going to create now we are going to be using all these different principles together in conjunction some of them we can be using

like one or two together we can be using three together some of them are just persistent all the time some of the actual principles we're going to be talking about are

easing offset And Delay parenting transformation value change masking overlay cloning

obscuration Parallax dimensionality and Dolly and zoom so get ready cuz we're going to dive right into

those principles now so obscuration is is another great motion design principle that we're going to get

into now what it is is it allows users to spatially orient themselves in relation to objects or a scene not in the primary visual hierarchy you know if

you could think of uh picturing like a frosted glass door it kind of requires like interaction to open but it's possible to discern you know to some

extent what awaits on the other side you know obscuration Works kind of in the same way it presents users with an interface that calls for interaction while simultaneously revealing a hint of

the screen to follow so if we think about these kind of cards this kind of popup we know that it's going to pop something up or move

us to a new screen and using this kind of technique really helps us see the different options that are available without necessarily leaving this main

screen that is much more important so if you want somebody to you know easily make a quick change this is a really really great way to kind of use motion

or this motion design principle to kind of obscure the background so they can focus on the foreground let's take a look at another example here so here we

have a website and same thing with you know using a pop out menu you know the background is slightly obscured while this kind of allows uh

the users to select a good amount of navigation options without necessarily leaving the main landing page you know this is great for navigation menus passcode screens you know one thing that

comes to mind is when I think of like Apple's UI when you enter a password you know when one of their pop-ups or models comes up a folder or file windows are common examples of this you know it

really helps us as designers to compensate for one single field of view in user experiences so this is really really helpful and you've probably done

this a bunch of times while designing interfaces okay let's get to a pretty popular motion design principle which is called Parallax I'm sure everyone's kind

of heard of what Parallax is it's been pretty popular for years now especially with certain like marketing landing pages but I've also seen it used in really really interesting ways for just

like mobile applications it's really helpful to you know help designers bring awareness to certain parts of the screen and also provide a really really cool

scrolling experience or even swiping experience so let's get right into it Parallax creates spatial hierarchy in the interface when a user Scrolls now

what does that mean you may think let's take a look at a really good website example now Parallax is displayed when two or more UI elements move at the same

time but at different speeds you know the intent here is establishing some sort of hierarchy if we take a look at this example we'll see that as the

mountain moves upward it creates that nice black background for the text to come in and also with the different types of photos we see there you know it spreads them out makes them seem much

more interesting to interact with you know you can do this with UI elements you can do this with things like photos buttons all those different types of elements and it really helps you know

bring the kind of experience together if it's done right you'll see us kind of working through this a bit in some of our projects you know interactive elements can move faster and appear in the

foreground like I mentioned and non-interactive elements can move slower and you know recede into the background it's really useful for that kind of stuff and designers really can use

paralogs to separate immediacy of content from ambient or supportive content like we've seen here we see this type these images kind of pop out because that's thepe type of content we

want the user to interact with especially with like this type of portfolio site or this type of you know photography site let's take a look at another example so here is an example in

terms of you know we kind of see it with the background image on these cards and you know the way it's being used here is it's kind of showing the user what is

high priority in the sense of okay this card needs to be interacted with but it's providing a really really nice visual experience for the user kind of putting that bit of polish that we don't

necessarily actually see on apps these days not only does the user kind of perceive the interface objects is now having some sort of hierarchy beyond that which is kind of like determined in

the visual design that being like if this was a static card but this hierarchy can now be kind of leveraged into having the user grasp the nature of the user experience before you know

being consciously aware of the design and content so this is really really helpful for users and it's really fun to kind of see this be done really well and

uh this is a really great example of it being done well within a mobile experience so the next motion design principle is called dimensionality and

now this is kind of like what we talked about when using like skoric Behavior to really help people create these mental models about how to use an interface and

now this is kind of where dimensionality really comes in because you know we are confined to like a 2d space when we're designing for interfaces we want to kind

of break that mold a bit whenever it seems feasible whenever it should be done so let's get right into that now dimensionality implies that

different sides of a UI element are linked and makes for seamless screen Transitions and it generally presents itself in three ways there's origami

dimensionality floating dimensionality and object dimensionality now it makes it seem as though UI elements have multiple interactive sides just like objects in the real physical

world so let's take a look at like origami we see cards being able to kind of flip in like a 3D type of interaction this is just one example but this behavior is achieved by

making elements appear as if they are kind of affable flippable floating or you know they have some sort of realistic depth in terms of their properties

let's take a look at this example over here this is floating so seeing kind of cards float we do see this kind of a lot especially currently in terms of the type of trends that are happening in UI

design big big Shadows behind cards uh dimensionality really provides a powerful way to kind of overcome that flat land nonlogic you know of user experiences where you know you're

confined to that 2D space now floating dimensionality really helps give interface object objects a spatial origin and a departure you know making

interaction models intuitive and highly narrative let's take a look at another example this is the third type of dimensionality which is called object dimensionality now this one's really

interesting like if we were to think of you know this is now instead of a 2d interface this is kind of like a cube that is being you know rotated over and

over again so it allows us as humans to kind of understand that because we do understand whether it's like a Rubik's Cube or just like a box we understand that it has different types of sides and

this is kind of adhering to that mental model that we already have in our head object dimensionality results in dimensional objects with true depth and

form and this is our last design principle called Dolly and zoom now we see you know different instances of this quite a bit in both mobile and web

design uh and let's get into some of these examples in a second but let me explain what Doan Zoom actually is because it does kind of sound like a film term and is a film term so let's

Jump Right In Dolly and zoom help to preserve continuity and spatial narrative when navigating different elements and scenes you may think what

does that mean Dolly and zoom allows users to really travel through you know UI elements spatially or increase their scale to reveal greater level of details

or more level of details so let's get into what dolly is so we have a couple of examples here Dolly occurs when the user's point

of view gets closer to or further from a UI element you know imagine a person with a camera walking up to a bug or an animal to get a better view so Dolly

really helps you know users look into some of those greater details as you see on the left here we can see they're using it in kind of

like a parallx way but also they're using kind of that Dolly principle where they're zooming in to the next item really interesting same with this

kind of pen you know it's a red insulin pen and you know zooming into these details really helps this kind of website get these little details across

to users that they should know what separates this insulin pen from others in this case let's move on to

Zoom with zoom the user's point of view and the UI element remain fixed but the element increases or decreases in size within the user's screen now imagine

that the person stays put and uses the camera's Zoom feature to make the you know remember we're talking about like uh in terms of Dolly we were talking

about like a user moving closer to an animal or a bug or whatever now imagine that that person stays put and uses the camera zoom feature to make the flower

or the bug or whatever your subject is appear a little bit larger now this is where Zoom comes in now we can see it used here on this application where a

user clicks this and it starts to become part of you know the entire screen they can zoom in and view this mouse in you know larger detail but zoom and Dolly can be used in

conjunction with each other and they're pretty powerful tool for you know getting into the details of a certain object that a user needs to know

about okay so let's talk about the first principle this is called easing this is when an object's Behavior

aligns with a user expectations when temporary events happen so easing really mimics the way

Real World objects accelerate and slow down over time this applies to all you y elements that have motion so if we think about this actual example here we have

these kind of cards that you know slide in when you click one of these options and the way they slide in they kind of slide in and slow down same with these buttons you know they kind of ease in

and out as they expand and move upward so we're thinking about that actual transition now the opposite of easing is called linear motion now linear motion

basic basically UI elements displaying linear motions go from you know stationary meaning like stopping or just not moving to full speed and then full speed to stationary and it's kind of

like instantaneously this type of behavior doesn't really feel natural and it's very jarring for users so that's if just

like a car was moving 0 to 100 just at the same speed like 20 km or 20 mph now if we think about this we can see how these cards like I mentioned you

know they come in quickly and then then they just slowly slowly settle easing crates and reinforces that naturalism and this

creates a sense of continuity when objects behave as users actually expect them to this is another one even the way the map kind of

distorts that route the way this image expands all these different animations are kind of coming in and they have different types of easing apply to them

and they actually help the user you know kind of see that content come in less abruptly and allows them to kind of eat up these different types of pieces of

content much more easily so we'll be using eing a lot as we go through our projects now the next design principle

is called offset And Delay now offside delay really helps to Define you know the relationships and hierarchies of objects when introducing

a new element and or a scene you know when several UI elements move at the same time in speed users really tend to group them together and

they Overlook the possibilities that each element may have its own functionality The Narrative over here in this above example we can see that you

know as this image is uploading the upload is complete you hit conf firm we can see that all these different actions you know are happening at different times and they're even

happening like within different scenes offand delay really helps kind of create that hierarchy between these UI elements that are moving at the same

time and communicates that they are related yet you know they are kind of distinct so let's take a look at here and see how all these different types of items kind of load right in they are

different items that people should be looking at when using this and when they kind of delay as they are presented to the user you know it allows them to

break them up as individual pieces and you know even before users actually register what these objects are you know the designer or you or I you know we've

already communicated you know through motion that the objects are you know somehow separate and this is extremely powerful instead of complete synchronization the timing speed and

spacing of elements are staggered resulting in a subtle like one after another effect and you're going to see this in some other examples that I'm going to show you as well it's a very powerful and it's a very persistent

effect that you'll see in motion a lot and as users use a digital product offend delay really shows them that multiple interaction options will

exist the next motion design principle that we have is called parenting now parenting is another powerful principle that we're going to see a little bit of

parenting creates relationships between spatial and temporary hierarchy when interacting with multiple interface elements you parenting links the

properties of one UI element to the properties of others when a property in the parent element changes the linked properties of the child elements also change so let's take a look at some

examples so you can see what I'm trying to tell you about so like I said you know parenting creates those relationship ship between spatial and temporary hierarchy when interacting

with multiple interface elements so if we think about if a user were to use this slider we're seeing that kind of skew amorphic behavior that we talked about before about why motion is so important it kind of creates these

moments of delight and you know these moments of recognition but more so when we're talking about parenting when the user interacts with the slider they're seeing different child

elements actually change so they are connected but they yet they are different and this is another way that we can kind of use motion to create these types of

relationships here's another one so if I were to kind of slide this open slide it down you see how everything

else like this person's icon here is affected by this parent container so using these types of

principles really helps you know creates relationships between uh UI elements and it establishes a sort of hierarchy it allows multiple elements to communicate

with users at once even though it is like this kind of profile for the user they can see that they can always access it at the top and it's minimized much more easily when

users are looking at other parts of the application so definitely a strong way to reinforce that hierar key and also create different types of interaction patterns this is something something

that I haven't really seen a lot of but it's still something that's really interesting okay this one is a fun principle and I'm sure everyone's kind of seen a transformation at some point

or you already have an understanding in your head of what transformation is going to mean but transformation creates a smooth narrative flow when an object

use changes so if we think about like a check mark turning into an X or if we're thinking about how a button turns into something else once you click check out

in a car I mean we'll go through some examples and I'll teach you how to build those as well in figma but this is really really powerful it happens when

one UI turns into another just to put it simply so let's take a look at this example over here we can definitely see how when somebody is pressing play they can see that maybe some audio is coming

through and it really reinforces the interaction pattern around this little play button this is also really helpful when we think about things like progression

between UI elements like linking something that's like a start to finish like a downloading a file but here's another one as well so

this is kind of like you know creating that download drag and drop you know dragging a file into there we see how that button changes it turns into a loader it actually changes a

couple different times but it does allow the user to understand what they should be doing what's happening during that state change and what happens when it's successful so

it's very very powerful to keep that little type of transformation you know secluded to that one little circle so you don't have to have like different types of statuses popping up or modals

or popups or whatever to kind of you know communicate that there's a state change happening to the user transformation really allows us to

combine separate key moments in the user experience into a seamless and continuous series of events you know if we think about this

the seamlessness results in better user awareness retention for our users meaning more users are going to like keep coming back and follow through

meaning that you know a user will understand what's happening in the next state change and they'll continue forward without any confusion so transformation even though it does

provide some Delight it is really really great for usability so the next design principle we have is called value change now we've seen a bit of value change before in

that slider example where we saw the kind of the different digits move as the slider was moved but value change creates a dynamic and continuous

narrative relationship when value subject changes so the representations of value you know being numerical maybe

text based or even even graphic are really abundant in digital interfaces whether that be like in dashboards or uh

payment based apps even some banking apps so we do see it a lot so like I said products ranging from banking apps you know personal calendars Etc but just

to reiterate it does create that continuous relationship when something changes on screen so let's get right into it so as we see in this form based

app that is talking about different types of values here we can see that when a user actually clicks the slider we have that value change and you know it can be animated in any way that you

deem necessary as long as it's intuitive for the user but you can see over here that it's really helpful to not only have motion included here it helps the

user understand that you know there is parenting as well that we've seen before but we are also seeing that actual State change happen as we move move this

slider so we can directly make that connection without seeing this you know change abruptly and not really understand that what happened how did

the number get all the way to 990,000 or or so on you know this is a pretty simple interaction so that may not be the case but definitely for when like we

see charts loading to kind of like show results changing Etc that kind of stuff is really important like this we kind of see like an overview of how these different

states change over the days of the week we're seeing these numbers build up and this could be used for a variety of reasons one like I mentioned usability is a big one you know understanding that

there is a connection between the two and that you know these digits are moving because it is important for somebody to understand you know how much you know maybe they invoiced or how many hours they actually worked but it's

really nice in terms of delight because you know we get to see these different types of UI elements moving on the screen at once it could allow the user to you know get a sense of progression

as we see here you know the amount of tasks just constantly adding up the amount of dollars invoiced adding up so it it really is great to kind of possibly you know get an email with a

little thing like this that shows that you know from Sunday all the way to Friday you've just been on a roll with the amount of tasks you've been pulling off with the amount of hours you worked and the amount of money that you've

invoiced for so definitely great to reinforce all those different things value change really helps informs

users that certain data is interactive and may be influenced to an extent like I was saying with like charts and you

know maybe calendars Etc when values are basically introduced without motion you know users generally you know they willingness to engage with the data decreases because you know values

sometimes are really hard for us to interpret especially numerical value vales you know making that much more easy to interface with really helps you know with retention and follow through

for our users and our next motion design principle is masking now this one's pretty fun to work with it's actually one of my favorite I like using it and

you'll see me use it in some projects as well so let's get right into what masking actually is masking helps create

continuity of an object or a group when its use is determined by which part of the object or group is seen or hidden

so that may sound pretty complex but let me show you some examples masking is essentially like the Strategic revealing

and concealing of parts of a UI element if we see how in this slider people are using their brand over here to you know create this revealing effect on these

people's faces but this is purely just for brand awareness and it's a pretty cool little animation that they have here sliding in with that kind of like Parallax effect

but more importantly when like a user clicks on a card creating that connection between what's clicked especially like an image and the next screen really helps the user kind of

make the connection and follow through you saw this as one of the examples on the very first screen when I introduced what we were going to talk about emotion design principles but this is where I

see it a lot I see it when there is a card like I said and it basically becomes like the main introduction or main part of the next screen and as you can tell this interaction is incredibly

seamless and the user absolutely knows what's happening they know they're in this current like playlist or album but it's not abrupt at all it just smoothly

flows right in there and as you can see like some other motion design principles that we talked about like easy is happening here we're seeing even some parenting and we're seeing some offset

And Delay when it comes to the way certain elements are reacting once we interface with them you know it really works well with uh detailed visuals like photographs and illustrations those are

kind of the ideal candidates to use for masking and from a usability perspective like I mentioned before you know designers can really Implement masking to show users that they are progressing

through a series of like actual interactions and this really helps you know create like a continuous and seamless user experience now for our next motion

design principle we're going to be talking about overlay overlay is another uh pretty important one as well now overlay simulates the depth by allowing elements to be hidden and revealed

according to what the user actually needs now what does that mean let's take a look at some examples when a user clicks like a modal and we have something that's slides and we are

creating this type of overlay like this blue screen that came in right over here in a 2d space there really is no depth

and UI elements may only move along you know your horizontal and vertical axis which is your x or y axis and overlay you know really creates that kind of

Illusion of like a foreground and a background and that distinction in the 2D space of uis this helps us really

communicate the relationship between the Zed axis you know these position layers and in so doing you know we promote that

there is like some sort of spatial orientation for our users let's take a look at another example over here the same thing when we're kind

of sliding to create that there is this kind of like overlay here and then it disappears now information hierarchy is really important when we're talking about the

consideration when we're using like overlay like for example the first thing users should see like in a note taking app is like a list of their notes then the overlay could be used to unveil like

a secondary option for each message like you see over here this overlay of sliding is showing different options so it's kind of allowing the user to see that this isn't just necessarily like a

2d space there's more options that are off screen depending on how we interact with these different types of elements the next motion design principle we have is called

cloning now cloning helps create strong narratives and relationships when new objects appear and leave so cloning is like a type of motion Behavior wherein

one UI element splits off into others and it's a clever way to highlight important information or interaction options let's take a look at some

examples we can see here when a user clicks on this type of reaction button over here it will pop a different type of popup over here and you can see that

it's cloned this kind of container which makes it incredibly easy for users to select a different type of interaction they would like or option that they

would like now when UI elements materialize within this kind of interface they need a clear point of origin this being you know this little

kind of a button over here and this links to that element already kind of like on screen so this let's see it one more time this pop over here will link to this and it's

easily understood by the user here let's take a look at the next example right here same kind of concept here you know using this as a menu to

pop up several like navigation items if elements simply burst or fade into existence out of nowhere users would lack the context they needed to actually

successfully interact with this button you know using motion really allows the user to understand that these options are connected to this kind of button

over here so it's a really important way for you know us as designers to create like menus or secondary interactions like we saw in this previous example over

here hey everyone and welcome back we are going to be working on some more complex Carousel paging techniques and what I really wanted to do from last

video was to take what we learned about creating like an active State here where we created like an little bit of a focus State and then after we

transition back to the active State I'll show you what it looks like again so we had that little bit of intermittent pause there and then we move to this white State now I wanted to take that a

bit further for you all what happens if this little circle is not just transitioning by like opacity and changing the fill what

happens if this circle is a constant thing it is the active state that moves constantly between all the other circles

so what I'm going to do today is I'm going to show you how to animate this to make it look like it's like a bubbly ball a ball that's bouncing between all these different circles where it's

supposed to be all these different States one thing that I can do though is let you know that we're going to make sure this ball moves between all these states and you know teach you how to

actually animate a little ball and figma and keep it as simple as possible because it will get a little bit complex with the amount of screens we

need and also bring in this secondary state right here as well so what I like to do sometimes just to keep track of colors you can press R to bring up the

rectangle tool it's up there it's already active for me so I'm going to hold down shift and create a couple squares and duplicate those squares so I command C command V and

then do that again okay so we have our three squares and then I'm going to press I to get all the colors I need from these squares so just in case I need to reference them

instead of just going back to the individual layers now one thing I want to do is you know we're going to keep this really simple again let's just do two

because it will get complex pretty quickly so the for the first step what I want to do is let's start on the left side seems just much more natural to

start with number one and we are going to create a duplicate over here perfect that's fine and I want you all all to

try and do this as I am doing it as well just to get into the habit of creating more screens and the habit of animating all these different little elements it could really help you and

just doing it more and more is going to speed up your workflow so let's think about all these different steps it's going to take to get from here to here and when I think about it I want to also think about what I Envision with a ball

that is being animated or thrown from one side to the other cuz I want this ball to go boom boom back and forth when I click I don't want it just slide cuz

I'll do that right now let's actually show you what it looks like if we just create that little animation so if I click on this second button I'm

going to have to make this one the state in between and then if I create another screen I'm going to just drag that

over like that that this can go back to the normal color so and we can just drag that over so that is pretty simple and I'll show you what that's going to look

like so I'm going to go and bring that one over let's do 150 milliseconds and then from here we're

going to do like the after delay that we had in the other video so we have an after delay of 150 we'll just keep it like that for now so if we look

at our second flow so that's pretty cool I mean we have a ball that's actually sliding across now but one thing I don't like about it is it just doesn't feel natural like when I think of a ball and I whip

it against the wall or if I throw it to a person the ball changes sometimes depending on the type of ball it is if it's a squishy ball if it's a ball that

is maybe like a water balloon if I think of about a water balloon in particular it will change its shape as it's being Throne you can think of it as much more

squishier so if I actually go back in my design panel here if I think about this ball when it hits a wall it's going to squish like that when it's when it's

moving really fast it may actually look something like this like squish like moving like this kind of like a torpedo so we're going to have to apply some of

those same types of principles over to this as well so what we're going to do is let's just delete uh these lines here now that you have a good understanding

of what we're looking for so when I click this button maybe that's when we actually you know start our little squishy

movement I have this set to I think that's 18 that's perfect so we have 18 and that's the active State and

then what's going to happen is let me get this going and we can actually just if I hold down

option I can make that move like

this so that's perfect and we are just going to stretch this just a bit like

that so that's kind of where it's going to end up let me grab this color cuz it's still kind of the active state that we're in so it's going to shoot from

here it's going to squish boom fly to the other side we can even make another one over here and if we think about when

a ball does hit a wall it kind of you know shrinks a little bit as well depending on how hard you throw that ball to the wall

so I have it set to 19 i we can do 20 that's totally fine as well so it's going to lose some momentum and then we

have our final State like this we'll just move this over like that so that's kind of what

we're looking for so we have the click State and we have it showing that it's

active like it's focused we clicked it it's given our user enough information as to okay we've actually interacted with it now the ball is starting to wind up for a

throw and it's got its momentum it's going it hits the wall and then boom it hits the wall and then we can actually make

this a little bit smaller like that it hits the wall and then goes back to normal so let's actually link this up so we can see if this is

something that's going to work oops let's remove that starting point okay so we click on this it goes to there 150 let's just keep it at 150 for now and

then this is kind of where we're going to have to do some after delay stuff so we have after delay at 150 after delay again

150 and then I think we can actually shorten it over here in terms of the the time instead of 150 it's 100 because there's not much that's happening in between this

little part and this part all it's doing is this is kind of going back to the normal size of the ball and we're kind of losing the fill over here so the fill is going to be going back to that color

so we don't need a whole 50 extra milliseconds okay so let's take a look at what this looks like now we're going to restart it

oh my goodness that was pretty cool that was on our first try so let's try it again boom and there you go you kind of have like your little animation of a

ball going back and forth now in the Prototype that you have you have going between three let's actually just kind of go back and do it for the other one as well so we have

some good back and forth motion that we can just play with so I'm going to duplicate that frame do the same thing here I'm going to start actually

creating the frames that we want and the great thing about this is now that you've done it once and you've practiced in terms of what you want it to come out

like when it comes to timing the type of Animation then the rest just kind of flows together you don't need to really think too much you're kind of now just

going through the motions of having your designs the way way you like them much more easily so this was

29 width and 18 height so I'm just going to bring that down to 18 height oops that's 16 we can bring that into 18

perfect and let's just go to 29 oops that's a little too long perfect and then let's get back to

this state where it is 18 and then it goes back to the normal height of

24 okay and now we can just kind of Link these together as well so if I click this one that's going to go there so remember it's going to just

automatically take the previous animation and put it there so I had 100 set because that was the last one I did

so just remember to change that after delay Boom 1 millisecond after delay and again and that's perfect and then the

last one is going to be 100 milliseconds just remember that I always find it's incredibly helpful to have a sheet of paper beside me while I'm doing much

more complex things which we'll get into as well but having a sheet of paper beside you really helps you mark down or at least list what you're doing when it comes to animations you can even write

it over here kind of like how I have this little cheat sheet of colors if I don't want to turn them into like styles to reuse but that I find helps so much for

keeping myself sane when I'm trying to keep track of different types of timings okay let's take a look at what we have oh goodness that is beautiful

and that starts to feel a much more exciting than something like this this is really nice and subtle and this is kind of I feel like this is actually

perfect for like 90% of scenarios I mean you could you can make an argument that this is like you know something very extra but I think it's really helpful

when you're thinking about certain types of brands that could really use different types of animations like this if I'm thinking about things like brands that could use something like this I think of things like Facebook and the

way they've implemented something like reactions and the way that pop-up menu pops up the way you hover over an icon a different type of reaction and that

kind of comes up and animates itself so definitely there is usefulness when it comes to animating little things like we did with navigations previously but this

is super cool to be done in figma and it really didn't take us long to kind of get used to how to do it and there is your bow going back and forth and it

adds a little bit polish a little bit of excitement and something that you can definitely apply to a lot of different designs when it comes to paging and or carousels or even other elements you

could probably think about like buttons and forms so this is great I would love to see what you all come up with when it comes

to using paging or carousels or this type of real life animation because it is certainly possible in figma hey everyone and welcome back we

are going to get into some fun stuff we're going to start putting together a lot of the different things that we learned about I know we've been kind of doing that already but we learned about

things like carels and paging and swiping and dragging a little bit but I actually want to really focus in on like swiping and those types of gestures when it comes to looking through maybe

different images or even like dragging something across like a column when I think of things like Trello or one of those atlassian

products like jira so one thing I really want to get into and we're going to do this together we're going to actually design together a little bit here I want to actually create like a card and when I think about a card I think about like

an Airbnb card or something like that like a card for a rental whatever rental site you use but let's go ahead and actually do that right now so I have a

couple of images over here I know it's a bit messy so it's not looking the greatest but what I want to do is I actually want to piece these images

together so we can do that pretty easily just by kind of throwing them together and your design file is already going to be ready for you you'll be able to see what the final product looks like

if you want to move ahead of bit but I want to actually show you exactly you know the design process that went into this so I have all these images together

perfectly I'm just going to put them in a frame so you can right click and go into frame selection so that's perfect we can call this images it may

be named something slightly different for you so I have it set to Auto layout so nothing's going to change in regards to the image placement they're going to

be perfectly side by side that's kind of like the step one we got some images okay now I have a couple other UI elements here I have that Carousel that

you've kind of seen me use in the past where we have like the the active Dot and we're not going to really put too much thought into you know having like a

state in between to let users know they clicked anything especially when we're dealing with smaller cards like this the user won't even be able to see

that most of the time so we just want to give them a little bit of an understanding in terms of okay this is how it's going to be

placed and this is how it's going to look it's just going to be there to give them an understanding of which image they are in the grand scheme of all the images so we can do

this a little bit differently here we can actually just select everything we're just going to select everything and we're going to frame this as well and we can you know manipulate

that frame if we want to so what I'm going to do is I'm actually just going to bring this down and I'm going to kind of put this in the right corner

so you can I'm using the arrow keys to do this and I like to just do like a shift and a shift so it gives me a nice nudge and you know just for everyone

that is pretty interested in some of these other things like the amounts that you move with and shift with you can

find that in this area here in your preferences if you take a look at your nudge amount I have it set to 10 you can have it set to anything and that

basically means that whenever you move it with shift you will move 10 pixels so some people like to have it like at four

or 8 or 16 depending on the pixel points that you're moving by I generally have it set to eight but that's totally fine

for here so let's move this one so these are my Carousel dots and

that's kind of like the center of this area now one thing we do want to do is we want to make sure so I'm going to

hold command while I'm moving this so the other elements inside don't get squished because if you can see everything's moving with the top or

bottom and that's because if I click on the images they have the constraint set to top and left so we are going to just

hold the command while we do this and go right to the top and we're going to clip this content CU we're not going to show all the images we just want to show the

first one because we want to be able to actually swipe between all these images as well so I'm going to make sure that's

centered which it is and I'm going to go all the way down so now it's at the bottom and I'll just press 10 I mean you

can do 20 10 is fine and here we can go ahead and maybe change the opacity bit and I think that is going to be fine

for now it's going to look better on darker Pages it's just because this image is a little bit bright so that's fine okay so we have we'll just call

this Carousel container like I said yours may be Main named differently I totally want you guys all to try your

best and actually create this with me as well so it doesn't even need to be something like a home like website thing like a A

realtor.ca or Zillow or apartments.com

realtor.ca or Zillow or apartments.com or whatever you're using it can be anything you want so right now I have the price and we can just go like 28

pixels maybe that's a little too big though 24 doesn't matter make that nice and bold medium maybe okay so we'll just

keep that there and don't worry about having these things perfectly done perfect so we'll keep that so we'll just say

like two beds and we'll create another one so I'm going to command C command V and do that and we'll do like one

bath and then do it we'll just drag a duplicate over and we'll just make up amount of square footage for a home this home is

actually pretty large it looks like so and then I'm going to actually combine all these into a frame so I'm just going to use my shortcut to do that

which is option command G but you can right click and and do that yourself as well so I'm going to have them all in the frame and I'll just call

this details I think details is a perfect name and auto layout perfect we have an auto layout frame and we are

just going to make sure that they have the spacing that we like so I think 12 pixels is totally fine and then we are

going to need to create maybe another option here for the address so regular maybe even light is

fine maybe set to 75% maybe that's a little too thin maybe we set this to 50 that's better okay so another thing you can do is you can use

a plug-in I like to use this one called content re really helpful for filling in content so I can just literally click on

my text layer and go into like a US full address and it will automatically fill it like it should have let's see that again let me

see I don't know why it's doing that there we go so we have a full address so we

have 4517 Washington AV Avenue Manchester Kentucky okay and now what I'm going to do is I'm actually going to select all

of these different elements I'm going to group them together into a frame so I did option G and I'm going to just call this house

details so to easily rename you can do controlr command R while you're on top of the layer here and here we can make this an auto

layer again and this is going to really help us with things like responsiveness if you're really interested in that so we can even group these ones

into another frame if we want the spacing to be a certain sizing in between these text layers because it is looking a little off so we can do that

we going to do auto LED as well and we can just drop that to like eight can even do even more we can do four so the first one with all of these will be

12 perfect and that's looking beautiful okay and we just got to make sure that everything is filling the

container this is something I like to do as well because the container is only going to be able to you know be

responsive if we do that we don't have to worry about it being you know too responsive when it comes to this secondary layer of information but it

definitely helps okay now let's get into making this a background so we have background color that's totally fine let's think about

the spacing around I think 16 pixels is perfect as well so we have it over here lined up perfectly and now we can actually take

the carousel container and the house details so we have the house details together and we can group those in a frame and you're probably thinking why

are there so many frames and this is just to make sure that everything is really neat and this is something I do a lot of I'm personally passionate about stuff

like that making sure that everything is in its place you know maybe 10 pixels that's it's looking beautiful so

there's kind of our little listing here and we can even do autolayout if we want so that's perfect if we do fill the

container and this one is fill the container we can start to actually create a beautiful

experience oops if this one's top and right already and this is the image

like that and let's take a look so we've created this beautiful container here okay so I

think this is what we're going to roll with when it comes to the design super simple and it's going to be perfect

for actually just animating in general let's just tighten up some of these things here make them look as nice as we possibly can get them to look in the short amount

of time that we have I think that's actually looking really nice I'm not going to lie love it maybe even a little bit

less maybe 40 okay I'm a stickler for the details okay so now we've designed This Together pretty quickly we've gone ahead made sure that

all our frames are perfectly together you know we have a good structure you can tell we have a really nice structure within our layers so that's going to be really helpful not just for prototyping but also for

Designing in the future you want to keep all your layers as nice as possible and as neat as possible especially when you name them as well so I've had some of these already named but this is going to

really help you move quicker when you design and in our next video we're actually going to go through dragging some of these images and move moving the carousel dot but also getting the images

to come in and swipe as well so it's going to be really helpful for you if you want to create something like this or if you're thinking about creating another Carousel where you click and

cause the image to move so stay tuned maybe show me what you've actually come up with for your design and what you plan to animate I would love to see it

and this is our design for dragging hey everyone and welcome back now we just just finished designing this beautiful listing card it's amazing and

if you did the same thing as me you're going to have a beautiful listing card as well now you could have totally done your own thing it doesn't matter we are just going to be worried about whether

it's something we can swipe whether it's something that we can drag it doesn't matter now this is what we've designed and you're going to have your own file

as well so if you want to move ahead and take a look what that looks like that's totally fine we're just going to kind of finish off by adding a little bit of a drop shadow

here so this is a little little bit of a drop shadow keeps things really

subtle okay so that looks like a legit card beautiful now let's just make sure everything else is in order okay now

what we have here is a nice card and and what we want to do actually is we want to make sure that when we swipe from side to side or drag from side to side we are going to have another image and

the way to do that is to literally move these images over little by little so we can I'm holding shift so it's moving a lot quicker if you were

just to use the Arrow when I get to the edge there we go we have our second screen and we're going to do that over and over again until we have all five

images ready to go so let's take a look at these Carousel dots so that's 100% And we need to make sure that one's a

100 so I'm going to go ahead and do that this one I will set to 40 like the other in octave States and that is essentially

all we're going to do I know it may seem pretty complex sometimes but when it comes to you know creating these different types of prototypes you're not

going to be be spending hours on this unless you're going for multiple larger prototypes which could be quite the hassle I'll show you what that looks like don't

worry but it really sometimes does help to create those larger prototypes because if you want somebody to see what the larger picture looks like especially

when it comes to things like onboarding flows or just Flows In general you want to be able to

create that whole experience for them remember to click directly on the frame cuz all you'll end up doing like I just did was duplicate the frame inside

and that's not going to help anyone so I'm just going to kind of go through this little by little okay so I have the carousels done for every single screen but I don't have the images so we're

going to do that really quickly so I have my image container and I'm literally holding down shift and the arrow keys as I shift the whole container over and when I get close I'm just going to make sure that that's

aligned like so super easy again we just did this image and the way I found these images

was I just literally went on unsplash that plugin so I'll show you what that plugin looks like once again so I literally went and used this plug-in and I grabbed like photos I

searched the back bathroom so I search bathroom and I drag that photo or those photos into my working area so let's do that again we

are going to take images perfect keep on going we are looking for the last one beautiful let's

make sure that is aligned o there we go now it's aligned okay so now we can actually get to animating and this is where it gets

it could get a little complex here cuz we want to make sure that we're not only animating the image to go left to right we got to even think about going back

and forth so I'm going to actually click on the images container you can see when I highlight it it highlights all the other exactly named

containers in my other frames so I'm just going to actually create a swipe gesture over there so on drag

we're going to actually do drag because drag is the same as swiping generally so navigate to listing we're going to just say smart anime that is totally

fine we are going to actually do the next one as well we're going to take the image container and we're going to bring it down and on drag same thing thing

we're going to keep this the same throughout I want you all to just get used to creating some beautiful prototypes before we even jump into you

know fine-tuning some of those things and for the most part you don't really need to kind of jump in there a

lot unless you really are a stickler for the details but I find that there are diminishing returns when working on

stuff like that so we got images over here as well we are going to slide that back up on drag and we're going to just do the exact same thing that we

did before we're going to just now move back in the opposite direction and you know ensure that they all have the same types

of settings when it comes to the the interaction that we're trying to create here so hopefully this will work on the first try sometimes it just

doesn't happen like that but it's okay it's all about experimenting and getting used to figma so what do we have here I just want to make sure that that is on

the images container and not on the carousel because you don't want to drag these Carousel dots that's kind of awkward okay let's take a look at what

we created let's Press Play wait for that to load up we are actually going to make sure this is a little bit bigger that is huge and that's fine so we're going to make sure that's

bigger and now we can create this beautiful beautiful so it's working better when

it's smaller maybe because the image sizes but there you go we've created a beautiful listing card and it didn't take us much time to actually do that we

were able to easily create a nice little dragging interaction between images and you can do this for like simulating what

it would be like on a mobile experience not even a mobile experience you can even do something where when somebody hovers we get like different arrows and then they have to

click the arrows because on desktop generally we don't swipe while we click like this we would actually just click into an arrow and then that would cause

the movement but it would probably be when you hover over the card to do that so we've done a pretty good job of

simulating a mobile experience for drag on imagery and you can do this for homes you can do this for like maybe even product cards is another thing that I'm thinking

about but totally useful for lot of different applications I would love to see what everyone else came up with when it comes to your prototype and your

design hey everyone and welcome back so what we just created not too long ago was this dragging type of prototype and

let's just go in to take another look on what that came out to look like now we just were focusing on you know creating these nice little transitions between

images in a a gallery for a home and this looked really nice and I think we were all pretty happy with how this turned out

now that's one way to kind of employ dragging but when I'm thinking about like how these work within a Mobile screen I'm also thinking about another

way that you drag as a user you can even call it scrolling but this is more so dragging or swiping so I have a couple of different

items over here on the right side and I'm going to actually create a dragging listing type of prototype and we're actually not going to even need to you

know scroll through anything per se or connect anything per se so we're actually just going to jump right in so if we look up here we can see that we have a search container that I put

together really easy I can break down right now how I created it so I did create a frame and inside the frame I have my regular search icon so I got

that search icon once again using the material design icons plugin which is super helpful for just throwing icons in designs really quickly I also went ahead

and just threw some text in there I have it set to fill container I also have this set to just kind of fixed so they're going to sit together in this Auto layout container that is housing

everything so it does have the fill and it does show you you that it's only going to be 8 pixels in between items within so that's perfect and this is

going to be set to left and right so this isn't an auto layout container this is just a regular

container that we have here so we're just going to leave that as is and below here we have the save search button which is also in a frame if you notice I

like using frames because it does keep things together so we have the save search text and the bookmark icon and same thing for the other ones sort and

filter so I just put these together to make things look really nice and we're just going to place that in

there oops it didn't actually get put in there let a backup bit so I'm going to just place that there we go now we are inside the

frame okay and we'll move move that right to the very top if you notice I do have an outline on it that is the stroke over here so I just have a 5% stroke

it's one pixels in terms of the width of the stroke so it's one pixel that's just going to be there at the top and then I have my nav so I mean

we've built navs quite a bit already and navs they're pretty easy to create to be honest all you need are icons like I

said utilize material design icons for your designs cuz that's going to really really help you I'm just cleaning up over here on the side so I can see

exactly what I am working with so we have that perfect and that is set up with auto layout once again so I have Auto

layout here you'll see auto and mix and that's because there's space in between I have 40 pixels on the left side side I have 40 pixels on the right side and 12 pixels on the top and 28 pixels on the

bottom and if we go into each individual nav item I do have them also set up with auto layout once again so this frame has the

text below and it has the icon and if you look at the difference between this Frame and you know the the container housing everything this is set to you

know do rows from top to bottom and this one is set to columns from left to right or right to left whichever way so that is perfect it's looking good

and now we have our listings so this is basically the same design that we created over here the only difference that we have here is that we don't have multiple images we just have one image

so we're not worried about right now at least creating like a dragging slideshow or anything like that we're just going to keep these together like that because that's not what we're animating so so

here we go we have the main listings frame and we're going to drag

that in here and I find that the best way to kind of place it I'm going to turn on my grid this is an auto layout frame that's

housing all of these different cards you can see that they're spaced by 16 pixels and the cards themselves if I select

them all so I'm going to do command a or control a if you set them to fill the container now we can shrink them as such and this is why I like to kind of use

fill container and you know use fill container even for these smaller pieces so you'll notice that I haven't even really changed anything here I've basically just kept the content the same

aside from the imagery so when you're actually working on a product that's good to you know not actually keep the content the same you want to diversify it a bit make it seem more lifelike so

we're just going to send that one to the back so that's what it's like in the back and we'll push that to the very top there

perfect okay what we're going to do here is we are just going to get this started and the problem with this is is here I will

show you we're going to actually start a flow here and we're just going to call this one listing now you already have these designs ready to go I am going to actually just teach you how to kind of

build this like I have and layer some of your layers properly for actual prototypes so one thing we haven't done here is we haven't selected a device and

we are going to go with the pro I think that's going to work out beautifully and so let's press play we're not interested in that one we're

interested in this one so you notice that we have an issue here so everything's working pretty much as expected except

this won't move up no matter what I do and I will teach you how to fix that so this is perfect because we'll set this to a fixed position at the top so it's

not going to actually move this one we can set to a fixed position at the bottom so there's two ways we can do this and I'm going to show you how to do

that so the easy way we can just go like this and that is going to stretch perfectly

so we'll just leave it like that and that's the first option that we can do so this

is so I would call this a normal scroll and we'll just call this a secondary scroll I mean you can do either or totally

it's honestly really easy and you don't really need to worry about how that kind of looks but it's going to be perfect so

we'll just do vertical scrolling within this container which is perfect so as you can tell there's one main difference and the main difference is we can either

have our whole screen extend out and then set these as fixed or you can and keep the screen as it's supposed to be which is 812 pixels

for the iPhone 11 and shorten this container and put vertical scrolling and when you have an auto layo container like this you can just keep on adding cards like so over and over again so you

don't even need to worry about you know seeing those cards so I'll show you what that looks like so so this is what it's going to look

like and you can really you know simulate what it's going to feel like even with a little bit of a bounce so this is really nice if you

want to showcase to your Dev team how these different types of elements work together you know staying fixed to the

top and fixed to the bottom while the user Scrolls between different types of listings or you can do it this way and this way

is still kind of not working properly what you would do in this case let's see if we can get that to work there we

go see it's still performs as expected so totally up to you if you're looking to really clean up your designs then you probably want to go this route but if you want to just make sure that you can

see all the content that's scrollable then you can just extend the height of your Mobile screen or your desktop screen to see everything which is really helpful for

you know visualizing all these different listings but remember if you're going to do that turn the Overflow scrolling off

on this type of container set this container to fixed over here so fixed position when scrolling and same thing over here fix position when scrolling

these ones don't actually need it because you you have it set to the actual height of the screen so you can see it on this prototype again that they're just going to work no matter

what and that's how you create this kind of dragging swiping movement and interaction within a Mobile screen when you're trying to

work with longer screens and the same kind of works for desktop as well but that's more of a scrolling interaction so this is kind of how you set up your

different elements hey everyone and welcome back we're going to be talking about dragging and dragging drop is another big topic like

literally dragging something over from one thing to the other you probably seen it with uploading files you've definitely seen it in different types of

like product management tools I would say Trello is a good example of being able to like drag and drop one card to the other and that's kind of what I've created here you have the designs for

this as well well so you can come and take a look with me as to how I created these designs and how I broke them down same thing I'm using a lot of Auto

layout because I love to make sure that my designs are as responsive as possible everything in here is set to Auto layout as well and I've done a pretty good job

I think thus far breaking down how I've been doing it like at the top again it's set to an auto layout with space in between we have the

different icon here the text you can do this any which way you like but what I wanted to really

showcase was how do I drag one card over to the next screen or the next column and I will show you what I did and how I kind of prepared this file and I'll go

through every little step as to how to connect it so let's Jump Right In so as you can tell I have a bunch of different screens here here and they all work

together to kind of simulate this dragging and dropping experience now when I think of something being clicked when I pick it up what

happens is it starts to kind of look like this where the card can be actually tilted so if you notice this was an auto

layo container but I had to remove it because if you do have it as an auto container they will stack automatically so this this is just a regular frame now we're not worried about

responsiveness at all we're just really focused on making sure that our designs are going to perform in the Prototype the way we want them to and this is more so for you to see how that interaction

could play out it's also for development to understand how that interaction plays out and if you want to showcase some pretty cool interactions for your portfolio so this type of stuff is

really going to help you bring your designs to life so drag and drop is always been a pretty hard thing to prototype in figma and here is how

you're going to do it so I'm going to run through these different states so this is the state of when you pick it up so what I've done here is just rotated

it so people understand that this has been picked up and I've added a little bit more of a drop shadow here you can tell that there wasn't really much of a

drop shadow before so definitely enhancing the feeling that it's picked up and there is something here like a physical thing even though we are in the

2D digital realm and then I have this background behind it just to Showcase that this is where the card

used to be so you can see that background very briefly and the the way I made this background was I literally just created a fill so it is its own

frame again you don't need to make this a frame you could use a regular rectangle totally up to you but I made the fill a certain color and then I did

a dotted stroke and the way to do that is just to click on these Advanced options here and you can actually set the style to

dashed it could be solid anything you like so that is kind of how I created this little scenario and from here we going to Pro

type the actual movement from one side to the other so we're going to make sure that this actual card is going to move from so it's a bug fix card it's going

to move from in progress to done and dun is also going to have this little dotted background like it's being placed

there so super nice just kind of going back cuz I did switch the rotation a bit we just want to keep that in line with what we have cuz remember remember with smart anime it's going to pick up

everything and if you notice on my layers they are named specifically to the type of card I'm moving so this one in this instance is called card drag so we don't want to name it card because

all the other ones are named card especially for our prototypes purposes we just want to kind of distinguish between all of them as much as possible at

least okay so as we move over we are going to see that that is placed into here so it kind of locks in this is

still kind of coming to a close and it's still in progress and that's when it closes and it's done at the same time so there are in total five screens and

realistically all you're doing here is you are actually just duplicating the same screen and making some you know fine adjustments from screen to screen so make sure that when you're doing

these types of things you're only showcasing one or two things that are actually being interacted with and then

focusing on a larger interactions maybe elsewhere you want to kind of split this up so it's not too crazy when it comes to connecting them but anyways

let's jump into actually prototyping this so I'm going to click on that card and I'm going to click that plus button and drag it to the other screen and on here what we're going to do is we're

actually going to go and press Mouse down so that is going to be smart animate we could leave it like that I

think that's totally fine you know right now I'm just I really want to get it to a good point and then we can start fiddling around with the different types

of values and then we're going to do on drag so that's perfect so we're going to drag it over so we can actually start to see what this is going to look like like let's

press play okay we're going to press R to restart it so there's the

click oh and there we go we we've already started that whole sequence and it's starting to look actually really

nice to be honest I really like how it's kind of coming together just already we're starting to see that little you

know movement between all the different states there so let's take a look again okay so we have Mouse down and then

drag okay I like that let's go back to our screen and from here all we're going to do is now now the interaction is kind of

out of our hands so we are going to just do after delay and we can drop that

in and this can be around like literally 1 millisecond because it's dropping in so it could be very quick and then from here we can actually extend

that to like maybe 200 milliseconds and we're going to have to select after delay as well so

let's take a look at what is happening here okay so perfect let's go back because that happened a little quickly so we have the

mouse down okay so this is the problem here now we have the on drag on everything so we're going to going to remove that for a second and we're going to go back to

our card and then use on drag and that's why it was happening so quickly so let's do that again okay perfect I like it let's

see so you can see as soon as I hover over this area then this card can be placed so you can actually start

creating this dragging experience that looks pretty lifelike and what we can do here is we

can click on this card and go back and on Mouse up we can create that

so perfect so the problem with this is now it's not triggering the actual Mouse up as soon as I start dragging it so we can

just do a mouse leave and maybe that will work let's try it again okay that's going to work for us as well we can even

attach another one so you can go like that and we can do on Mouse up same thing so that way we have more ways to

interact with this card boom and that's basically how you create a pretty quick drag and drop interaction and you can do that easily

not even with these columns I know this is a little bit more complex because it looks like more of a real life scenario but all you really need is to have one

item on this side and a way for the final item AKA this item here to be on this side and the dragging motion literally just kind of pre-fills the

animation and that's how you create a drag and drop interaction within figma hey everyone and welcome back we are going to be working on some

beautiful micro interactions now we're going to start with this little file uploader that I've started working on you have a bunch of

resources you can see how this one turns out if you'd like you can see even the more complex version which I'll show you how I came to animate but I want to

start with this one right here now as you can tell this is my design file and I'm going to go through it a bit with you just so you kind of understand what I was thinking as I was

building this now I have my detail in the top section here in a frame I just have my controls and I have just a regular

control there this is for the more complex version and I've kind of just left them in there as hidden icons and you can use

them if you'd like I have my text on the left and I have my loader background which is g to load what else do I have here I have the

actual loader so this is this beautiful stick all that is is essentially just a stroke

you can see it over here it's a one pixel stroke so how do we actually get this working now there's a couple of ways I'm going to show you the very

quick way to get this working and then after I will show you how to animate a much more complex version of this because it does get complex if you want

to start showing things like percentages and other controls so let's take a look so the first thing I'm going to do is I'm going to make another

duplicate right here I'm going to make sure that I have nothing prototype there perfect so I'm going to make that duplicate right there and we are going to

stop and Shrink this this as much as possible so we've shrunk it like that we're actually going to do the exact same for this loader line that we

have we'll just hold shift while we bring it all the way back perfect that looks

great and just so because we do have this little bit that we can see here that's kind of annoying and the thing is you can't create like a zero pixel

width shape and unfortunately that's just kind of one of the downfalls but we can kind of hack it together a bit and what I like to do is I like to just kind of Select both and I'll you've seen me

do this before just make it so that they both have a zero opacity

and so the way we link the two is we go into my prototype we grab we're going to want this to actually

just start right away so we'll just do one smart animate and one millisecond on the after delay and we'll do the exact same over

here we are going to link this together and this is where the magic is going to happen now we can set this

for 4 seconds or 4,000 milliseconds and we will have our loader go all the way to the end so that is the simple way to

create a loader let's take a look at how it looks let's bring that up in scale bring the sidebar in here so that's how you create a file

loader and the thing is when I actually think about a file loader it's not about actually creating something that looks exactly like how we expect an animation to happen so right now we have on ease

out you can even just set it to linear like I just did and watch that is more in relation to what we expect when something is loading it's going to just

be a straight line it's not going to come in Faster it's not going to come in slower it's going to just go from from 0

to 100% really quickly let's take a look one more time beautiful so if you're designing along

with me or prototyping along with me this is really easy to do and you can showcase this pretty easily to your team and to some clients on some interactions

that you're really thinking through and in our next video we're actually going to go in and look at how I made a more complex version of this hi

everyone and welcome back now we just got back from designing and putting together a very quick prototype of a loader but you may be asking yourself

well how do I make this a little bit more complex and you can do that pretty easily I have a couple of prototypes

over here and and they all vary in complexity so I'm just going to name

these so I remember what they are and so you can

easily see what they are as well and let's actually take a look at all of our different uploaders so I want you

just to take a look at this we have the completed uploader and this is essentially the exact same thing that I have here now the only difference is I'm going to have

a completion popup and the way I did that was pretty simple now if we look at the details and the controls we have like nothing here

and then we have the check that is over here on the side and it is is

hidden so we do have this check that is hidden you see it's 0 percentage and it is smaller it's 16 by 16 and then I have

it growing over here to 32x32 and then back to 16x 16 and then settling at 20 so we have that kind of bouncing effect

that's why you have so many screens it's just to kind of handle this uploaded state where we kind of finalize cuz what

I have here as well is I have this dropping down to Center itself right in the middle to show the completed state so let's actually take a look at what that looks

like and you'll be able to see this as well you should have these files so we have the simple uploader and that's the one we just

did this is the new one so something a little bit more complex all we're adding in this section is you know we're adding that we've uploaded three files and we have a check

mark so that's just to kind of show that hey you have finalized your interaction here you're done here you've uploaded whatever you need to upload let's give

you some user feedback essentially let's give you some feedback and that you can go off and do whatever else you need to do whether that's uploading new files and whatnot now let's take a look at

something a little bit more complex now remember when I talked about some of these controls I had you can do the same thing here you can open up these

controls I have a counter I have a pause and I have a close button and then I have them scaling to

9% 10% 19 20 29 30 39 40 and you may be asking well well

why are you breaking it up between numbers and that's because the way I've placed the numbers so let's go into some of these details because this is where

it gets pretty complex and it would take me a very long time to go through every little thing so I have a frame here set up called counter and inside the frame I have a

percentage layer I have a 10 layer and a ones layer you may be thinking why do you have a 10

layer and a ones layer so our ones layer will handle everything from 1 to 9 or the first number then we have our 10 layer right

after that so let's take a look we we still have the we're still in the ones over here so all let's do doing is it's basically using this type of position to

make a counter effect so I've have that scaled up like 10 times because if we think about we have to go all the way to

100 so let me actually pull that layer out so you can take a look at it I have a 1 to n 1 to zero actually because if we get to like 70 or 8 we need to be

able to show the zero at the end in the one's place so we have one to zero we have 1 2

3 4 5 six we have it nine times so we have that repeated and this

is where these types of smart animate animations get really complex and you know I would say border lining that they

take a long long time so here we go we have the Tens place as well so we only do it once so we'll do 10% and we'll do

20% and we'll switch it only when we get to the next section so we have 10% we're going to 19 and from here we'll make the quick switch to 20% and you can see that

in the Prototype as well so from 0 to 9 in this kind of movement we have it set to 500 milliseconds but from here it's going to

be much more quicker it's going to be a very quick transition it's going to be just 1 millisecond transition so keeping it very simple and you'll see it once

again 500 milliseconds and then you'll see 29 to 30 will be 1 millisecond so keeping that really quick when it comes

to switching over and as we are doing this I'm also thinking about the the actual file loader so I have everything as linear the easing is is

linear because it is a file loader so it's totally fine for an application like this but I need to also think about what is the width of both the background

and the loader so I was taking the full width of this container and dividing it by the percentage so if I'm at

40% I will know that my width for the background is 116 pixels same thing if I'm at 50% it's half so

it's 145 pixels or around there so just keeping an understanding of the math that you need to do when doing something like this unfortunately figma doesn't

have anything four counters so it's a very manual process and you'll see how long we we go with something like this and then we do the finalization

where we kind of just pop it with uploaded three files and we have the little check mark at the very end so let's take a look at how this looks when

it is complete cuz it looks actually really beautiful but it did take a while so we kind of have that

boom so actually looks like it is loading up really great and the only downfall is that aside from it looking beautiful you

are going to have to go through the process of creating all those different screens and breaking it out like that because it unfortunately does take a lot

of time figma doesn't have anything in relation to Value changes specifically so you're going to need to manually do that totally up to you if you want to do it it does add a nice little bit of

extra touch but something I would totally do on the side to Showcase like a small interaction or micro interaction for a card not not necessarily like a

whole screen cuz that would get pretty out of hand quickly so that is how you can make this uploader a little bit more complex totally up to you if you want to

do it and if you want to kind of apply these techniques to something else in relation to some sort of value change you want to see or a completion micro interaction there's

ways to do that you can Pop Confetti in there if you want to even go the extra mile it is up to you and I will teach you how to do that as well this is how you create three different versions of a

file uploader hey everyone welcome back now we went through several different ways to create a file uploader now if we want to actually take those controls that we

had inside here let's actually take a look here if we take them and turn them into a UI element that we can actually interact with we can create some pretty

interesting things so right now this is something I already have already done you can take a look at it as well but let's go into our design panel so I can explain a couple of things so it's going

to follow the same type of structure that I had before and what I did was I actually started it in a pause

State and what that's going to do is we are going to be able to hover into this state where you'll see it's a little bit darker and we'll be able to click it and

Shrink that button if you can tell here I shrunk it a bit and we'll go back to the pause button so not only are we using this button to

transform we actually using this button as a way to actually showcase how this whole thing works it's not just something that's passive we can interact

and pause and play this upload if we need to so let's take a look at how this looks when we have it applied so here here is the pause

andplay upload interaction that I built and you can see that it has the hover micro interaction and I'm going to click that really quickly you'll see it clicks

and it transforms and it goes only to 50 so if we start that again same thing so that is something really subtle that I thought I would bring up to you all in

case you wanted to make some sort of Animation here it doesn't need to involve these percentages cuz I know that can get really out of hand so I would really love to see how you maybe

turn this into something else where there is something that relies on like a pause and a play or a continuing of something or you can use the x button to

close the file I would really love to see how everyone comes up with their own idea for how to do something like

this hey everyone and welcome back we are going to be working on something a little bit interesting here we are going to be working on a like button and this

is not just any ordinary like button we are going to go a little bit further but first I would like to create like in a liked State now I already have it

designed over here and you'll have access to this as well so don't be afraid to kind of pull it up yourself and take a look at how I've done it

basically I've done it like I do a lot of things you know within frames and I have a little drop shadow on this one which is a 7 pixel blur two pixels

on the Y AIS and we have 20% opacity and my button is pretty darn

simple I have a stroke on it and it is just a regular button a regular frame I have my like text over here my label I

have set as label down there and I have a thumbs up icon the same thing goes for the liked button the liked button is

very similar it has the same things it has a stroke it has the the fill it has the icon and the

text has changed to like so what we can actually do we can go ahead and see what this actually looks like when we

prototype it now let's jump right into that so what I'm going to do is I'm going to click prototype I'm going to just literally

link the two frames because it's going to be quick actually we're going to probably create an intermittent frame maybe in

between and we are going to remove that okay so that's perfect and probably what we'll do here is we will just fix

the fill to be a little bit lighter whoops that's a little dark so we can fix that because I do want to have a hover

state so I think that should do perfect I love it let's prototype it so we have our button we're going to go here to this

Frame so while hovering we have it set to that while hovering we'll go to 300

milliseconds remember to set your animation ease and the duration so I like I think 300 is

like obviously you can do whatever you like but 300 seems to be the one that I am most comfortable with so unclick we are going to go to this

one so 300 perfect and we're not going to worry about scale like shrinking the button and stuff like that right now I can show

you how to do that in a later video but we are going to just worry about this interaction and then what we'll do is

we'll carry this out a bit more so we'll we'll make it a bit darker and you don't need to do a liked button but in the next video we are actually

going to transform this liked button a little bit more so I would you know follow along with me a bit because you're going to see some pretty awesome things and I don't want you to miss out

and then you can kind of take what you learn and go ahead and do whatever you'd like because then you will be in great spot to actually create some

beautiful animations so we have that while hovering and unclick we'll just go back to this [Music]

unclick okay perfect so let's take a look at what we have we are going to press play let's wait for that to load okay so

we have this flow we can't really rename in there and that's fine we are going to scale that

up a large amount so we see the the change on the hover which is great and then a click so that's really nice because not

only have we created a beautiful little interaction here we have created it pretty quickly and this is how you create like a nice

micro interaction on your button easily so the only thing we have changing right now are colors for hover States and we have the fill and sorry we do have the

label change so I know I liked it so that is how you create a very simple button prototype when you're just thinking about hover States now the next thing we're going to do is we're going

to take this a step further and get this going this little icon here we're going to make that transform a bit and you're going to see what a difference it will

make in the final result hey everyone and welcome back and we just finished off this beautiful little button now you may be thinking

Daniel what are we going to do that is so amazing now what I want to do and you can follow along if you'd like I want to actually create an animation for this

thumb I want it to kind of look like somebody's just kind of giving that thumbs up really nicely so we can do that pretty easily not many frames I

promise so let's actually just duplicate this so we're going to just remove and for the sake of this experiment I don't want to create like a hover State I want

to just keep it super simple you know just a quick animation so what we're going to do is we're going to duplicate this Frame over

here and we are actually going to manipulate this icon and and I know it may seem scary at first but don't worry

I'm going to walk you through how to do that so right now I have the frame selected let's get into our design panel so we can work nicely here so you can see I have the frame

selected now I have the vector selected that's what we want to do and if we click into that even more we can mess around with this so all

I really want to do is I want to drag these spots all the way down so you can do that really

easily drag them down little by little so they're all on the same line you can even move this down as well

make sure whoops you can make sure that these little curves are handled you can even delete them if you want by

clicking on this point here and pressing backspace then we have our final one so we are going to we can just leave that like that so now it looks like somebody

has a fist so the transformation I want to see is this thumb kind of popping up and we

can even fix this up a bit more so we have the thumb like that so we can tilt it

kind of like that even move it down a bit I think that's good and then let's bring that

over and we are going to turn this blue so we are going to take this fill make it like that we can even do

the stroke if you want so everything is the same and we'll take a so I have the text selected I'm going

to actually make that white just Al like in this version so liked then I'm going to take

that icon and turn the selection colors to white as well so that way we're ready to go

here so okay now I have the click then it's going to bring it down bring it down change the color and

the text and then we are going to move on to the next section here and essentially what I want to do is I'm

actually going to take that and oops copy that into that frame and I'm going to remove that so that's going to be like

normal and we're going to even create another one because it's not going to just happen like this let's actually prototype this let's start so we're just going to remove these

flows that we have we're going to remove this one as well okay now we're going to start from here so on click I want to go to this screen and you know we're going

to keep it really tight 100 milliseconds and then from this screen onward we'll do an after

delay of 1 millisecond maybe 200 to speed it up a bit and over here I kind of wanted to hang a

bit just a little bit 100 milliseconds it kind of seems like a lot because we've been doing 1 millisecond delays but we're going to do 100 milliseconds and I'll show you

why so let's actually take a look at what this looks like now we'll go into our prototype so this was the original

here we just clicked in and we liked it now so we we're starting to kind of get this nice

little liked action it looks better when when you are kind of smaller because it isn't scaled up sometimes when you scale up these

prototypes they don't act the way You' like them to so that is scaled perfectly okay so that's step one now we

need to make this thumbs up feel a little bit realistic so we are actually going to when I think about like something giving

a thumbs up like it's kind of like a boom boom so we can move that up a bit like

that okay that's going to be nice and then we can come back to this

other screen here so what's going to happen is we're going to after delay once again we are going

to now keep this after very short and tighten it up again because it's just springing upward and then it's going to spring back to

normal another after delay and here we can spend a little bit more time coming back to normal so let's take a look at what that looks

like so that was pretty neat let's scale it up a bit I actually like that a lot that was really nice

boom and once again we can kind of loop this a bit so if I were to take this

exact frame that I have here so if I to click this button what I would want to happen is I wanted to go over here so on click we're just

going to kind of go and do 100 milliseconds we're going to keep it simple and then we are just going to kind of loop back really quickly we're not going to worry about any inet when

it comes to the way it behaves because to be honest when you like something you want that to be more of a nicer animation you you can spend more time doing on the

unliking but I always find you know I rather spend time on the actual main type of interaction you want to

happen so we can do the same thing we did here where we kind of had it hang for 100 milliseconds I actually like the way that turned out so we're going to do

that 200 milliseconds so we're going to kind of keep these types of interactions very similar so going from here to here it hanged going from here to here it's going to hang too so that's good and

then after to finalize everything we're going to do an after delay and if you want and if you're feeling ambitious to learn more about

easing we can do this you can go ahead and actually just create like you can create a custom

curve and this is kind of like a nicer animation or an ease here what I've done is I make sure that when it comes in it's going to get to this

area and then slow down and then zip back into the ending so I'll show you what that looks like right now so let's actually shrink that down a

bit back to its normal scale we can boom so I've just kind of just I'm holding command while I use my scroll wheel to just bring it up to whatever I

like this seems much more natural for a button so you notice that it doesn't have any like jiggly effect on the way back on the way to

liking that seems much more natural so there's a couple things we can do here I think the only thing that I would really like to do is maybe make

this this like move it up just a bit so let's see what it looks like oh actually you know what I liked

it a little bit lower you can even probably put it a little bit lower too let's see oops Yeah okay so we had it right

the first time I think let's take a look again yeah that's going to have to do and that's how you create a pretty nice little micro interaction with a liked button and if if you followed along

yours should look very similar to this you can do with a lot of different things if you're thinking about having icons transform what I did here was just kind of a very quick

transformation but you can do a lot of different things you can turn things into like a play button or a pause button you can have like an arrow turn around or twist or whatever like that

and I'll show you smaller things like that in some final projects that we're going to go through but for these little kind of examples really really neat to kind of go back

and you know put some final touches on this just to kind of get it to a point that looks really great for showcasing your

work and that's how you create a very nice small micro interaction with a like button hey everyone and welcome back we're going to be talking about how to

create some Transitions and I'll get into to very simple Transitions and I'll get into actually some more complex Transitions and like you know kind of bordering on some crazy little micro

interaction based animations so you know when I think of transitions there's a couple different things I went through in the beginning things like you know having a screen transition in our first project which is pretty pretty simple

when you want to just kind of something have something dissolved I also showed you you know how to have something move in and out and we're going to get into that in some later projects but I want

to kind of really showcase how to make transitions through a navigation and I think that's pretty powerful for showcasing that like active States and

whatnot so if you look at our main navigation here in our design page you have this as well and you can kind of follow along with me or once again you can you can do whatever you would like

you know as long as you're kind of applying these kind of properties and principles that I'm using you should get some pretty similar

results okay so let's start with icons if we take a look at the breakdown of this design these are all in Auto layout based frames and what that means

is let me just bring that out here if you take a look at this frame has like these columns that's autoo if I take out autoo I mean you can move things freely

if I put aoo on the larger frame you can see that you can decide whether that's horizontal you can put them as columns or rows if

you want to you know adjust the spacing between them you can adjust the spacing around them you can decide how they all line up

right now they're all the same size so it's just going to be the same in regards to how they were lined up you can do a bunch of different things with auto layout and it really allows you to

make some pretty nice you know dynamic make layouts like that and you can kind of do this with just the original uh frame without Auto layout as long as you

set the constraints properly for every single icon but right now let's just delete that right now I have the these kind of designs set up within Auto

layout just cuz it's easier totally up to you what you want to do and when we do get into complex animations you're probably going to need to you know take Auto off so you can move items Within

frames if you need to whether that's like through parall loocks or whether that's through these transitions that move you can have icons moving if you'd

like totally up to you so let's jump in now this is the original design you see that you have a slider they're all Nam slider for a very particular reason which I'll get into this is just to show

you that there's an active state for each and these are all the different icons that I pulled so I'm going to just call that my base navigation I'm going

to create a new copy below so I'm holding down option shift to bring that there or you can

just do command C and command V and you can create a new one and drag it below totally up to you what you would like to do and whatever is easier for you so I'm

just going to do that and I'm just going to call this nav just for the sake of it and I'm going to create an interaction between all these different sections I'm

going to keep it really simple I'm going to do only fill right now and I'm just going to have this item sliding back and forth now the way you want to do this you know the reason why I have these

named slider is because when you use Smart animate like I've mentioned a ton of times before make sure the names are the same so that way it animates across so I'm going to

actually select all of these cuz we're going to start with home as our main active State and you can just start turning them

off this little I will just hide it and this is where you need to actually turn off auto layout frame cuz as you notice

the frame started to move so I'm going to press slider you can turn this off at this point you know this is not your final design you have to really worry about uh things being like everything

being in the right place but I'm going to individually turn off all these different slider options so I'll keep it like that and I'm also going to change

the fill for these ones so we can just do like 10% so we know that they're not active and we can pick a nice color for

this home what color should we pick a blue like that a banking like a blue and we're going to call this one

one we're going to just change it to Circle I mean you can actually just select the whole slider since they're all actually set to BL even though they're not visible you can just set

them to Blue and it'll set all of them to Blue cuz if you take a look oh that one didn't set to Blue so we can actually just go through all of

them and set those to Blue as well just in case okay now let's take a look okay now it works perfect so now we have our active State and what we're going to do is we're just

literally going to create a second layer and now we're just going to turn that one

into block at 10% and this is where it starts to kind of get maybe a little bit

tedious so now we have that second one this one is going to to be turned on

to we can actually just go ahead and pick that color so we've created that second state

and we can do that for the rest of them so we can go ahead and we have five in total and five so let's go ahead and do

that it'll take you like 10 seconds maybe I'm overestimating even my abilities but it shouldn't take too

long I'm going to just try my best to kind of speed through this I don't even know if that's the right color boom so this one is going to

be Block in the code for Block is all zeros you can just type in the first three zero and you will be good to go this one's going to be

settings and you can see some of like document colors there that's the fourth slider let's do the same for here I

really should have duplicated not the active state of heart because it's making it a little harder for me to kind of go back and do it over and over again but

it's all right okay so we have that one and then the final slider perfect okay so we have our different

states here you know we can tidy this up I'm just going to stack them and you should have this prototype as well and you can take a look at kind

of how I did it I find it always helps to just go through the process on your own as well like following along with me I know I'm moving pretty quickly through that portion so feel free to pause it if

you need to I'm going to click prototype and like I've done before in the past you know just pressing heart going to the second one and here you can

kind of do smart animate and since these are pretty quick and small transitions we can you know keep them pretty simple so I'll press

play and I'll load up for me so that was a nice quick transition we had the slide going as well which was really nice let me bump it

up nice so now you can just connect them all if you'd like that's what I'm going to do so we can even speed up this part so we can just like connect all of

these and you can do that for every single one you know figma is coming up with some new featur features which will really help speed up some of the

implementation in regards to these navigations but this is really helpful you don't need to have an entire screen

done to be able to kind of showcase this kind of stuff you know you can showcase them individually totally up to you and as you can tell I'm literally just dragging

I'm not even looking at this anymore because it's automatically applying whatever I want it to apply so it keeps everything really consistent and let's finish the last

screen here we have the heart going there and the home going there and you can see this little mess of lines but once

you've kind of gone through it it's pretty easy to just work with so you can see that

everything is moving as we want it to and you've gone ahead and created your own simple navigation using some simple

transitions over here so we seeing some sliding you know some fading when it comes to you know the fills and if you want to you can even take this a step further and start

animating some of these icons which we'll do in the next video but this is how you make a simple transition hey everyone and welcome back

now we're going to get into some really fun stuff we're going to be talking about Delight now Delight it can come in so many different ways when we're talking about interactions and when I

think of delight I think of things like micro interactions or different types of things that are just there for purely aesthetic reasons and you know maybe I'm

being a little too harsh sometimes they aren't purely aesthetic sometimes they could really go the extra mile and really help people understand what has

happened when I think of one area where we do a good job as designers in terms of employing this type of delight is when somebody does something successful

so what we're going to do today is we're going to just design a little modal card and what a modal is a modal is something that pops up on a screen mostly in desktop and it provides a little bit of

an overlay over everything so you'll usually see like some dark background or overlay come over your content and then you'll see this modal come up and there'll be something in the modal

that'll tell you what to do or what's happened sometimes it's to do something in particular sometimes it's just to notify you that you have to do something

or that something has happened so we're going to make a little modal card for something like somebody losing weight or reaching a weight goal and that's kind

of what I have here in our figma file and you have the actual designs and the prototypes for the different types of things we're going to create within this

section but I'm going to go through how I created the designs how I broke them out into different frames and how I linked them together to get them to

where they currently are and you could follow along with me I mean feel free to follow along with me and do the same thing or you can watch depends how you want to learn and you can go ahead and

if you're feeling a little bit ambitious go ahead and do something yourself and employ these different techniques so what I'm going to do is I'm going to think about a congratulations model so I have all these different UI elements

already ready to go so let's actually put it together first so what I have here is I have a button and same thing I mean what I've

done Auto layout as well I have the auto layout set to four pixels four pixels 32 pixels on this side and 32 pixels on that side I mean and you can stretch it

any which way you want because I also have it so that any content inside is going to be perfectly centered and there's only one piece that we have

inside here and that is the arrow and I'm sure you all know by now the best way to get icons is to use a plug-in like material design icons and super

easy to get if we go over here all you need to do is browse the plugins in the community so go ahead and get that and once you have that you should just

reload your page so I'm going to just go ahead and drag that here so this is my button to tell people that they should be clicking this to close it go or move

ahead it doesn't necessarily need to be a modal I do have a background which is a frame and that is set to background color of white and I do have a drop

shadow on here with a 20 blur a 5 pixel y movement on the shadow meaning it's going to go down 5 pixels and 15% opacity so it's not too

overbearing the next thing I want to do is just place my text in here and I'm going to place this text as

well and if I hold shift and click this congratulations header text I can even Define the spacing between each other so

now they're 12 pixels so you don't need to right now I mean I don't think you should be a to go ahead and create all these different frames to house all

these things I mean it's just an example so if you're looking to create something that is going to be reusable then go ahead and you know put them in the frame

make sure they're responsive but for the sake of this little demo we can just do that so we're just going to set them to

left and right so it will close and be a little bit responsive I mean this one could be set to centered if we want so that way when we do shrink

it it's just going to stay that way so that's perfect let's leave it like that and now I have the check mark this is something that I took also from the Icon

plugin that I use often and I have a background so I just made a circle using o and holding shift so that is essentially what I've done here and I'm

just going to place that right there like a big check mark telling people you've done a great job and then I have all these little confetti dots and you can place them any

which way you want use whatever colors you want but in this delightful micro interaction or this delightful animation that we're

going to build what I want you to know is that if you're going to design something make sure we use some of these confettis that I have for you cuz we're

going to make kind of like a confetti explosion and I will show you how to do that in the next video so keep up the great work on the designs you've been

creating and hold on cuz we're going to animate this to be something totally cool we're going to have these confettis popping out from the bottom and out and

then disappearing so it's going to actually mimic that kind of confetti throw or somebody having confetti in their hand and throw it in the air or like an explosion like that so we'll be

able to do that pretty quickly Within figma and I'll run through that next hey everyone and welcome back now

we are on our way to creating a pretty beautiful micro interaction SL delightful micro interaction so what we

did was we created this design with this confetti and this is going to be our final design so we're just going to keep it over here cuz we got to think about we have to move our way back and think

about how all all these little things kind of work together to actually create this explosion so what I'm going to do

is I'm actually going to start from ground zero so the way I think about

this is I don't want my check mark or anything really to be visible we're only going to be animating this I mean if you

want to go ahead and do a little bit of extra you can animate everything else and have that kind of slide in nicely so it's totally up to you but right now we're going to just going to be focusing

on making this confetti explosion so I think the first part of this is to kind of make this circle become a little more bubbly so what I'm going to do is I'm actually

just going to make sure the check is set to zero in opacity we don't care about that right now and actually we are going to make sure this is scaled down so

shift option and I'm going to go all the way down I'm going to keep on going

down so I think we have it set to two 2x two and I think that's fine for now and what else we're going to do is

we are going to get all these pieces to come from this middle part so this is kind of like a the middle so

let's select everything here and we can actually deselect I'm going to press shift and we're just going to set them

up like this in a line and then Al together so that is the middle and we're just going to move them right there and

the only thing we're going to do here now is we are going to send them to the back I think it's uh it's okay it doesn't need to be totally centered and

we're just going to turn off the opacity so that's Ground Zero I think we can even turn off the opacity on this one oops sorry let me

get that dot into the view we can turn off the opacity here so now we have nothing so that step one step two which

will probably be a very quick transition so let's take a look we have the background we can probably just bump that up to 100

now and this will be our second screen and I'll tell you in a second why because we don't want to start from just like a blank screen with a black dot because that looks really weird what

we're going to do is we're going to actually build that screen by screen a bit so we're leaving everything the way

it is and if I remember correctly this let's open it so I have shift and I have my shift in option to expand at the same

time and then we're expanding and right now it's small but the final size we want to get to is around this which is

120 pixels by 120 pixels so we're going to actually go a little bit larger than that so we're going to go

to maybe 144 that looks perfect let's move that over and let's create another screen

again so I'm holding down my option and shift to move and duplicate so we can now shrink this back

down to 128 so slowly perfect so now let's take a look

at what this looks like so we've started kind of the beginning of our animation here I'm going to start it by actually having that automatically happen so it's going to

be after delay and we'll just do smart anime like we usually do so we have 300 milliseconds and you know let's actually cut that

down significantly so we don't see that black dot happening forever now this one could be after delay as well so this is

going to be more of an automatic thing so we have that and then we going to just connect that to again

so we're just collecting the whole screen in you know we're using after delay a lot here so we have that that is

perfect and now we can kind of just take a look as to where we are with this okay so we are here in our

prototype nice so we kind of have like a little black ball coming up and

acting as like our explosion of uh just like the check mark and that's good for

now next what we're going to do is we're going to take this screen that we have so want to make sure that everything's in the right position so

it's y 67 y 67 so everything is centered and and we can actually prototype this right

now so what we're going to do actually is we're going to duplicate this one more time for ourselves and we're going to select all the confetti let's take a look where is our screen

here there it is so we're going to take all the confetti they're all named confetti 1 through 18 so you can hold shift from 18 to

one and there we go if I go into my design panel while I still have of them selected I can

actually just you know move them out a bit so what I'm going to do here is I'm just going to move them out because what

I want to happen is I want that explosion so you know happen and then I

want these little pieces of confetti to just taper off and lo lose

opacity so that's going to be a nice little quick quick transition interaction so I think that's fine for now so I'm going to select them again

now I'm going to actually go into my opacity and drop them down to zero so let's actually collect let's

connect this right here so that's going to be after delay and this is going to be a bit longer an interactions we'll do 400

milliseconds this one we can even bring down to like 150 if we want to keep things really tight so we don't want our interaction or our

animation lasting for way too long because then that just gets pretty confusing just want it to be just right

okay and now we have a nice animation we'll just Loop this one because we'll start it again for the beginning so on click let's

just go to smart animate we'll just go 300 we'll see what that looks like Okay so let's start

again there we go and we have just created our very cool INF Fetti pop let's do that again

start boom that was a pretty solid if we bring it down in scale though I think it's going to actually perform

better so let's go back to our working dock here so we can instead of just going back to the original and trying to

make everything nice in terms of starting over again you could just kind of maybe apply a dissolve and let's see that's probably better yeah that's

beautiful so we'll just boom great I think the only thing is we want to tighten up this little interaction so we have 150 milliseconds

let's try that one more time great and this is now this just you and I kind of working together here to make

this a little bit more of a fun interaction so we have 150 so we can actually bring that up a

bit because it's going to be a pretty big pop boom and those come out really nicely

so I really like how the confetti just pops out and then not only just kind of tapers off but it takes a nice little

bit of time for that confetti to kind of just disappear so it's like a boom congratulations amazing so that is how

you can create a pretty quick confetti Pop animation just within figma and look we only have six screens and I think that only took us several minutes to

actually put together once you have your final design as your kind of final base to work with then you can kind of work backwards or work forwards in relation

to how you want your prototype set up and that's how you create nice little delightful confetti pop hey everyone and welcome back we're

going to be talking about how to continue to create some more delightful little animations now what you see here is kind of like a little bit of a checklist

design I'm actually going to scale this up a bit more just because it is a bit small if we take a

look at our last design so let's bring that up a bit so it's a bit small we can kind of come here and scale this

up Bo Boop okay so we have 12 we can make it 18 it doesn't matter

24 let's make it even larger 36 I think 24 is going to work let's place that right there we

have our Dash so we're going to work on designing this this little design here for a

checklist so we can set it to maybe three pixels if we hold these two together we'll just put

that to 100% so we don't mess with that okay let's make sure this is centered great let's make sure this is

centered great so originally this is kind of what I had started designing but we're going to do this together so it doesn't matter

now what I had originally was this this kind of nice little

checklist design and what I want to happen there's a couple different states here there's I would say there's three or actually two main states one being

when the apples or your checklist item has not been clicked and then when it has been clicked it goes to this active state in between we have these kind of like

confetti Pops that I want to do as well so it's like this turns into a check mark or this kind of moves across to like cross out the apples so we have a

bit of transformation happening here which is really cool we have a lot of delight and generally when I think of transformation in interactions like this

I'm thinking of something that's very delightful when I see like a check mark turn into a dash or when I see like a button have a multi-purpose which you'll see soon

again but this is going to be something that we're going to focus on especially with this design so let's get through some of this first and then we'll jump

right in to the other designs and how to prototype it so I'm actually just going to pull directly

from here so I just pressed I to bring up my Color Picker to and I'll I'll just pick anything I want and then I have my check

here this is going to be right there actually let's keep it there for now so my check is going to be here

perfect this is going to be right there let's make

sure that is perfectly centered so that's going to be like that we'll press I again to grab the same color so it's

kind of like it's swiped out I'm going to once again just make sure that everything is perfectly centered so this is y75 so I have to make sure this one is y75

cuz what's going to happen here is this is going to swipe all the way to here so if we actually take a look at this prototype so on click I'm going to

navigate to that I'm going to Smart animate it so we can just take a look at what that's going to look like let's press play so that was our first flow this is

our second one so that was pretty cool but also very

boring now I'm actually going to make this a little bit larger let's go for 48 pixels let's go for 48 pixels let's

actually just move this out of the way for now okay I think that's going to be fine perfect I think five pixels is going to

be good enough for the height and that's going to kind of be where it's going to lay now we can

actually duplicate it let's take a look quick to see okay that's perfect I want it to be large enough so that everyone can see it much more

easily so we're just going to duplicate this and we can do that we're going to

just make sure that it is a nice height and a nice length so if I hold option and I stretch from both sides it's just going to stretch automatically

ially for us we just want to make sure that these are aligned properly so now it's 84 so let's move that this one is going

to be 84 as well perfect we'll just Center that in the middle we do need our check mark

so that's going to go right here and here we can make that larger perfect this is going to be 116 so we're

going to make sure that's 116 and like I said you want to make sure everything is in its place because when we do do

this if things are even a little bit off you are going to notice so let's do that again let's move this out a

bit okay I'm going to actually move this out a bit like that and then I'm going to make sure that these are both selected and press I and now we have the

first part done for our design okay so we can delete this we can even delete this and now the next part is to kind of

add this confetti that I have here and I've seem to have spelled confetti wrong so we can just rename that and what I did was I selected all

the confettis and I pressed command or controlr at the same time and it will bring up the ability to rename all layers at the same time so I'm going to press

Fetti and if you wanted you can even number them by clicking this and it'll add the number so 1 2 3 4 and so on so you don't need to do that but you

can if you'd like so I'm going to duplicate that and I'm going to bring that over here and there we go so that's kind of going

to be the next step perfect so in the next video I'm really going to get into how we start

linking these all together and creating those different screens this one we can just kind of remove them for now

but this is generally what's supposed to happen oops let me actually swap these so it's supposed to do a click boom pop the confetti confetti

disappears and then we have the check mark and that's essentially the design that we're going to stick with for this checklist delightful micro

interaction hey everyone and welcome back and if you've been following along we are working on this cool little checklist once again I always advise that if you're not really comfortable

it's best to probably follow along with me and either watch or you can do it at the same time sometimes I am moving a bit quickly so I am sorry for that but

I'm trying to make sure that everyone gets an understanding of how to design it and how to make sure that these designs pop when we actually prototype

them so if you are feeling also extra ambitious go ahead and try your own take on this checklist it doesn't need to look exactly like this but if you are going to try something new try to use

some of these techniques whether it's like you know using this Dash to swipe out the name or popping up a confetti cuz that's what we're going to do again

here on a smaller scale it's going to make it pop your designs so go ahead if you're feeling ambitious do it yourself as well and share some of those designs

with us on Discord share some of those designs with us even within the Udi questions if you have any questions on how to get things working the way you like them cuz as you can tell I'm using

a lot of different things like after delay to make sure that once something triggers it keeps on triggering the following frames so let's get right into it so as you can tell we have three

states but I'm sure by now everyone understands that we're going to have to create more and that that is just the

way it is and let's jump in there so one thing I want to do here is we could like link these frames together but they're not going to look

perfect so I'm going to actually start with this Frame being my first frame and I'm going to duplicate it so I hold option and shift and I am going

to make this little Dash very very small so I'm going to make it shrink like this cuz what's going to happen is

it's going to shrink then jump right into this kind of slice okay and then in the next screen what

we're going to do so we're going to duplicate this all over again and we're going to take this Dash we'll just you know what we're

going to actually just take all of this one let's remove this you know one thing that we do realize now is that if we're going to animate something and want that

same thing to transform or move in any which way they need to be named the same so I have that one named the same as this as Dash and now I've have introduced these new things these

confettis so we're going to do something pretty interesting as well here one thing I forgot to get was I forgot to get the very top confetti so we're going to pop that

over here perfect you know we can move that out a bit actually let's just keep it the same

just for Simplicity sake and we are going to shrink this down similar to what we saw in the other Delight video

that we did with the modal we want to this to kind of pop up so we're going to hold and shift and

option we got it down to two Okay we get down to one and one here we go one in one we're going to

do that and we are going to Let's remove the opacity put it to zero and we're going to do the same

thing for these confetti things that we have here these little confetti balls we're going to do that then we're going to do

this and make them a zero but one thing we do want to make sure is that we are in

line oops I think that's fine we can always fine-tune the replacement so right now we have that

screen selected now what we're going to do here is we're just going to make sure that that is

fine then we have our following screen and I'm sure you all know we need

one more screen over here and so one thing that we haven't done we need to take these confettis once again and we're going to put them on

this screen but we're going to do something different we're going to do the same thing that we actually did within the first example that we created

with the modal we're going to push those up and then we're going to hide them so you know we have this beautiful design

where these confetti pieces will blast off into the sunset and then we're going to select

them all and we're going to press zero on the opacity

perfect and then we can start to prototype this so we have oh no we have all these different

flows we can remove that boom so let's just go back and remove these flows sometimes it does create them automatically which is a bit problematic

but we'll figure it out okay so we have this what we want to do is we want to make sure that when we click on this it's going to go to that and we can keep this really simple we're going to do

smart animate and we're going to keep it tight cuz these small little interactions shouldn't last very long and now this is where we're going

to once again employ our after DeLay So 5075 we're just going to work with it and see what works for

us we may not get it on the first try and that's totally fine okay so we have this is when the conf pop happen so we can spend a little

bit more time here so I've set it to 150 cuz we do want to you know when you cross something off of a list I know this is probably just like apples it's a grocery list or whatever but when you do

cross something off a list like a to-do list and that's when I where I can see this becoming much more of an appropriate interaction

but you know for the sake of apples I love Apple so I'm going to roll with that okay so let's actually test this out

okay so we have our apples here we go wow that looks amazing so one thing we

didn't do was this I noticed it right away we didn't set it to after delay so let's try that

again that was pretty beautiful so that Dash slides into actually cut the apples out it is done

you have bought apples for you and your family or just yourself it doesn't matter and we want to congratulate you with a nice little check and explosion

there and now if we want to actually just you know Loop this interaction we can do so pretty easily so we are just going to I

duplicated the first one because I want to make sure that everything goes back to normal

nicely so we're going to just unclick we'll navigate to there 100 m second seems fine and

then you know just start the process all over again this screen is probably not even needed but we can keep it for now so

let's pretty nice and there you go and that is how you stitch together a nice little micro

interaction that is very delightful you know adding this little bit of Pop really kind of brings this to life and you can do this totally without the

actual confetti pop it's up to you but I think this suffices for this little interaction I would love to see what everyone else kind of came up with I'd

like to see how your example turned out and if you totally want to reuse what we've given you as a resource it's there for you to reuse redesign also to

look through like the layer hierarchy to understand exactly how I have taken the time to name everything as properly as I

could and layer everything the proper way for these interactions to work so that is how you make a very

simple checklist interaction hey everyone and welcome back we are going to be talking about

how to make a pretty cool and sometimes some would argue excessive button interaction now I think everyone understands the importance of these

micro interactions but sometimes adding a little bit of flare to your Buton

could make that process where needed much better for your user and that could come in the form of adding to cart or

checking out anything that really allows me to understand that I made something like a good decision or I made like a really great decision I want that to be

reflected somehow in the UI or the experience in general so what you can see here is I have a couple of different button setup

and I just want to kind of run through what happens when you prototype these types of micro interactions so this is my simple

[Music] button so I have this kind of Icon here of a cart and I have the

text that is centered I'm going to just make sure it's 100% and that is perfect so it's centered to the middle

of this button which is currently 57 in in height that's totally

fine and then this button is going to be centered it's hard to see that centering line you can kind of see it faintly through the the cart just because the

button's red so so I'm going to tighten this up a bit we can tighten that up a bit

more okay and then there we go that is Center so you can create any type of button you like we're going to be working with a button

and we're going to make sure this cart animates in some sort of way so there is our cart we can just remove these and

first thing I really want want to do is duplicate that and change the fill of this Frame so I'm going to press I and I'm going to

just grab this and delete that one so what we have now is a very simple

button you can even if you're interested let's create a another state so I created another state here

and what I want to do is I want to be able to hover click and then that releases so let's take a look at what that would look like if we actually

prototyped it so what I did was let's go back a bit I have the duplicate the exact same duplicate I went onto my corner make sure you're in the design panel so it's much more easier to work

with shift and option and you can just bring that in it goes anywhere way if you hold command at the same time you're going to stop moving everything

within so I'm going to bring that in like that that's a pretty drastic shrink but we are going to show you what that

looks like so when I click on this button actually when I hover on this button so while I hover that's what it's

going to look like we're going to do 300 milliseconds so that is perfect and then when I click on this

button perfect it's going to actually give me this and then after DeLay So as you can tell we are

actually tightening up these timings ahead of time so I can show you exactly what that

looks like so let's jump in there so flow three here we go so there's our hover State let's bring that up a bit there's our hover

state so that was kind of weird let's see what that looks like on a smaller scale so remember when I said this was a

drastic change that's because it was it's very small in comparison and sometimes you don't want that much of a change so I have it set do

55 and let's go back to our prototype we can even tighten up that timing a bit because right now I do have it set

to 75 and what we want it set to I think is going to be 75 to be

honest it's just when this comes back up maybe that's even shorter like 75 as well so let's see what that looks like

there we go so we kind of have a little bit of an interaction going so we have a hover and a click and you don't need to

actually create this whole shrunken version of it you can do what works for you and what your

design calls for doesn't always have to be like a a literal change like that so I just extended the width a bit

so just to fine-tune this there we go so let's take a look at that scaled up just a bit I'm going to actually move this about there

okay so we have a clicking animation going and we have a easy hover animation so we're actually going to take this to the next level in the next video cuz

what I want to do actually is when I click I want this cart to like speed off and disappear and then we'll kind of

loop it somehow but we'll have this cart like speed off like it's drag racing or racing into the distance cuz that's what I think about when I'm thinking about carts in general when I'm in a store I

remember as a child using one of these carts and just running through the store with it like you were racing uh so I want to kind of create the exact same thing for our little button here and you

can do this with anything you can create your own button it doesn't need to be a cart button it could be something else it could be like placing order button and you can have like something pop out

from the top and bounce I would really love to see everyone come up with something a little different here because there is a lot of room for some some

creativity so let's move on to our next video where we're going to make this a little bit more

fun hey everyone and welcome back we are going to be animating this a beautiful button that we came up with this cart button over here so I'm actually going to kind of take a step back so this was

kind of our original simple click button we had a hover thing going on over here and then a click now one thing I'm going to do is I'm actually going

to let's just duplicate this so we'll leave that one but what we're going to actually do so I have these set to 18 pixels one of the things that we need to

keep in mind is if we're plan to scale buttons and stuff like that it's kind of best to before you do this you should pick the type of text you'd like so I have add to cart so I'm just going to do

outline stroke and that essentially lets me turn it into a vector graphic and you can scale it any which way you want you

can scale it up down now it is like a shape but you can no longer actually add

any text to it so that's kind of unfortunate so we'll just delete that one okay we are just going to Center that

again now I think I said this before but I really want to create a pretty cool

animation I want my cart to speed off into the sunset I think those were the exact words I used so

let's just change these constraints over here to scale so that means whenever this Frame moves like so it's going to scale

everything within it so the label's going to scale the cart icon is going to sale so we're going to just bring that down a bit so

155 that's fine so let's just leave it like that and then we're going to create another version

here so what's going to happen is we're going to hover click that's going to shrink a bit like a button click and

then it's going to pop back up and then we are going to actually see this kind of label shoot

off we can do a couple things here we can have the label move on into the distance so we'll create another frame

so we'll have quite a bit of frames here just to Showcase this little animation but we can delete this one and when we use smart anime what's going to happen is it's going to dissolve that

because the layer is no longer there and we can make this a little bit bigger okay and similar to how we've

done navigations with the cart we can make this bigger again so it takes up more of the screen so 24 pixels by 24 pixels is

totally fine we're going to tilt it kind of like this so you kind of get where I'm going

here we have the click this disappears and then this cart is going to grow a bit from 18

by 18 to 20 and it's going to then grow to 24x 24 but while it's growing it's going to kind of lift up on its rear

wheels and then what we're going to do is we're going to rotate it back but we're going to bring it

along halfway so we can just actually do that okay and then one more

time we're going to push it right off the canvas or the frame so let's actually link this we're going to link

this and we are going to find a way to Loop it in but this is kind of the general thing that I want to build here so I'm going to start with my prototype

my goodness let's get rid of all these flows again so just remember if you're going to start duplicating

things don't do what I do sometimes cuz uh I like to just take whatever I was working on prior but you should just go ahead and delete any connections it may

have if they aren't relevant okay so we are on the very

first hover so it's going to be 300 Ms milliseconds and that's going to

be you know we can do on click or we can do on Mouse down so let's actually change it to 150

cuz I don't mind that and then we'll bring this one in and then instead of looping back to like this original one that we had prior we're actually just

going to Loop it back to the original but it's going to be a little different it's just going to Loop it over here and it's going to start the whole animation because this is more so not a button that you should be clicking over and

over again but something that just kind of plays out and then we have a mouse up so we have the mouse down and mouse up

let's see how that works out for us so we can actually just kind of test this right now let's go ahead so we have the hover so that's kind

of that's flow three now let's check flow for so you see we can't Loop it

so it's just going to end up at this area right here now we can move on to the next one so I have this one on

Mouse up now we're going to delay to the next and we'll have our whole animation play out really

nicely and then now here is where we can start letting the animation play out a bit instead of speeding through

it so the last one was 150 this one can be 200 I

think and then when we go to this next frame okay we could probably wait a bit of time because this

card is going to be SL sliding across pretty quickly and then let's see what happens when it fades off into the distance so I have it 350 prior and we

can probably just bump it down just so smidge make sure that's set to after DeLay So let's take a look at what that looks like wow

okay so that was all right so we have a little bit of a delay

there so let's work on that a bit so we have the 1 millisecond movement to here and

300 and so we can do a couple things now around here so what we want to do here is we want to Think Through

the easing when it comes to attaching these two separate flows and the problem that we saw here was that we saw that over here when this

moved into this screen we saw a pretty abrupt stop and then it continued off now we don't want that to happen again

because that is not really lifelike when it comes to animations so the one thing now we can do is we can think about easing in and out now when you talk

about easing in you want something to you know ease in nicely and then

out if you take a look at the kind of curve on E in that's what it looks like and now if I were to take a look at the ease out curve it would be the exact

opposite so it's coming from that side so we kind of want that nice little swoop instead of the kind of abruptness we have now where it's both ease out

ease out if you look at what this looks like it's going to be similar to this

but less abrupt so let's actually do that now and I'll show you so I just set this one to ease in at 350 milliseconds and that should

actually fix most of it so that was pretty cool it's like once this cart here gain

a little bit of traction it took off and we can actually just fine-tune that a little bit perfect so let's take a look at what

that looks like now so that's a little bit better we saw Less abruptness in that middle and now it's like Voom now it feels like a fast

car like it's gaining some speed okay cool I love it okay so the next part is we need to make sure we can

Loop this nicely so we can do a couple of different things you know we can actually just duplicate this

screen again but this time actually we're not going to duplicate that screen we are going to duplicate this

screen and remember to turn on your prototype panel just to remove that because you don't want to deal with that in the

future so what we can do here is now that we have this settled oops we can move it off of the

screen and we're going to make a quick change here so I have the label selected off of this button frame you can't really see it but I'm going to set it to

zero and so what I want to happen here is I just want a quick change from this button to the last because we already know that the label is not on this button anymore the cart is off of this

button so what we can do is we can kind of like fake it a bit so just it's a 1 millisecond switch and nobody that knows

any better will even notice so we can do that and then we are going to duplicate this button oh you guessed it once again

we're going to duplicate that button and we're going to bring in this add to

cart perfect in this add to cart we'll just set it to like 50% opacity you can even set it directly on the fill so we can set that

there I think that's perfectly fine and then we can even bring the card in a bit but not into the screen so we'll

bring the card in in because this is how we're going to Loop it we're going to bring another one and the great thing about this is very

similar to Parallax and staggering your delivery of your content we are going to make sure that

our content is staggered as well so we will have that right in the middle I think that's perfectly

fine make sure that it is where it's supposed to be in the hierarchy of your layers because then you'll run into some issues and over here we can actually

start prototyping this again so we have that screen remember we created another screen but now we have the add to cart and the cart icon off of the screen over

here what we're going to do next is we're going to after delay we're going to click 1 millisecond and we're going to do 100

we'll do ease out because EAS out I find is the best type of easing you can use for just General application in terms of

having things slide in nicely move out nicely so that's why I use it a lot to be honest and

you may actually use here so I'm already seeing that I may have to go back and fix the eing but that's totally fine and then

we'll Loop it all the way to the top with 150 milliseconds on and after delay okay let's take a look at what

this starting to look like okay so I got my hover I have my click boom wow that is starting to look great

I'm just going to make a quick change over here and feel free to do it any which way you like you don't need to do it exactly like this this is kind of my approach to it to be

honest and it's neither right nor wrong once again you just kind of have to do your own thing so let's take a

look we got the hover click that was nice let's do it again click great and we could probably make

this last one last just a little bit longer let's try again so one thing I really like is these two things are definitely

oh these two things are definitely separate from each other and I really want to get across to the user that you know you click this add to cart it's a good thing that you've just done you've

bought something from us and we love you for it now let's get this cart moving boom and another thing is when I've

staggered these two pieces of content within this button I let the user know that they're very separate from each other because the C is in fact moving at

different speed and the out ofart label is kind of sliding at a much slower speed so it definitely brings a lot more attention to the button so there you have it that is how

you create a pretty delightful cart button pretty quickly within figma using smart anime I would love to see how

other people have created some pretty neat little interactions here with figma please post all of your designs if you

can I would love to comment on them and critique them and hopefully get you to a point where you're really comfortable doing stuff like this hey everyone and welcome back we're

going to be talking about more complex Transitions and you can even say some of these are a little bit of micro interactions or animations whatever you feel comfortable calling it but what I

was thinking when I was thinking about you know creating this navigation that we just created earlier was that it's beautiful you see some nice transitions but sometimes you just want to take it a

step further you know that could take a lot of time and it does pay off when you just take a look at that final animation so I'm going to go through some more complex transitions here and I want you

to kind of do your best to follow along it doesn't matter if you need to pause the video and you know take a break this is kind of like a little bit extra for those people that are super ambitious you know in trying something new and

they want to see a little bit of animation thrown into that navigation so let's Jump Right In and I will teach you how so the first thing I'm going to do is I'm going to take

that base navigation you see I already have it copied below this is our first flow that we created but we're going to start a new one I'm going to just take this and the first thing I'm going to do is I'm actually going to select this

slider over here and I'm just going to turn off auto layout so we don't have to deal with that anymore I'm going to see all these sliders here here we can just turn them

off for now and we're not even going to worry about color or anything right now the only thing we're going to do is we're going to you know create those same a

20% opacity for like the other inative say I mean you can use 10 20 doesn't even matter you can start defining color after you're done you know with your

animation now the one thing I want to do is I want to make sure this slider so like let's just duplicate this

frame you know if I were to make this 100 I'm going to make that uh 20% kind of like what we did in the last

video okay so let's connect the two and what we see here let's actually call this in your flow let's just call this complex because it will get complex

I have promise promise you so if we uh take a quick look here well that loads I shouldn't take

too long let's make it much larger so I do have it set to scale down or up to fill okay so as you see here generally

this is what you need you know what we did before was perfectly fine but if you really want to put a little bit more Finishing Touch on some of these things you want to start taking a bit further with animation and the way we can do

that is by kind of manipulating or adding different states in between so if I think about the way something animates you know

maybe you know when I think about the way something animates I may like you know stretch this let's do 24 so we're

going to remember that's 24 pixels so okay so we will go to prototype and we can start you know let's not worry

about all these little things we're going to just bring this back so when we click this we're going to automatically go to

this screen and then you know we're just going to delete that because we're not going to be going back and forth right now because that's a

lot let's delete that starting point and then we will not rely on anything in regards

to interactions so I selected the whole frame there and I'm going to select after delay and we're going to make that one millisecond because we can't even go

zero milliseconds the lowest you can go is 1 millisecond and this is great for if you want an interaction to happen literally right after like you have a click or another interaction so it's

almost like there is no delay at all it just kind of flows into the next screen so we have this kind of interaction here and I can show you quickly what that looks like so if I

were to click this so already we are starting to get a very interesting you know kind of Animation going we have the expansion of

this little slider line which is kind of like gaining momentum so it kind of like pulls back like an elastic and shoots all the way back to the

heart and now we can almost do the exact same thing I mentioned this before and like why motion is important and like design principles and the other kind of tips videos I really wanted to get it

through everyone's head that when you are applying things like motion or even more complex animations like we're doing right now we really want them to feel kind of like lifelike it doesn't just

happen you know left to right in a linear motion it's going to kind of act like a an an elastic and that's kind of what we want to get through here and we

can kind of do the same thing if we just duplicate that and H what we can do here is we're going to go to design because

we're going to modify this and you know it will slide in and maybe it's like like 16 pixels that will be good

enough and maybe so this is where we have to remove auto layout again we're going to do on the bottom cuz we're going to you know play around with the heart because not

only are we going to mess around with these slider active States we're going to mess around with the icons as well so let's take a look at what we see so I'm

going to prototype and then same thing we are going to select this screen in between and we're going to kind of do an after delay as well so set it to one

millisecond we can keep it to 200 that's fine for now until we start kind of fine-tuning but if we start it over again so we kind of have that it gets

pushed over there and then shrinks back one thing we can do is uh move it a bit so we can go like

one two 3 4 I think that's enough so we can see what that looks like we restart it it's hitting something or it's pulling back so it's kind of keeping together with what we expect an elastic

to do let's do it again boom perfect I kind of like that I think it's really smooth one thing I'm going to do here is now I'm actually going to start thinking

about the icon so we're going to have to definitely do this a little by little but we can go one a two a three we can

bring that up and then even on this one we can maybe even duplicate this so we'll have like three states one

of this icon here that's moving up one two 3 so this one is set to three yes this one's set to three neg3 I can see it up here I can see it up here so I

know they're in the same area but let's actually increase so I can do a shift and option at the same time which will increase it so that it stays in the

center and it doesn't actually move in the sense that it stays Putt and scales proportionately so we can do like 28 and you know we're seeing the same issue

here of clipping so we're going to take our icons frame and we're just going to remove the clip there and that is

fine so we're going to have it come in it's going to move up like hey I an active state I'm going to get

bigger and then I'm going to shrink down and then that should be good now the only thing left is we need to animate from

this screen to this screen and you know we have it on after delay that is perfectly fine I mean we can even reduce this to 100 milliseconds if you wanted to speed it

up so we can go and do something like this now I'm sure you saw what happened there we had a little bit of a pause and that's because our after delay was on 800 milliseconds if we switched it back

to one like we should have done in the first place you know we get a nicer transition so maybe 100 milliseconds was a bit too harsh there

so so we have a little animation there pretty nice we can even extend this animation a bit longer I

think so when the scale does hop in it's really nice boom and there you go and one thing I saw happening there

was that you know the clipping was happening again so just making sure that we're going to remove this on every single frame that houses all the icons

so we don't get any more clipping boom and there you go we've created a nice little animation amazing so that's the first one we're going to create and the next one we're going to go on to creating the

cart animation hey everyone and welcome back we just created this nice little heart animation now I want to even move it further along and create the cart

animation so you know we're going to basically keep on following this same type of structure of you know copy this new frame over here and we have to

remember that to keep things consistent we have the slider this one is set to width of 24 pixels onto the left so I'm just going

to increase this okay so we have 24 pixels to the left and we

will bring that in perfect and what's going to happen here is we're going to just hide this and show this

one and that one's fine you know let's just actually let's make this a 20% this one is going to be

100% okay and now that we have this kind of Base one we're just going to keep it we're going to keep it here for now because we are going to use it as our final State and we don't want to mess around with the placement of the slider

so cuz we're we're going to mess around with this one a bit so what's going to happen here is we want our cart you know to move up like the icon before it so I had it three negative pixels so it's

going to move up one two and three we see that over here dictated right there and again I'm still getting that clipping content I do not know

why okay that should fix it finally perfect okay so I have that and if we look at what we have here

I have it set to I believe it's 16 we can see that over here in the width so let's just make it 16 and this is kind of the part where it's a little bit tedious because you know we want to

make sure that you know things are following the same types of rules and here we go so we're just going to make sure that like this this tip is kind of lined up to the

middle I'm not super you know worried about whether it is or it isn't we want to keep things nice and simple

there okay and now that that is happening you know we can take the slider which is the placement of this this is a width of eight so we're just going to duplicate

that and the placement we have here is x 184 so let's do that let's type in 184 and that is where it's going to

settle back so we can actually you know start actually animating this so this is the final State it's

going to move here 200 and then we're just going to let after delay do the rest of the job for

us so remember 1 millisecond on the after delay

and same thing over here after delay 1 millisecond so right now we just have the you know the cart kind of moving up

and I think we could do a much better job here okay I think like what we can do is kind of simulate like a cart moving as

in like moving really fast like a drag race where the back wheels stay put while the front wheels lift up I think that's a pretty cool animation that we can

make and I actually think that should be enough here we can bring this original back and now we

can you know take this one and I go like that and after delay once again 1

millisecond and 200 milliseconds to finish okay now we can see let's go back so we have our heart boom Oh that was pretty cool and I think

one thing I didn't like about that is that this was a little too quick and I think we can actually make that last a little bit

longer so heart there we go that's pretty cool little animation so once again just kind of keeping the

cart moving nicely and this is where we can start getting into the easing and defining like what type of ease we want to set on it so easing in and out we can

take a look at what ease out looks like if you look over here it kind of just you know comes in nicely if we ease in it's another type of Animation like that

so if we actually combine these nicely together we will be able to actually create some more natural transitions so

in this case what I'll do is I'll set it to ease in and uh this one will be set to ease

out let's see if it worked that was a little abrupt so let's ease in on that one ease out on this one so

ease out and then ease in so that one was a little bit nicer in the sense that it seemed much more natural so it's up and down so we

can even a prolong this a bit more so that was really nice so we had that kind

of nice little smooth flow and we can even make this one shorter boom and there we go we have our own cart that's just we're using rotation here we're using position we're

using scale we didn't actually use scale on this one we use scale on that one but we used position definitely and rotation to

really help us you know let users know that they're on the cart screen now hey everyone and welcome back now we're just going to kind of wrap this up

a bit because we could go on forever creating animated icons I have provided a file for you so you can see how I like approached the gear icon here where I

had it spinning and and also the kind of like rotation that I had going on with this kind of like profile screen but I kind of just wanted to finish off just going back to home so you can see what

it looks like going in the other direction which could be really helpful if if you plan to do like a whole animated piece so let's do that so what I'm going to do is I'm going to actually

keep this screen I just made another duplicate go to my design panel and I am going to extend this I think it was 24

pixels in the right direction and we will adjust you know bring that down because

we already have it so we have that and you know we can just make another copy of this because this is going to be the final actually we don't

even need to make another copy because we have a final State anyways so what we'll do is we will create this 16 pixel full

variant when that kind of slides like an elastic okay and that's the tip I have kind of sent right to the home now this

is kind of the fun part and what's going to happen here H

is that I'm going to copy that boom and so generally what happens here is we're going to you know move this up again

three I have this set to Auto layout again so we'll just go one two three perfect this one has Auto layout so we'll remove that icon container Auto

layout and we are going to just keep that up there you know what let's just delete it and we will just duplicate it all the

way again down here and we'll remove it okay perfect so that's in its right place

and what we can do is we can you know move that up one two three and we can go so I have it like

that uh the rotation is set to 17.67% I think that's enough I mean we can even

go even further we can go if we hold down shift while we do it there's 30 so let's just do 15 and we're going to do another

one and we'll do 15 in the opposite direction and then the final one will be the one at the very top and what we're doing here is

oops you know see we now we've created these alternate flows whoops you know we we do not care for that so we'll just remove those and we'll we'll remove

these keep this nice and simple so what we're going to do is we're actually just going to click that and so this is our starting point for

our cart so if we were planning to go back to the home screen we'd have to go here so the elastic can you know start that little bit of an animation so that's fine we have it set

to 200 milliseconds this one is going to have to have an after delay as well so we'll set that to one oops I have it set to

two that's fine and so on we're basically just going to you know keep this really simple as well after

delay 1 Mill in that direction and the same thing it's going to swing back and forth like it's it's just kind of like a a little bit of

a swinging animation and then when that's done we just tie it all back together from the beginning and that's after delay one

more second so we can start to see what this looks like I'm going to just go back to our original and see that we have our house click

there so that was actually pretty good uh so we have our heart our cart back to the home pretty awesome and like that didn't

take us much time to kind of work on those little animations I mean we can rip right through these other ones but you know just trying to keep it simple for you all especially those that are

using like smart anime for the very first time we don't want to get too far into it right now but that's basically it so we have our cart that moves up and

down we have our house that swings side to side our heart that is going to you know grow in scale and there you go and that is

exactly how you could make some small animations yeah I know it does sometimes take up you know a large amount of screens like can you see all these different lines but if you're doing it

just to really showcase some smaller things uh you don't have to worry about the whole screen being involved or the whole design being involved you can just kind of pick apart these little you know

UI elements that you have and go ahead and really dress them up now if I were to kind of go back here and think about design like I could just select these

house ones and you know I know they're all 100% black so I can just go ahead and you know make them blue these heart ones you

know I could just oops I could just select all these different ones that have a heart and turn the 100% block to

red and the same thing for the cart here I can you know make it another color and start putting some of the finishing touches on some of these like this can

be maybe green and if I were to select all of these these frames and I see anything that isn't active I can go ahead and you

know really go in Ure that is set to 100 and you know fine what those inactive States look

like and now we kind of have a more beautiful experience and there you go and that's how you make some more complex

animations in figma we're going to get into even more complex ones later on so don't worry about that if you're left feeling a little bit underwhelmed because we are definitely going to have

some more fun and that is it hey everyone and welcome back what we're going to be working on today today is scrolling now when I think of scrolling

you know you could have scrolling be a part of a web page whether that's scrolling from top to bottom like clicking a link and scrolling and providing that type of motion as a way

to actually get people from one place to the other you could do scrolling and show Parallax and that's something that we're going to probably work on a little bit today I'll show you both types of

implementations and you can use them in any which way you like so first off you can tell that I have a bunch of different things here I have pictures of

the CN tower I have like the words Toronto and what we're going to do is we're going to put together a web page and the easiest way to do that is you

know I've put a couple of these assets so I'll show you how I'm going to build it and you can work along with me and I want you to also keep in mind that as

we're building this we're making sure that everything is named correctly cuz we are going to be using smart animate again I also want you to keep in mind that the way we layer certain things

especially when it comes to parallx it's going to make a huge difference so let's Jump On In and let's get this page designed and ready to be prototyped so the first thing I'm going

to do is I'm just going to kind of extend this page cuz it is going to be probably a little bit longer I want to go into my design panel because that's the best way to actually design and not

just use the Prototype panel so as you can tell I already have a couple of different things prepared I have this background have the sky and we can kind of just place that

right there I am using a grid so you can use that if you'd like and the grid will help you make your designs much more

accurate when they're like working together with other UI elements so I like to use that especially when I'm working on like prototypes but let's get into it so we

can just create something like this so this is going to be the background and I found this image of the CN tower previously and if you look I've

already done some work on it we can go into the group and we can see that it is like a mask so if I kind of turn off this mask you'll see that it did have a background and I just went around there

with the pen tool and created a mask and you can see the shape of this mask if I copy and paste it elsewhere so let me just turn on that

mask this mask you can see it I'm going to turn off so this is kind of something that I created to cut out the actual CN

Tower so let's go back we'll remove that mask so it is something we do not need to see okay I'm going to take this whole group

and just place it like that and I want to create like a really nice composition where maybe like you know the words Toronto is moving while we're

scrolling I'm going to actually place the word Toronto in the back so I'm going to send that to the back and I'm going to send this other layer to the

back as well so it is looking a little nicer we can Center that I like to center it just by clicking this kind of a line horizontal Center I on so it is

centered to the middle of the frame now if I'm looking for the navigation that I created so I just use Auto layout for that

nav and you can as well so the way I created that was I created a frame around a button and I have the logo on the left

side and if you look at my frame here it sets to Auto layout there is an auto spacing and that's because if you go into the alignment and padding section here I have it spaced between so if I

have it packed it's going to be based off of like the actual spacing there in between items but I have it set to space

between because it allows me to kind of move it back and forth like that so we can go ahead and just make sure that that is centered you know it's not going

to be perfect and that's totally fine we just want to get really used to creating Parallax effects now this is a pretty

harsh so this little CN Tower portion here it's a really harsh cut off so I've gone ahead and already prepared like a little

overlay and the way I have that built that's fine we can actually just we can keep it the full width of the

screen so it is going to be the full width make sure that snaps there that's perfectly fine line and we've created a

nice little overlay for our CN Tower so I chose the CN tower you know I'm from Toronto so it's just

kind of something that came to mind really quickly when I was thinking about what to choose as a concept here so this is just something similar you can use

anything you want you can use a tower you can use a background of like a mountains and stuff like that I showed a couple examples when I was going through you know good ideas for

parallx so I've kind of created kind of like a brand a tourist type brand called look so I'm going to keep this super simple it's just going to be like a two section

design so I'm just going to kind of take these and bring them in and when I'm thinking about actually designing this I'm actually thinking about well how do

I want these images to show up after they scroll into uh place so I'm just going to use my grid here to just help

me out a bit we don't need to follow the grid per se like perfectly so I'm just going to make sure

that everything is three column wide perfect so what I'm just doing is I'm making sure that they are all the same width they all fit within that grid

kind of structure and we can go ahead and just place them any which way we want so I I kind of have them you know a little staggered like this and I think

that's going to work really nicely so I'm going to move those up and then we'll have like a a little paragraph So this is something I just I think I took this off of Wikipedia

something really short in terms of like a a blurb as to you know what Toronto is it's beautiful city and I suggest you all kind of you know take a trip out

there one day out here one day okay so I think this is going to work at least for now perfect so I'm going to just turn

off my grid and if you're ever having issues with things like shortcuts you can easily go into to the help and account

section under this kind of figma Icon and go to keyboard shortcuts and you can see anything in regards to you know what is the shortcut for like your

tools your view your Zoom text and so on and they'll really help you you know get better at actually using the program get quicker at using the program so you

don't have to keep on doing things manually okay so what I have here is my design already so it's a nice little simple thing super simple actually and

now you're possibly thinking about how do we animate this couple ways we can go about doing that and I will jump into that in the next

video hey everyone and welcome back we are going to get into actually animating this landing page that we created so we went through actually getting all these

design assets together them together for a web page and now we want to animate it so there's a couple of ways to do

that you know if I wanted to just create something really simple I could just go here to my prototype panel I just duplicated this page so any which way you feel

comfortable duplicating that so if I wanted to I changed this to learn more so if I wanted to say connect like a button to

go down to this content super easy to do and a way to do that is to click on the

button click onclick and we can navigate

to or scroll to that's perfect and we can scroll to this little section so similar to how you know your

regular interactions work generally what you would choose is navigate to when you're working on multiple Pages or even opening an overlay on something I'll get

into that as well but when we actually want to like keep within the exact same page and just use anchor links that you would see in like General HTML and CSS

going from one part of the page to the other we can do the same here in a Proto protype so if we take a look at this we're going to play that prototype

that we just created so we're going to wait till it loads in okay so now it's loaded in so now we kind of have that very

quick movement it just jumped right there so we can go ahead and edit that a bit so right now it set to instant now

if we do animate we can keep it to 300 M seconds and let's take a look so right there and then you can already start creating anchor

links and that was very simple like if we extend the page CU that was really short so I'm going to actually extend the page a bit and I am going to move these down I'm actually going to go into

my design panel again I'm going to select all these images so what I've done is I can select them just by grabbing them like that clicking down and dragging so I'm going to do that as as

well and I'm just going to you know make these images a little bit larger you know fine- tune the placement

perfect so now we've made it you know much more of a longer page so that scroll is going to be a little bit more drastic let's take a look so we're going

to go to the very top if I click learn more so that's nice we can even you know fine-tune that animation here so I have

300 milliseconds so if I did like a th000 that's going to be a little bit of a better experience so it's nice like that now

the only issue here is that we can't animate everything we can't create parallx within this situation and that's unfortunate and I think figma is working towards doing

something like that in the near future but we could also show what we want in terms of the images overlaying each other and how we want those to work

together so I'll go ahead and show you in the next video how to actually create like a parallax version of this scrolling

animation hey everyone and welcome back we are going to get into creating Parallax effects now this is the fun stuff the really fun stuff because when

you see that beautiful website moving scrolling to one place from another all these different elements moving at

different speeds or in different ways it really kind of brings your actual experience to a whole other level it really is something that could make a difference in terms of the Polish that

you have on your website you could also use it to draw attention to different areas and I'm sure you've all heard me say that in the previous videos but but let's Jump Right

In so where we left off was we created a quick anchor link we can preview that really quickly again so I I set it to learn more like oh I'm going to learn

more about Toronto super cool now let's actually go in and create some Parallax effects so I'm going to duplicate that again so I have

option and shift and just dragging it over Okay so let's get into it now now when we think about parallx it's going

to be a totally different way in terms of actually setting this prototype up we're going to have to do two pages so what we'll do here is we're

going to duplicate this a second time we're just going to make sure that these don't have like a starting flow or anything like that because we are not

interested in creating any clickable links we are going to do something a little different here okay so one thing we have to think about

is well the way images come sliding in is going to be totally different so if we just align all these images together and a way to do that is

you can either so if I backspace uh we can just go like this you know get all these images selected then we can click that

button and have them all align so we can set that up like that we can even set that a little bit lower and you may be thinking Daniel what are you doing this is not the design we

agreed upon and you're right we didn't agree upon this design we're actually going to hide that because what this is going to do when we

move from this screen to this screen these items are going to be sliding in at different speeds so they actually stop like like this I'll show

you what I mean in a very quick second so that is how we're going to start our actual animation like

that and we are going to bring all these items up we can actually select everything and if we move it

up like this we can actually start to create a better experience you know we want to keep

everything up to the same dimensions as the previous frame so we're going to have to work a bit here at getting this the way we want it so making sure that they all fit

nicely okay I'm just moving those I have that in there okay so let's work on the first

part and what we're going to do here is when we drag this screen we have to use one of these interaction methods which is unfortunate it works really well on things like

mobile when you're doing like Parallax effects because the natural gesture is to actually drag up and down when you're swiping you're swiping to scroll rather than using your mouse it would be really

cool to see them implement the same thing for desktop users but uh right now we can just kind of use dragging and we're just going to keep it

to Smart animate and let's see what it looks like we're actually going to name this parallx

create let's just name this old one anchor that looks perfect okay let's Jump Right In Here we go this is our

Parallax landing page so this is all you're going to see when you come in to the website and then with a drag boom We automatically have this

cool effect we can go ahead and apply the exact same thing going back the other way so on drag we want that to

happen we can also increase the amount of time it takes to actually have that animation play out so I have it at

1,500 so that's really nice really subtle and you can tell we have these images moving at different

speeds even this this little blurb of text comes in at a different speed so let's actually now work on this image over here now

this is kind of where more of the magic happens let's take a look so when we're thinking about this image up top so I'm back in my design

panel cuz I'm going to be working on all that I'm going to select all and that's command Comm a or contr a and I'm just going to kind of move everything down a

bit because we are actually going to you know move some of these items at different speeds so I'm just kind of moving those up holding shift and the

arrow keys and this Toronto text can come down a bit and the the CN

tower let's move the CN tower overlay let's move those all up like that we'll move the overlay down a bit so that way it's sitting perfectly

on top of the Blue Sky background now we can select everything in this Frame and we can move it back

up perfect so let's take a look at what that looks like and if we got the desired staggered effect that we were

looking for so we slide up and there we go same thing applies here beautiful little parallx effect and it that didn't

really even take us much time so I want you all to remember that go out there experiment with these types of things because you can create some really beautiful things in the matter of

minutes perfect and the only thing I would fix I think if I were to bring everything back down once again I think I would want this nav to

possibly stay there as it moves so it's not so ahead of everything else like we currently

have so it's more subtle so the background and the cant Tower are the things that are moving much quicker and the Toronto main text or your main hero text whatever you

would like to call it and your navigation are more in the background and less quick than everything

else and that is how you start creating Parallax effects in figma in minutes and this is going to be really helpful to you know work with

your developers work with your product team to get across a different type of concept that you may have different type of design that you may have and just to run it past people really quickly also

this looks great in your portfolio if you're able to just screen capture this and you can easily showcase how beautiful your designs

are hey everyone and welcome back we're going to be learning about paging now you may be thinking about paging as in you know numbers showing up when you're

scrolling on a page and you need to move to a new page so like pagination that's very true as well and there's not much you can really do there when you know

animating those types of numbers or values but when I think about other types of paging it's very similar to those navigation prototypes that we created and I start to think a lot about

like carousels and you know not just carousels but also different types of like swiping thumbnail images when you're using like

an application like uh Airbnb so users should really know exactly what's happening in terms of which page they're on which image

they're on and what I'm going to show you today is a very quick way to do that with different types of pagination and different levels of complexity when it comes to actually animating those types

of PR protypes so we're going to start off with something relatively simple and you know just do your best to follow along or you can go ahead and create your own this is just going to be using

dots something that you probably have seen so much in apps like I mentioned before now the file that you do have actually has five dots and it's much

more complex but I'm going to do three so you can go ahead and kind of create your own totally up to you so what I have here is I have Three

Dots and you must have noticed that I just deleted one of those dots and my frame is still longer the easiest way to

get your frame to kind of move back and Encompass all of your elements within is to press this little button here which

is resized to fit and you can tell that just below that tool tip is your shortcut so I'm going to do that and I'm just going to move it back to the middle

by clicking this button up here so now I'm going to have three different states as you can tell I have my active State

this is an in between State and this is the inactive State and you may be thinking Daniel why do I have three states generally we only kind of have

two it's on or off now I want to kind of take this paging prototype a little bit to the next level not too complex but just it gives the users a little bit

more feedback when they've clicked on something so the easiest way to do that is to kind of have another state here so this is the color for that state so what

I want to happen is if I were to duplicate this perfect so what I want to happen is

if I click on this second one I want it to show that and then switch to the white so I'm going to

click this one this is going to be our you know our starting state so the easiest way to do this is to click so I'll go back just to show you what I did there because it happened really quickly

I pressed I and it automatically gives me my Color Picker and I'm just going to pick the inactive state so if I were to think about this in a sequence I click

the second button and that happens we can already start Pro prot typing it but we're not going to do that right now so we'll just create a new page so I just

command seed command Ved and what I'm going to do here is I'm just going to click that and now that second one is in its

active State and you can do the exact same thing and so on for the other pages so first I want to actually see how this is going to play out so I'm going to

start prototyping right away so so I'm going to prototype from the first to the second so when I click this one drag

over here so on click I have navigate to this simple paging frame and we're going to keep it smart animated so you notice

that they're all named Carousel dot so that's we're going to keep at 300 for now and then we'll go from there and then we want this to automatically

transition and I'm sure you all remember when we were doing some of those more complex transitions we were using after delay to really simulate something happening

without us having to trigger it so it's just going to happen regardless so when that happens we'll do one millisecond and then we'll do another 300 milliseconds into the third one over

here and then it will be the final state so the way this is supposed to happen is Click show me that I clicked something active so let's take a look at what that

looks like so I've opened my prototype let's actually you know let's bring this up a

bit in size okay perfect now let's see what it looks like so that was pretty nice let's start that again I press

R so that was really quick or not quick enough so maybe we cut this down to 200 let's

see what that looks like so a lot of this prototyping is really kind of refining these values to just kind of feel more natural you don't want

animations or different types of transitions taking longer than they have to I feel like the active State almost

could be much shorter this kind of Click State can be much shorter than what we have it as so I think that's good enough so it's

boom boom perfect so we can actually start doing that for the rest of the different

states over here so if I were to bring this one down so that is this

state I'm actually going to now make this third state from the first button so we have to actually create a bunch of different states so if

you look at I'm going to how I'm going to position these I'll do the first that's the first active State this

is the second active State and then we'll even do a third active state so boom and now we can actually bring this

down the one thing we have to be careful about is creating these duplicates when it comes to actual prototypes so we'll just hook

up everything all over again so that's to go back remember to use I to grab that color this is to go to the third

dot over there on the right and we're going to do the exact same thing for everything else so command D will

automatically so I've duplicated this by pressing option and shift and then I pressed command D to create the exact same and you can do

that as much as you want oops so we'll do that again you I'll show you what it looks like you can just keep on doing that if you need to create many mult multiple

versions so that is the second one and on this one I'm going to actually make it the first one so now we can actually start

to put these all together nicely okay let's Jump Right In so the Prototype that I have here

is that one goes to the second if I were to click the third it goes there and it's going to be 150 milliseconds so we'll just keep that for now totally up to you in terms of what timing you want

to use make sure that it's not too long because then it just starts feeling a bit unnatural that's fine so we can just

kind of like Rush right through a lot of this and the same thing here as you can tell it's starting to

create flows and we don't want that so we're just going to delete those flows and now we can move

from here to here so that is the second stage so we'll do 200 milliseconds this is the third one we

are going to do the same thing 200 milliseconds perfect this one oops see this is another oversight by me make sure that you have it set to after delay

and 1 millisecond in terms of it happening right after because then you're going to be waiting around and wondering why your prototype's not working properly so

we'll just bring this one this one is going to connect to the first remember to click the entire frame

if you click one single element it's actually not going to do anything so this one's going to be the third one oops so let's click after

delay 1 millisecond perfect and let's just finish this up really quickly and just like that we've put together a very small

prototype of our Carousel so let's see what that looks like and as a user I can automatically see that there is like an in between and

this is kind of what we would call called the active state or Focus state so when you actually focus on something and click

it and then you see that final State come through so this is how you actually create a very simple Carousel within

figma and it didn't take us much longer than something normal would take us in terms of just making it much more simpler we added in between State yeah

it did create a couple of different screens for us but just showcasing this as a quick animation really really helps others see just kind of how it's

supposed to work and we are actually going to get into something a little bit more complex I remember when I was talking about navigations and creating much more complex navigation Transitions and

adding a little bit animation can make it more fun we are going to actually get into creating something pretty cool in our next video video hey everyone welcome back we're going to be talking

about the motion design process and uh something that I found really really helpful especially through this is to you know apply some sort of framework and it's kind of like the same type of

framework that you use when you're trying to solve regular ux problems just with like simple visual design no motion included but you're probably thinking well how do I incorporate motion into my

regular design process I know why it's important I have some principles in my backpack I have some tips in my tool box how do I apply all these different things so let's Jump Right In and where

I like to start is Ground Zero Discovery and research now you may be thinking how do I know when to use Motion in my designs and this isn't really a decision that you can make on your own as a

designer you're most likely a part of it if not running the discovery phase of your project you know during this phase you're going to learn a lot about your users but most likely they will never come right out and tell you that they

need animation or motion the first step is to go to your users and to study them and to review that feedback in order to make a good decision you know as a designer this is step one as a designer

we got to talk to our users you need to pay attention to the areas or steps within their Journey as to where they may provide some feedback or criticism when talking with users you might hear a

lot of different type of feedback and this feedback probably comes from things like you know stakeholder interviews personas usability tests Journey mapping

and much more so some of the things that you may hear are I don't know where to focus I have no idea how to use this

tool where do I go from here how do I know that I've completed the task I don't understand what this step requires of me so these are some common things

that I always hear when I'm doing user interviews or usability tests this type of feedback is golden and will really help to put you on the path towards

using motion to solve some big issues so the most important thing about Discovery and research especially this phase is you know that user needs are

the focus and when you align the use of motion within your digital product to user needs this allows you to really see the value of motion more importantly it helps you avoid thinking about ways to

add meaningless motion elements within your design we have to really first revisit the reasons as to why motion is used number one it provides a deep level

of clarity it provides useful feedback to your users and it gives users hints and clues on what's next you know there are other benefits such as Aesthetics

better communication directing the user's focus and reinforcing the hierarchy of elements uh you know they stem from these types of reasons if we think about like this

example here we can see that motion is used to you know create better transitions connecting context and allowing us just to see which screens come in from where so when we click the

back button we can see that this screen kind of Pops slides in from there it just provides a lot more context on how to use a certain

application so this brings me to step two now step two is we need to use our user feedback and align it to the

benefits we learned about so remember align the feedback with the benefits where any of the feedback can be directly addressed by one or more of the benefits discussed in step two it

becomes easy to identify the right motion Design Elements to use for this situation so some of the benefits you know that we talked about were it

provides a deep level of clarity it provides useful feedback to your users it gives users hints and clues on what's next so what we just discussed in this

previous slide is something that we want to link to for instance if a user you know is complaining that they don't know which type of task to complete a motion design element that provides feedback to

the users would be ideal I recommend exploring different types of portfolio websites like dribble behance maybe even code pen to find

inspiration for the right kind of motion design and once you're done you should really communicate these findings to your

team so how do you get buy in for your ideas so you should pop some pretty early ideas as to you know how you want to utilize motion within your designs

you know to create a much better user experience trying to convince a team of stakeholders product managers clients developers that spending extra time and money on motion just feels like the

right thing to do and you know that will only get you so far how do you make time for the extra effort in your typical project's already demanding timeline you know the quickest and most universal

path to gaining buyin from your team is to align your motion ideas to the users needs and goals this will ensure that you aren't merely creating you know

animation or motion for yourself with no benefit to the user in any way you know you need to share your intentions early with your development team and client communicating early will reduce the

chance of an idea getting shot down prematurely so like I said share early in the process you'll have much more success doing it this way and you'll

probably get much more Buy in especially like I said by aligning the user's needs to the benefits of motion okay so here we are step number

two design and storyboarding so in this step you already basically have ideas and possibly the inspiration you need for

your design here's how you should proceed step one of this step you need to start with sketching I mean we always kind of begin with a sketch every design

process begins with a sketch and motion design really isn't any different so pick up a paper get a whiteboard or bring out your drawing app because this

will help you kind of think about how to You Know sketch these small little interactions uh much more easier and it allow you to easily kind of go through some ideas that just don't make it and

also refine some of your better ideas now the second part is you want to storyboard you know creating a storyboard are the key states of your motion

design use Simple annotations to help visualize the flow and this is a really really effective way to communicate your ideas with others early on in the

process as we we see here this is kind of just like a small example of what a storyboard looks like you know it's just just kind of like the same type of thing directors use or film producers use when

they're thinking about film what happens in this stage what happens in this stage and you can use it for applications as well and websites you know basically you have the

three parts you have the full story this is like maybe like a notification or getting a notification for a messaging app you have the visual which would be like your different stage of your

interaction so it could be your sketches it could be even digitized a bit and then you have your captions explaining what's happening in each moment so this will really help not only yourself you

know document your work but it'll also help everyone else around you kind of get it in your head a bit to understand what you're trying to you know convey with this type of motion

design I search this in all my other courses you know sharing your work early sharing it with your team as much as possible is such a good practice to kind

of get used to sketches and storyboards are great tools for getting some early feedback from your team and don't be shy about sharing your sketches and storyboards they are great tools for getting your team to understand what you

plan to create and Gathering collaborative insights and then finally decide so this is kind of where you come to the end of

it based on the comments and insights of your team you need to decide what motion Design Elements will be prototyped and user tested so you're really going to think about what you're going to move

forward with and by the end of this entire step of design and storyboarding if everything goes to plan by the end of the step you should have

an acceptable sketch of what your motion element will look like so this is kind of the goal of this step you want to get to the point where you're very confident as to how this motion element is going

to play out in terms of like a narrative using that storyboard but you also want all that research that you've done prior to really back the reasoning as to why you got to this point so remember step

one Discovery and research understand who users are align those needs to the benefits then sketch a storyboard talk with your team and then decide on how

you want to move forward okay so we are on to our next step prototyping now the next step is to create a prototype of the design you

know prototypes rapidly get your ideas into motion before you've spent much time even coding from a ux perspective the main purpose of a prototype is to

get your ideas in front of users early in the design process when refinements and iteration are much easier and less costly so this is also to get them in

front of your clients as well and this kind of little example I have here on the right is actually how you can quickly prototype within figma and this

is kind of just like a little overlay interaction but within figma you can easily create these different types of prototypes and they feel like you're using an actual application so you know

doing this really early on will really help you as a designer you know get ahead of development and also test ideas early on so there's a couple different options

you have here you can either create a coded prototype or use one of the many prototype applications on the market like figma I I personally I love figma I recommend using prototype applications

as they really reduce the time and effort needed and especially with figma you know you're keeping your designs in one place you're able to create some really great prototypes with figma and

also apply different types of animations that could really make your design pop set it apart from others as well and figma can really do a lot it keeps

everything in one place like I said said you you can create low or high fidelity interactions like we see here we see bunch of different interactions but you know it doesn't take long to learn or

use you can create some sophisticated prototypes and you have commenting also on your prototypes as well so like I said it's very collaborative it's really

easy to use we'll get into some much more complex animations as well but this is kind of like my go-to but I always say use your own

judgment to you know deter the right approach for you and your team okay and now we are at our last step so you've probably implemented the

motion design those motion elements you know you've come to the end of the road here you have a prototype and it's looking super good but you don't know if

it's going to work so testing is step five so you've created the Prototype of your design and testing is all that's left to test the design to find out if

you've captured the users needs and whether the users are impressed and to be honest the testing process can be accomplished in four steps step number one you know you need

to schedule some user tests you should identify the number of members for your audience for the test and decide when the testing will take place you know you

should really really do your best to make sure that your target audience is represented with your users so that being if you're

targeting parents for like kindergarten enrollment or School enrollment you ensure that some of the users in that testing session are actually parents that have possibly gone through the same

thing or maybe looking towards going through the same thing so this is just something that you'll get better at in terms of recruiting participants but when you're scheduling user test it's incredibly important that you're

actually testing with the right users number two you should conduct the actual test run participants through the

typical tasks that would lead to the use of the newly created motion element and you know you should observe whether the new elements help or harm the experience

you should remember to gather feedback what I always like to do is I like to record my tests as best as possible and sometimes I actually bring others along with me whether it doesn't actually matter if they're designer or not as

long as they're willing to take notes but it really helps to you know for you to focus as a designer on what the user is doing because something may not be picked up as to you know how they're

using the application or the website you need to actually watch them as best as you possibly can to understand whether things are actually working

out okay so now you've conducted the test you should review that feedback you know take some time to really go back through that feedback to just determine

whether your users like the new elements that you've designed feedback should be reviewed alongside the challenges identified in that very first step when

we were talking about what the user's pain points are and what they need and then once again we're left to decide do the new motion elements

improve the user experience if yes congratulations you're successful otherwise you really have to go back to the drawing board you know

this kind of process that we Belt Line together it isn't straightforward it shouldn't be straightforward whether or not you're an experienced designer what I do stress though is the need for

communication both with your design team and your audience although motion adds so much to design you don't want to end up with Creations that really don't

address your users pain points you don't want to be creating these different types of motion elements for the sake of adding motion to your design you should

have a very thoughtful process as to why you want to add a different element hey everyone and welcome back now what I want to talk about are some

tips that you should definitely look into when thinking about how you plan to use ux Motion in your designs now these are things I always

recommend to people and some of you may know some of these tips some of may seem like common sense but it's always great to just have this as a reminder for what you should be doing or at least thinking

about when you're trying to create you know different types of interactions so let's Jump Right In you know the first tip that I like to say is animate content as it moves between different

types of States you know a good animation Fades the content in and out from one state to another but a really great animation shows continuity in a

transition by making the context move between so if we see in this kind of little this little form here we're seeing that content kind of slide in you

know fade and slide nicely If This Were to just kind of appear it'd be pretty abrupt for our user so we want to make content kind of move nicely between

states let's take a look at our next tip make connections with shared elements now this one is pretty important as well using especially like

the masking design principle Doan Zoom principle like using these kind of principles together could really help especially with this tip you know make those shared elements have a deep rooted

connection if we take a look at this card here when the user clicks it we don't want to go to an entirely new screen I mean we are on a new screen but we don't want the user to kind of think that we want the user to think that

they're seamlessly moving through this type of narrative so creating that type of you know shared connection where the image expands much more really helps the

user you know move through that interaction the great animation really establishes a connection between two states by animating the shared content in this case the

image try staggering the delivery of your content I know we talked about this a little bit when we were going through the motion design principles but you know a really good animation quickly

staggers the appearance of each group or element it really helps you to to kind of understand the type of elements you can interact with maybe even establish some sort of hierarchy between what can

be interacted with but we we'll see this right here after this kind of loads when they've loaded the navigation at the top and then staggered the delivery of the flights below it really

helps understand that okay these two things are separate and it really helps the user kind of interact or understand what they should be interacting

with make the elements in your content aware of their surroundings you know just like in the real world and this is kind of like

again with skoric behavior users are so used to one object affecting another if I touch this block the block moves or if

I put another block on top of whatever I'm carrying you know the stack gets higher and the same kind of applies for things like this over here where we have

that loader and it affects all the different pieces or cards above it that really helps the user understand how that content works together it really

does a good job of you know showing the elements and how they get affected by their surroundings and how they could change based off of what's happening on

the screen so once again you know it connects that mental model and it also allows your 2D design or your 2D application kind of you know a little

bit break the mold as as to what users may expect from it and you know it kind of provides that little bit of dimensionality provide context for menus

now this is another big one sometimes I see menus and they're okay but they show like content appearing from the direction of the button that opened open them right like an example is this

navigation they'll just kind of pop out quickly but you know to get your really good interaction going like you really need your menus to emerge from the

action that created them you know growing from the point of touch in this instance we have this whole menu that kind of appears and the actual screen is

moving away from it so from that kind of point of origin it's really really intuitive for users it allows users to understand where menus go how they interact with them maybe possibly how to

get back in this scenario it may be like a swipe so really provides a lot of context use buttons for visual feedback you

know sometimes we'll see like a button there is like a failed State and the button just kind of has like an error State below it and that that's pretty good but you know when I see really

great interactions I see the button itself showing different types of states and we kind of talked about transformation as a concept as a design principle in terms of motion you know

try using the container of a Buton to provide visual feedback of a status like an example is done in this case or you know publish we're seeing this loading

State and then we're seeing a completion State afterward really helps users understand the context of what's happening right there and then instead of trying to look for it on screen this

is incredibly helpful create visual cues now we see like designs generally use color size

position to highlight you know an important little action on screen or like something that the user needs to notice or act upon now when I see really

great implementations of this you know I see animation to bring attention to that important action without being too disruptive you know this may be a little too extensive but you know it's a nice

little touch especially if we see kind of like a bouncing red notification ball or you know some sort of thing happening over here a little animation whether it just be like you know like a little bell

moving back and forth us slightly every every now and then just to allow users to know that you know they should be interacting with that and the thing is when the user needs to act on something

important you know try to really animate those actions to attract their attention you know start with something subtle like I mentioned and maybe increase the intensity you know change of size color

speed in relation to how important that action actually is and you should really only use this for critical actions and the more you use this effect the less impactful it actually becomes so don't

just go using this throughout the entire application You're Building or website you're building and you may actually annoy your user so definitely do this

only for really critical actions this may seem like common sense but you know duration speed and easing are your friends if you use them properly uh timing is one of the most

important considerations when designing transitions you know animation shouldn't be so fast or so slow it keeps the user waiting you got to find that balance the

optimal speed is probably around 200 to 500 milliseconds for an interface animation so you know try your best to work within those means and you'll see this in the future go through some

projects when I'll kind of discuss you know what seems uh good enough for an interaction like especially in figma you can Define that speed but we can see here you know the duration when the user

parall loocks Scrolls we kind of kind of see these photos come in and out and they ease very nicely and it's not so linear you know we got to think about

gravity all objects when they move have some sort of acceleration or deceleration that's what I'm talking about when it comes to like easing and speed and even duration you know if you

follow those same types of rules and you avoid linear movement like I spoke about in the design principle section you will avoid something that would seem so fake

you know we want to make this seem definitely much more real life it just really helps create realistic types of animations okay so we need to think

about tone early on you know these are two different websites but they I personally think that the way the motion is used here we see that these are two

different types of Brands they have two different types of tone think about the type of product you're designing and if a certain type of animation will suit It Like A Bouncing animation that we see

here seems much more playful and joyful and it's about excitement and it's about you getting well making yourself better this is kind of like a body and health

product so it suits it it suits even the illustrations but when we look over here where there's this kind of like this architecture based website this is really really interesting because it

seems very modern it seems very sophisticated and even the animations and the motion used in here really help set that tone you know they're very

subtle they come in and out very slowly they're very sharp and that's kind of the words that I would use to describe those types of animations

used and this is the last tip that I think is pretty important a lot of people actually think that you like I said in the beginning there's this misconception that motion is just like delightful animation and it it isn't but

you know it could be used in that way to really help strengthen in brand so provide Delight where it makes sense user emotions play a huge role in

interactions we can reward users with animation for accomplishing a goal you know maybe a confetti pop when you reach a weight goal that really helps you know

strengthen the brand of the product or website and it also sometimes keeps users coming back so in this case we have an example of a Facebook's reactions and they're really really

great because they allow users to express themselves in different ways and as we see here this is kind of a really cute way to kind of do that but if we also think about even

these kind of little things that are happening this is kind of once again you know about tone and you know maybe you wouldn't see this in the banking app or anything like that but when user clicks

on this it's kind of nice to see this small bouncing effect um some may say this is not really delightful but I mean these little nuances when creating these

micro interactions really help kind of set certain products apart here's another example completing an order you have this little drum pick up your order

and then your order is placed and there you go once again kind of using the button to show all state changes but going that extra mile and providing this little kind of cool animation to

Showcase that same concept so definitely if you have the time think about where you can provide the light uh because I think it does make a lot of

sense when we're kind of for these different types of actions that you know reward it whether that be like placing an order you know a user reaching their W goal you want your users to feel

really happy using your product or using your website hey everyone and welcome back we are going to be talking about something

pretty exciting and that is one of our final projects Now by now you should have looked learned a lot of different

techniques for how to animate and apply motion to a lot of different things from buttons to models you've learned a lot you've even created your very first project where we

were working on that Gallery app now we're going to start taking that stuff a bit further and we're going to be applying it to actual situations when it comes to websites and

applications now here's one we're going to work on and this is kind of a little bit of an exploration that I put together really quickly it's basically

just like a National Geographic page you can imagine coming to a website and seeing something like this and then having you know these different types of

shows pop up and seeing the slideshow or Carousel whatever you would like to call it pass

through now I got three different screens here and all all varying in size and like I've said in the past the way

I've gotten these images was just through using unsplash the plug-in that I've used a lot of so this is the

structure now let's get into this really quickly so I can just show you and we can kind of play around with something you have these images as well so don't

be afraid to either create something yourself or build upon what I've done it's super fun this one's going to be super fun especially when we get into a little more complex prototyping of this

one so what we have here is we have the navigation and once again using Auto layout for everything so we have the

left column which is set to 40 pixels between items and I have those items in there which is this we have these nav

items then I have a little break point in between and then I have the right column which consists of the other items the search

and the login so we're not even going to really worry about these nav items unless you want to take this further and build something more complex I'm just kind of showing you what I went through when I was building these because it

could be helpful if you're learning how to use figma for the first time or even if you're just learning how to properly use things like autoo and just frames

and structuring your design files so I've always found this helpful when I've been looking to level myself up and I'm sure you will too now the header here I

just kind of pulled the National Geographic logo I have the vector in that logo icon and then they're both in the nav and you'll see

in my auto lout it's space between and they are centered so if I were to put that at the top you'll see that the nav on the right is going to move to the top because isn't exactly

the same height as the logo so I just put them Center like that so that's how I created the Nav Now the actual bottom

portion is a large text layer which just says exotic jellyfish I named this I know not really that original and then I

have the container which houses the length of this kind of show or this documentary whatever you want to call it

and then I have the Watch trailer button with a play icon and I don't have this connected in any way it's just there for Pure

aesthetic and then this is kind of where the other magic happens we have the carousel panel and within the carousel panel we have a couple of different things and let me show you that so we

have the main fill and this is going to be what we're going to be animating right now and it's just going to switch between the images based off of of where this loader is it's kind of like a

carousel that just kind of stops goes and then stops goes and it's going to switch to deep SE dive and inlane site

Etc so you'll see how that kind of works and below that I have the carousel options and so these are broken into three different things we have the

details and those are the three types of details and the rules in between and I have those spaced

accordingly so just 24 pixels apart and I have the details on a hard fixed

width based off of how I want to stretch this so I can stretch it like that really cool stuff and in the details the way I broke the details down we're in

two parts so I have the detail the right column on the right

here which houses the time and the date it also has the title of the show or

documentary and then it has a very large number so just to Showcase one 2 and three so that is how I broke down the design and you know what let's just jump

right in and we're going to get to prototype this really quickly so what I'm going to do is I'm going to actually take these and I'm going to copy them below

now I did do some little extra work to the imagery you can see that over here if you were to open that I did mess with some of the values just to make them pop

a bit but I will show you how I even manipulated those values as I created another effect afterwards so what we're going to do here is we're going to just

keep this really simple we are going to work on just just making sure that we have

this set to one and then when this then when it gets to this it's going to change and

then when it gets to this one I seem to have lost the fill on this one or maybe the fill is there where did you

go it's okay we will replace you and then the fill will change right here so we're going to need to create

some stopping points in between so we're just going to duplicate oops we're going to duplicate that page so if you do don't have enough room for the page to actually be duplicated

it'll just kind of go to the next spot on the right so we're going to duplicate that page we're going to bring that in and we're going to duplicate this page we will bring that

in and then we're going to duplicate this page and I'll tell you why because we want want this image to be there the entire time so even if it

does even if it does get to this point we want that to be a pretty quick transition to here and then it can continue onward same with this we want

to see this image for the entire time as well so we're just going to have to expand that and then same with this image

so the way we are going to connect this prototype is pretty simple what we're going to do is it's all going to be done by after

delay oh it's for some reason oh it already has an after delay on there that's why so we'll just kind of start the

delay and we are going to go to to this screen right there and we will do H let's do

5,000 actually let's do 4,000 1 2 3 we're going to do smart animate so if you already want to see this we'll just kind of do it right

now so we're just going to have to restart it so you can kind of see what that's going to look look like we have that loader

going and then we are going to make a quick change that is nearly instantaneous so this going to be again

we have that there already so we're going to have to find okay so this can be

300 milliseconds if you want we can even try and see what smart animate does in this instance okay so it just kind of applies a nice disolve so we're fine with that and here

is where we are going to just ramp up how fast we are able to do this so remember 4,000 one two 3 so

we got 4,000 and here I'm going to remove this delay that seems to have copied over we'll do it again it's just easier that way instead of searching machine

for the exact frame I always just like dragging that over so we'll do it over here remember

4,000 perfect and that is going to be the end and if we really wanted to Loop it back we can do something like this oh see I forgot again what we're going

to do is we're just going to Loop it back like this after delay we'll do maybe after

like 200 milliseconds we'll just dissolve it and it'll take us 300 milliseconds to do that so the reason why I did choose

dissolve in this instance is because the fill is gonna just shrink again and that's going to be kind of a weird little animation so let's see what

happens so we have that that's going to switch and then that one great so I think that's actually a very

good pass I can't believe how quickly we got that one done I even surprised myself a bit there so as you can see even on each screen I have the the

actual text already highlighted and that's why I mean when you're designing and you plant a prototype just keep it in mind make sure your files are really clean so you can go ahead and prototype

easily but also put the proper States for every single section so in this section we have deep C dive make sure

that has 100% opacity this one in plain sight make sure it has 100% opacity so that way when it does animate we don't have have any issues so this was a

really really easy prototype to make we're going to jump back into a more complex one where we're going to animate the background hey everyone and welcome back

you probably thinking Daniel what are we going to do next and that is a very good question because we did a really great job of actually connecting this original

prototype but I've gone ahead and created something a little bit more complex and you have the resource file for this so you can take a look at what I did we won't be going through all the

different steps because we've done it before but I'm going to actually explain what I did here and how I got to this final point the only thing that really changes between these screens in

comparison to these screens is that these images if you notice are a bit different than what we have here what we do have here is manipulated

images and if you look at my image you can see that I've added all these different layers to make it darker and then come into much more focus and be

much more saturated and the way I did that was by just adding a layer on top and you can do that any which way you like so this

one has a radial gradient so I just put another radial gradient and then you can swap the fills like that and then you can create your

own type of gradient any which way you like so you can totally do this yourself up to you but that's kind of how I

started adding gradients to this I also decided to manipulate the image in a way where it is moving and it

is a little bit blurred and you can do that with a

plugin so let's just go back a bit so if I go into my plugins and I go into image editor this is another plugin that I really like if you go into

jellyfish you can start manipulating like if you wanted to have a blur this is kind of what I did I went and I went in and blurred it a bit so you can do a

lens blur I'll show you what that looks like let me just grab one of the images from

here so that was the actual image I have in there rightclick plugins let's go to image editor so you can see it there and if I

want to do like a lens blur so you can start to see what that looks like and if I apply it it blurs the image now the reason you

may be asking why did I do that is because I am really interested in ensuring that when these images are moving they're kind of moving into focus

and I'll explain what I did I did the same thing for the other ones you'll notice they're slightly blurry and then they become much more brighter same thing here really blurry if you go into the lizard you'll

see see even has a radial background to darken it and it comes right into focus and it's really saturated look at the yellows and the greens comparison to this image totally poppy so let's look

at the Prototype so the way I have this setup is very similar to what you saw before you know I have the delay going 4,000

milliseconds and then this next one same thing so we have that moving as well well to 4,000 milliseconds and we have this jellyfish that's going to be

sliding up to the surface and then it's going to swap in so I want to show you what that actually looks like so let's start from the beginning

so this is the one that we built last time nothing wrong with it to be honest but if I were to think about somebody like National Geographic they have a lot

more money they have a lot more time to put more polish on this and not only that we want to give the illusion that this is kind of like a video or like a

threedimensional photo we want people to have that kind of weird Parallax look in the background that we don't really see so often so this is kind of how it starts to come together so we have that

kind of growing in front of you and getting much closer and then we'll move on to the next one so even this I have it rotating a

bit and coming into focus at the same time and then on the end it's kind of slowing down same thing with this one this one's kind of rotating a

bit and then it really pops when you get to the end so that is exactly kind of how I went about building something like this what

you want to do is you want to ensure that your image is a little bit blurry coming into focus and then really popping at the end while it's much more

larger you'll notice that this is scaled a little bit more this one here has scaled a little B More Than This One same thing with this what I've done is I've blurred it brought it into focus

and then as I'm rotating it you'll see the image is rotated in the background a bit it's definitely much more popping

when it comes to the colors same thing here as well we have the spin happening on the lizard right now the lizard actually is set perfectly straight then

it starts to kind of spin a little bit more and more and then you kind of tailor off to the way I finished and loop this one and that's how you can

really take this and make it pop like this I feel like that really speaks volumes when it comes to the brand of

National Geographic and just the amount of polish on this type of interaction we want people to get excited about these things and really the only way to do that is to kind of make your designs

come to life and this does a good job of that so I would love to see what everyone else has come up with I would love to see if you kind of took this in

a New Direction maybe tried new types of wildlife it would be really cool to see if you kind of could pull off that lens blur that I showed you with that plug-in

but also I would just I'm really interested to see what everyone has come up with because this is a pretty easy way to create a nice Parallax and a nice

progress interaction hey everybody I want to take a quick break here go grab a coffee grab a tea just take a break from all the

learning that you just did and I want to talk to you quickly about impostor syndrome it's this idea that you're not good enough that things are too

complicated for you to ever achieve what you want to achieve you look at other people at other industry experts and you

say I will never get there but it's just a symptom of learning this idea of you not being good enough simply means that well you're just not there yet things

take time if you want to learn a valuable skill well it's hard work that's why it's valuable remember how you felt on the first day

of going to school first day on a job it's the same experience but over time with repetition with practice you get comfortable you get experience and you

slowly start to lose that impostor syndrome now this idea of an impostor syndrome is great it means you're doing something worthwhile so don't use it as a negative use it as an encouragement

that you're doing something good that you're learning and your stretching your limits so with this break I want to propose that we do a quick exercise I

want you to stop the lectures again grab a coffee grab a tea and head on over to our Discord now in our Discord server if you've used it up up until now that's

great if you haven't head on over to this server and I want you to do something that I think it's super important to learning and that is using what you've learned up until now to

actually teach someone or help someone so you you can go all the way to let's say the coding and courses section and pick a topic that you want to help somebody in so let's say you go to the

python Channel and in here you'll have other students that are asking python related questions now you can scroll through here and see if you're able to help someone even though you may not

have the experience or the knowledge yet this idea of practicing and explaining what you've just learned to other people even if you're not 100% certain actually

is beneficial to your learning because if you're never teaching if you're never explaining and vocalizing and showing what you've learned you'll always be a

beginner this idea of teaching what you learn is a very important concept so moving forward as you go through the lectures anytime you feel like taking a

break hop on over to Discord and help somebody our motto here is that we're always kind we don't judge anybody we're all just beginners here we're all

learning so don't be afraid to answer things because you got to remember nobody's perfect except for Yoda Yoda is pretty Perfect all right I'll see you in

the next one bye-bye hey everyone and welcome back so we are going to be talking about something super exciting I know we talked about motion and micro

interactions are next micro interactions are so important and they involve a lot of motion uh sometimes they are very subtle usually they are very subtle but

Micro interactions are very fun and I'm going to show you what they are and why they're so important then we're going to jump into how we're going to create some of our own so let's Jump Right In so

this is a micro interaction over here just pulling to refresh and something is happening even just the interaction between this slider is a micro

interaction so let me show you exactly what they are so what is a micro interaction despite being small micro interactions have the power to make that

experience you know much more effective in human so let's take a look at the definition now if I had to Define micro interactions I would say that they're contained product moments that are meant

for a single use case and those little moments are a large part of all of our interactions daily I mean we need to think about the different things that we

actually interact with so you know maybe every time you set your own alarm the sliding back back and forth that is happening over here is a micro

interaction how about checking your notifications that little popup that may pop up when you have a notification and whatever app you're using is a micro

interaction what about adding to your cart if I was buying something at a store that is an interaction that click the feedback that

you get over there and what's happening on the screen so those are all little micro interactions micro interactions do a

great job at communicating the tone of your brand this can go on to be part of your brand signature moments I mean one thing that I think about when I think about a brand that uses micro

interactions to communicate their tone I think Facebook I know this is an example it's kind of overused but the Facebook reactions are amazing I mean just it

kind of cracks me up they're really great the subtle animations when you click them when you interact and hover over them uh to select whether you like or you you know you love something or

you're angry at something these little things they all communicate the tone of the overall Facebook brand and I really can't think of Facebook without these

anymore to be honest so a micro interaction has structure and I Know It kind of sounds weird I mean like you think oh they're

just kind of like a little animation or something but they actually do have structure and it came from Dan steer's book Micro interactions designing with

details so in order to create an effective micro interaction there are four essential Parts the first one is trigger the second one is rules then

there is feedback and then modes and Loops so let's talk about that the first one being trigger so we've seen this one already but a

trigger is this is what starts the micro interaction it can be like user initiated so in this case user is actually just kind of swiping through

something and there is uh some sort of feedback happening there or if I click a button and there's a check mark Or if I pull to refresh so those are all user

triggered but they can also be initiated by a product so that could be like a user getting notification so over here like if I were to click something in the

nav or if I were to click something and I get like a little maybe notification bubble that is uh system initiated these little clicks are all user initiated though so if we were to think of a

little kind of a bubble that would pop up or if these animations were to be happening when they want to get the users feedback that is a micro

interaction and that is the trigger like this so we see a little notification a bubble that is a great just a great

example of what a system triggered micro interaction looks like the second one is rules so this is the second piece of our structure over here and these really

determine how micro interactions respond to a trigger while also defining what happens during that interaction so I know I have an example here but

generally a rule isn't really seen by the user they're kind of the things that are happening in the back ground so when I click on this this needs to fill there needs to be a little uh kind of ball

underneath here to replace the text those are just the rules the actual interaction that's happening that isn't necessarily the rule that is laid out but that's just an example of what a

rule could be the third is feedback so this tells the user what is actually happening during a micro

interaction so think about like inputting something that is invalid in an input field or having a successful input field something is happening here

I can see when I click the outline of the input is showing so that is giving me feedback that I am clicking the carrot is flickering showing me that I need to actually enter something and

when I enter something wrong I'm getting actual uh uh error feedback or success feedback

the next is loops and modes these are kind of like the meta rules of a micro interaction and how it changes when it's used like sometimes micro inactions

won't necessarily change a good example is if you enter a password and a Google Chrome has saved your password that is like a micro interaction for kind of

saving passwords and entering passwords over and over again it changes over time based off of like the sites you visit and the data it collects another example I have here is what happens if I'm

talking to somebody and I'm uh inputting some text here and it kind of prefills um the types of words that I've already said in the past or the sentences I've already said in the past

and allows me to kind of you know interact much more easily based off of like past conversations so that is an example of loops and modes so

understanding the structure of micro interactions allows you to really design ones that make a difference but not every element can be a micro interaction I mean there's a lot that

can be and I'll go through some examples scroll bars are definitely a micro interaction they use triggers visual feedback to see the user kind of

changing the location of the page so that is a scroll bar that is visual feedback of um what is happening so that is a micro interaction generally elements that aren't uh a micro

interaction are uh static elements static elements that are always static are not part of a micro interaction flows that have multiple

actions are also not necessarily part of a micro interaction so just keep that in mind I I'll get into that a little more detail alarms are micro interactions so

they are triggered by the system they can also be triggered by the user so right here a system is giving feedback that the user needs to get out of bed and walk away for something to happen

here so I'm guessing the alarm is really really loud so that is a micro interaction based off of a system trigger now buttons can be part of micro

interraction sometimes so if there is no feedback when a user clicks a button then there really is no micro interaction so if I click a button and nothing happens to that button that's not micro interaction but if I click

this button you can see that the actual State changes and other things will pop up within in this realm that is a micro interaction things don't necessarily need to pop up but you can see that just

a state change on the button what about pull to refresh now this is a micro interaction the user triggers this and

they get visual feedback to that user action so I'm swiping down to get more data there is a feedback of the loader

and that is a micro interaction now swiping animations are also micro interactions so if I'm swiping in this case through

movies that is a micro interaction users trigger this they get feedback and that user has swiped an element what about notifications those

are also micro interactions so a system triggers a notification it pops up I mean it doesn't necessarily need to do this but

if it pops up here that is a micro interaction and it provides the user with feedback of a new notification now there are other

examples of what um like micro interactions can be and what they can't be an example like is a video player so if we go back to thinking about a button

a video player has buttons but an entire video player is not a micro interaction the buttons within the video player however are if you're adjusting the volume that is a tiny micro interaction

if you're pressing play on the video player that is a micro interaction the video player itself not so much even gifs gifts aren't micro interactions those are just kind of

images on Loop and they don't necessarily adhere to system triggered or user triggered behaviors so those wouldn't be micro interactions as well but all these different elements can be

made into micro interactions if they are either triggered by the user triggered by the system and give a visual feedback to what is happening so remember they need to follow that structure and that's

it for what are micro interactions so in our last video we went over uh what exactly is a micro

interaction and the structure of a micro interaction now I know that was kind of really in-depth but it's super important for us to understand how we can create really great micro interactions making

good micro interactions can really like push our product over the edge so let's talk about who why they are so important I think we kind of already have an

understanding but let's get into this so micro interactions don't usually get a lot of attention during like just a design process they seem like these

little small details of a broader much larger experience those details have a big impact on the type of product that you are building doesn't matter what

type of product I mean it just has a large impact and it gives your users a good impression of your product that's why in a nutshell why they're so

important now in most cases the difference between products that we really like and products that we don't really like I think it comes down to like just the Polish and quality of

those micro interactions like it's essential that we put a lot of focus on designing those small small moments because they really make up a lot of the app I know that sounds weird but think

about if Facebook didn't have those uh little animated reactions think about if we had like bad transitions between like

deleting cards and stuff like that and things were happening instantaneously I mean this goes way back to Motion in general now it's so important that we create those really great small moments

that make your app much easier to use and much more delightful to use so the piggest thing is that they provide so much feedback to our users now think about it your product should be

intuitive no matter what I mean it's no excuse it should be intuitive but this is what we should always strive for so micro interactions are something that you can achieve with this like just

providing feedback in general so the biggest thing to consider is like the user's Journey when we're designing for like providing good feedback now if a user is you know in the middle of like a

payment process or something like that could you imagine if they didn't get any feedback whatsoever that would be pretty bad I mean we need to look for places where the user might need that feedback

and reassurance and like this is especially a place that a user needs that think about like sending and transferring money uh more complicated things like that imagine like like I

said if a user didn't get that success or that confirmation that would be pretty jarring as an experience and and I personally would be confused I would be

a little concerned I would probably try and contact their customer service line I would really want to know where my money went and if the payment was successful so this is really important

just in general for your product it cuts down a lot of costs when not having to talk to users because you know you're giving them the right amount of feedback

you're making your application much more intuitive they also help prevent errors now helping users deal with error States

is a common ux practice but it's much better when we kind of prevent those kind of Errors from happening in the first place so when I'm thinking here like what happens if we kind of have

like inline validation when we think like this we can create products that keep users in control of their own experience so when user signs up to like a new product or service they often have

to enter like a password or username and generally like once they hit submit then they're hit with all the errors at once now that's bad ux what we should do is

we can easily handle this with inline validation we talked about this within forms we talked about this uh just in general this just good ux so this is

coming back again and this is a micro interaction in and of itself so having that inline validation while it's happening instead of actually forcing the user to click like submit or next is

really helpful but it's also helpful in the state of like thinking about like undo sometimes we make mistakes and click things accidentally and you know your product should always make it

easier for users to kind of go back and undo that action that they did in the first place with micro interactions they really help communicate that State uh

within this kind of like component over here and it really helps to suggest that further action is kind of possible so let's think about what's Happening Here the user clicks that they click like a

submit button and then they can undo with that line of text so mistakes happen all the time and just incorporating something like that could

really help now let's think about seamless experiences micro interactions can really make seamless uh interactions and experiences the less effort a user needs

to invest in an interaction I mean the better usability of the product now this is why we kind of strive for that seamless design that we always uh want

we don't want users to put too much effort into doing the tasks that we want them to do micro interactions can really help here when I think about that I think about like swipe interactions we

don't want users to like tap on these little areas we want them to be able to just effortlessly slide throughout and make the app so easy to use swiping

allows the user to easily move throughout the list instead of constantly tapping so like I said so much more easier but also another example is just pulling to refresh this

this is an excellent example of a micro interaction that is triggered by the user I mentioned this before in the last video but this also allows users to kind of pull down a list of items to receive

more information whether that be like emails more posts images you name it anything it makes the experience of browsing much more smoother can you

imagine if we didn't have a pull to refresh I couldn't really think of a design pattern that would really help you could have just like a refresh button but that would be kind of weird with a to pull to refresh all you have to really do is just pull the screen

down and everything just kind of happens on its own so making that app much more easier to use the next is encouraging engagement Now using emotion and design

in general makes it possible to form a better connection with your users that's just fact animated feedback works really well here like think about a heart

animation when somebody like likes something or maybe like a confetti pop would I have over here when somebody does something like a task that you want them to do whether they like clear their

whole inbox I know that's hard for some people but also in this instance it's something really big like you have been chosen for the job like that is huge and we want to celebrate those little

moments for people I mean like I said it could be something as simple as clearing your inbox to something much more uh bigger and much more celebratory like

getting a job that you wanted so this really helps encourage engagement because it's really possible to achieve a better result when a user achieves important goals or finishes a task and

these moments can really be reinforced with these micro interactions and by doing this you're creating that sense of achievement and can make that little moment a bit more special so that's what

we're aiming for and that's what I'm trying to get at is you can use these little kind of micro interactions these little animations to really bring users back into your product keep them excited

about your product get I'm just really loving your product overall now I'm not saying we should have confetti pops everywhere but just choose accordingly and it it's got to match your brand as

well and that's the next thing you know they can really help communicate the tone of your brand big surprise we got Facebook reactions here again but Micro attractions should always have a purpose

but that doesn't mean that they shouldn't be able to capture your brand so the last slide I talked about encouraging engagement and you know confetti pops may not be

for every single product I mean they may not be suitable for that but we need to think about our brand and micro interactions can really align with our brand and help even communicate it

further so if your Brand's tone is fun and colorful and joyful it's okay to try and recreate that within your micro interactions this only works if it

matches your branding so think about these different tips about creating like just better micro interactions and why they're so important because these kind

of form the basis of just how we create micro interactions in general and what we're thinking about when we actually go and plan them out so in our next video we're actually going to jump in and

create some small micro interactions with figma's smart animate and then we'll create our own animation with fig motion hey everyone and welcome back so

last time we talked about just micro interactions around like hovering clicking and sometimes I like to actually make just just animations for great feedback and one example of that is you saw my little kind of animation

of my bouncing ball this little notification bubble that was bouncing on a heart and I thought that was really cool and I think we should probably recreate that for our own project maybe

like a little bouncing ball for our cart something like that now there are different ways to create that you can go really simple what I did for something like this was much more in depth if we

think about Motion in general and animation in general it must follow the laws of gravity so what that means is if we think about how a ball bounces up in

down let me just create a circle cuz I don't really want to mess with that frame over here because this is where our animation is actually so I I'll show you how that works but the one way we

can think about like just gravity in general when we think about a ball uh when a ball hits a ground what happens to it it doesn't just look like this when it hits the ground it kind of

squishes just a bit it you don't see it it may not switch that much it may just like shrink just a little bit like that but it still

does and when a ball propels itself upward it stretches depending on how fast it's going so if we thinking about something like a really squishy ball

that's how it would look due to gravity and velocity and all different factors due to physics so what will happen is if it bounces up and then reaches just like

the max height you can go it will start to just recede and return to normal and then after pause in the top and then start dropping down and then hit the

ground like that and then same thing and over time it will gradually stop bouncing hopefully now we need to apply that to our

animation so let's just delete that now there are different ways we can go about doing that we can make something really simple just something like moving up and down and that's I'm going to show you how to create something really simple like that and I'll show you an example

of what I created that followed all the laws of uh physics and just gravity in general so let me Jump Right In I have a little frame here called notification

and within that frame I have a little layer uh not original naming but I have a little layer that is going to act as our notification bubble now what I'm going to do is I'm going to select a

plugin a very special plugin that is and it is called fig motion and here it is and what I'm going to do is I'm going to go to my

plugins go to Fig motion and open fig motion and it's going to open up like an overlaid window there it is and you'll see our layers

within that frame and there's only one layer now let me just give you a little walk around what fig motion is if there's a timeline if you've ever used something like after effects or

Premier Pro or anything like that screen flow they all have timelines now you can animate all these different properties like the XY coordinates width height all

that kind of stuff and you can animate it based off of key frames so these are in 100 millisecond increments and that is basically it what

you want to do is you want to set like a key frame and then go ahead and you can set another key frame and when you click into something like that you can adjust

it so this will move on the x axis and this will move on the Y AIS now when you're done you can actually just play and it

will it will show you what's happening over there so what we're going to do is I'm just going to give you an example um so if I were to just look at

this um I'm going to remove these and I'm going to select that y I want to move it up and down

and if we play we'll see that it moves down that's a terrible animation but you can see that we can start creating much more complex animations from something

like this so let's Jump Right In I'll show you a couple little tricks that you can do along the way and what happens after you're done exporting it I'm going to create something really really simple

I'm going to bring that down um I'm going to update my layers because any changes over here will not be updated here unless you update them

manually so I'm just going to start at zero and I'm just going to it doesn't really matter like you can select um just different points in time so I'm

just going to select 200 uh milliseconds and I'm going to select another key frame and what I can do here is I

can go into this and I'm going to type how about just 20 and you can see what type of Animation so I don't like doing a linear

we can do custom if we wanted to and it'll give us like a little graph and we can play with that if we wanted to but if you didn't feel like uh actually working with a custom uh just

the easing you can just select ease in ease out he's in and out so for this animation I am moving upwards let's check what ease out looks like so we're

going to play so that was really quick so let's just see what the animation looks like so you can see it's pretty abrupt

and then it slows down now if we use something like EAS in so it was

very very slow to move and then it's uh gradually cut just faster as it moved in and out so we can just do easy in and out because uh if we're thinking about

gravity at the most basic sense we can do that okay so what I'm just going to do I'm going to go to 1 second so it's going to take one second to get from top

to bottom but I'm going to make sure this is much larger in space so let's even go even

further um let's do 10 and okay so that looks good so let if we play that you see how it eased in and out so

it was kind of like it was slowly moving upward then when it got to the top it was uh slower now when we come back down let's scroll all the way to other side

so I'm going to go all the way to 2 seconds actually at the top I may just wait so I may wait for

like uh just a bit and when I get up here I'm going to select we're just going to stay we're just stay ease in and out we're not going to

move and then we are going to go to 2.2 seconds which is over here and we're going to go all the way back down so what I need to do is I need to uh select

my Y coordinates and I'm going to see the original I'm just going to select

that and I'm going to paste that within here and when I think about actually like something dropping it's going to

ease out actually it's going to ease into it and then it's going to drop really quick so let's see how that looks

so up down sometimes you just have to fiddle with these to get the right just the right animation see I didn't like that one you saw how it slowed down at the end that

makes makes no sense in terms of gravity so I'm thinking like you know when you hold you get up to the top hold and down okay so we can now start to fine-tune

this a bit maybe that hold is only just there maybe we start bringing it in a

bit more so we got at seven seven uh s 100 milliseconds and we can do like a half millisecond hold and

then um we will go to 13 the drop should be maybe a little more quicker so I'm going to go grab that key frame going to drag it all back

the only problem is this doesn't have a way to zoom in and out uh and grab key frames like just draging and just drag to select which kind of uh isn't the

best but this is great just working with INF figma so there we go we have like a little a little animation going now we can even go a little bit further if we

think about so this is more linear now I'm just going to exit out of fig motion so we have a little animation here now let's take a look at this

one where is fig motion all the way right there now we're at zero you can see all the different types of key frames I have in here just to get it right and as you

can tell I've created like a little bounce so it's going to squish and Propel itself forward or upward stop

return back to normal size and Propel itself downward and it's going to uh shrink in width and look much more elongated and it's going to hit the

ground again it's going to shrink and it's going to do the same thing but this time if you notice this when it reached that top height and then came down for the second bounce we've lost a little

bit of speed we've lost a little bit of force and we're not going to jump as high this time we're not going to bounce as high we're going to bounce just a

little bit and then just a smidge let's see what the ending of this looks like so just a smidge and then we're just going to hold

so that way when we do create this loopable gif it's GNA hold for like a couple of seconds afterward before it bounces again so it's not like crazy

bouncing in the corner of uh your screen and people are going to be really annoyed with this let's take a look there it goes and it's going to hold then it'll bounce again boom so

that's a quick little way to do it I'm going to actually uh show you how to break this down just a little bit more and um with this one in our next

video hey everyone and welcome back so we are GNA get into actually animating this a bit more you know applying things like uh physics to it one thing I just want to stress is when you're working

with animations like this they are time consuming I mean you can spend hours and hours perfecting these types of things and you need to really gauge whether

that's worth it for you this like may not be worth it for a version one of your product but it's really cool once you actually have something like this so

be very mindful of your time in relation to what you're doing like you can create crazy quick animations doing something like this you can go ahead and create

some very simple animations that don't take much time like if you want to show like a slider or like a loader like you can easily show like a loader going from

Z to 100% uh creating something like inic motion and it wouldn't take you that much time in comparison to like making like pouncing balls and other

more complex uh animations so just keep that in mind when you are trying to figure out what you want to build uh in terms of an animation and uh just take into account the time that's going to

take you don't want to go down that rabbit hole and uh not actually deliver anything let's Jump Right In so I have my uh notification bubble over here

selected I'm going to go into fig motion there it is so I think we have some pretty good timing right now so it's going to jump up and down now what we can do is we can keep

on like we can make this animation a bit shorter now let's just see how that looks start

from zero I like it okay and then when it comes back down it's going to just stop at like nine let's just drag that

over so that pause at the top was a little awkward okay we can even bring in that drop just a bit

more okay so we have our basic drop here now what I want to do is we're going to have to uh work with like just width and

height as well best way do this so if we were to start at say like one and before we get there with our width maybe

we'll so let's see what that looks like so we probably so 17 is our normal width okay so we

can this is my only gripe with uh fig motion is like I can't drag multiple key frames and it's such a pain to actually get that to work

properly so this can be at 17 and uh this will not be a linear we'll just do ease in and out

uh let's see what happens so it's going to Boom so I wanted to let me see what it's going to look so

it's going to go to 17 so this is obviously like you just need to figure out what's going to work for you

okay so our height needs to be different as well we will drop down to 15 I think that's

fine so 15 and then when it's going up we are going to H another key frame here so I'm just going to show you how

to get this started so uh for our height we are probably going to so it was at 17 now we can kind of just we can go to like maybe 18 so it's like a gradual

thing so boom you see how that starts to come together boom so I

squish so that squishes a little too much over there so Squish and really that's where we're

going to start seeing some more change so we can bring things in a little bit more and that looks pretty nice and like

right when we get to that top what we want to do is actually so let me just uh change that and what we want to do is when we get to this top portion we want

our width and our um our height to just return back to normal so we're at 17 here I think we were at 17 here as well

so that's good we can actually drag that that's just going to stay there we want our height to go back to

normal so we're going to go back to 17 we want to make that ease in and out so we're going to be like

boom and then drop and when we drop that's when we we go back to squishing it a bit so look at that that looks actually

really cool so um let's go ahead and do that again so when we get to the top we're going to

do so that's when the drop happens right there so I'm just going to set this key frame over here I'm going to set this height key frame so it's

just going to persist at 17 across these blue lines so the ball is staying normal now what's going to happen is so actually let's just put it over around

around here so it matches when that drop is going to start happening and then we can start uh messing with the

height now the height is going to stretch again so it's going to and when it hits there it's going to

shrink so let's do it an EAS and in out sorry this is where it should probably be so do you see how it gradually picks up

speed from the top as it's uh going downward so it's picking up speed we can even like if we wanted to we can even make it

skinnier uh let's do uh ease in and out beautiful Beau F so it's going to shrink and then when it

gets to there it's going to be kind of instantaneous you know at the top when we got to the top we like gradually got from like something that was more

skinnier to something that was much more normal over here so what do we get we went from 17 what do we have over here so we're at 18 in height like we could

have even went 19 in height so let's take a look perfect so when we're out there we can just go to the top and once we hit that

bottom I want to start to actually I just want to actually so I'm just just going to boom boom so those are going to stay stagnant and we're going to hit that bottom really

hard and let's see what it looks like so we're going to go back to 17 17 we can do it ease in and out just so it's a little

smoother and let's see what that looks like so one thing you're noticing that is missing is when we do get here our

width should actually be like 15 oh no sorry our width shouldn't be 15 our width should be something like um

19 so it's squished and the the height should be something like I don't know 15 so this is just basically kind of getting you started you can tell that

I'm going to leave this animation for everyone and uh you can just see that jump let's see squish

up losing momentum and everything going back back to normal hold briefly then everything gaining momentum

and then spiraling downwards really quickly much more faster than it went upwards and when it hits the ground squish so you can just kind of copy this

and gradually go lower you don't have to what you can do now is you can just kind of hold this and kind of loop a gift together what I would do next is you can

either export it as CSS or a Json file what I usually do is I go and I click render and you can choose whatever format you can choose GIF and the frame

way and enable the loop and you can set any transparency color if you want if I have my frame with no transparency and then once you render it it will actually take some time to render in the background there's a

little percentage and it'll give you an actual link where you can go and download it so that's it for how to use fig motion I mean you can make some really awesome

animations as you can see here's our render just playing out really nicely and once you get that gift all you have to do is drag and drop that right into your file and you have a gift that you

can use put it inside a frame and you can use it as an overlay if you need to for a cart and uh anything else so that's how you make an easy animation

within fig motion hey everyone and welcome back we are going to be creating a cool smart home app and this is going to take a couple different videos but we're going

to go into different types of interactions we're going to create and we're going to get into some more complex like swiping interactions when maybe adjusting temperature and stuff

like that so you have the final design files you also have all these design assets that I have and you have the prototypes and you can go ahead and take

a look at what those are going to look like in the end but I encourage you to kind of work along with with me maybe create a similar type of app doesn't need to be the same but what I'm going

to be focusing on at least with this portion is toggling on and off these different states so let's Jump Right In so right

now I'm going to build this little screen pretty quickly I already kind of have some of my assets ready and I'll get into how I've built those as well so what I'm going to do is I'm going to

press F and I'm going to grab an iPhone phone screen so there we go we're just going

to call this our smart home app and from here we can actually start already creating some parts so I I've

kind of went ahead and created a different logo for this I mean you can you can call it whatever you want I called it smart not really original but it's going

to work for us and we have a header and this header is is an auto layout header and it has an avatar another great resource I just want to kind of

point this out for anyone looking for things like avatars is to go to content re so content re will allow you to kind

of just grab an image so I can just grab this image click it and it's going to automatically throw an image in there for us so we'll just use that one that sounds

good okay so we have the logo and the image over here we can push this down a

bit and I think the next thing we want to do is maybe stagger these pieces so I have them set up like this so if I turn on my grid oh I don't

have a grid so we can create a grid if we want and to do that we're just going to click on the

frame and we are going to go to layo grid and we're going to switch that to columns and we can do

like a columns margin of 16 and a gutter of 16 so your gutter is the

space between these red columns and your margin is going to be the space on the outside so we'll set that to 16 as well and set it to stretch so that way if we

do stretch here design stretches as well and the the grid stretches as well so I'm just going to snap this to the grid a lot of

people don't use grids I love using grids because it's just super easy to design with now getting into this little kind of thing over here I have a total

of four devices so it's split into two different sections so we can just rename this

to title so I have the icon the more icon and then I have the title there and then I have kind of like a subtitle and and a title stack like that in an auto

layout so that is the frame they are four pixels I have it just set doesn't matter as long as it's left align and it's packed perfect and we can

just do fill the container so it's going to automatically go all the way to the edge same thing with the content within

if we just select that and select fill container it's going to do that as well so if we do resize it we're going to have it wrapped the next line This Will just leave to fixed width cuz we're not

looking to scale that in any way now let's get into the actual smart devices that we have here so I'm going to turn off the grid

for a second and we can scale this nicely so I

have these actually set up as their own rows so there's two rows here and inside the row there is a container that hold the toggle

button and the toggle Circle I created this toggle actually with the auto layout feature so if you look it's 1.5 pixels around you don't have to really

worry about the space in between because it is kind of a fixed width container over here you'll notice that's fixed with and then if I want to turn the toggle on I can just do that and

then after switch to the color here to something a little more nicer so definitely easy to work with I love using

it I'm sure you all know I love using Auto layout so this is the other container as well that houses everything so the toggle on the

bottom as you see and then after I have the icon over here that I grabbed from I think it was the noun project and I'll

put that resource for you all and and just below I have the text so I have lighting text right here and in this little section they are

spaced 12 pixels apart so it's a pretty large icon okay and that's basically kind of how I created the container now just to note that the container has 16 pixels

padding around and it's all left aligned as you can see within autoo and it's spaced between meaning that it is acting like a flex box in way this over here this kind of container over here is

going to be at the top and this container is going to be at the bottom it's just going to create space between so if I do stretch it you'll see that it acts accordingly and they are both set

to fill the container the row and the row has 12 pixel spacing and the same is

for everything else so we've created a nice little responsive container here which we can move in any which way so

that is where our main controls will be I even have the active controls here as well which is super helpful and I need to get the nav so let

me just grab the nav from another file I have open so I have the nav over here and this is essentially the same type

thing that we've been using before you know the auto layout feature again and the way I have it mixed up here is it's just going to be 20 pixels on the side 20 pixels on the other side and it's

going to be space between I didn't give it too much thought but it's totally up to you if you want to create something on your own or follow along with these exact

designs so that is how we're going to place it it can kind of sit like that for now you know we can actually even bring this into a

container on its own surprise surprise Auto layout makes another appearance

and we can do that and we can just kind of keep it white for now cuz we can do some pretty cool things with the background here so

you'll notice that it's not scaling properly and if if we just switch that to fill container if we select all these containers inside that container we just

created now it will perfect and we can get started here I have this kind of thing on the

background here and it's totally up to you if you want to use it it kind of adds a little bit of a nice look so I'll show you what it

kind of looks like so these radials these kind of circles whatever you'd like to call them I'm going to send them to the

back and then I have this background blur so I'll show you what that looks like when I throw it on here so let me select both of those things

the radials and the background and I'm going to send them both to the back so what I've done here it's just a background that's set to 20% and then it

has an effect called background blare and on that effect I have it placed to 100 and that's going to kind of give me this kind of like iPhone look where they

have those models that come up so you can do the exact same thing with yours I'm going to actually just modify some of these colors a bit because they

are you know they're popping a lot so we can keep them more monotone or just a little bit more

scaled back in terms of brightness there's one let's take this other one and do the same scale it back a

bit so I think that looks pretty cool we can even do the exact same thing for this as well we can and bring this down

to like 20% and add an effect so we'll do background blur we do oops not 10 we do

100 so you kind of get this nice little effect going on here and if you wanted

to you can add a nice little fill on top of it all just the background it's set to solid but I'm going to just do like a

linear blur and so if you wanted to create a bit of just a bit of contrast you can do that

so I have this at to 60 we can just like bump it down to 40 a bit and then we

can create this linear gradient that's just kind of passing through you can even just kind of keep it more to the bottom

here just so you you can kind of see a little bit more of a change between the card over here and the

background I kind of want to give users a bit more terms of actual

change in color so we have the red and that's kind of like a really jeury red that's a little bit more gray so there is a bit of fine tuning that kind

of goes into this stuff let's go back and make sure our other one is there there we go and so that is kind of our first stab at this design and

when we get back we're actually going to kind of dress this up a bit more and then start animating these kind of toggles and I'll show you how to do that really really quickly so go ahead you

know kind of take my advice and go through this a bit more see if you can get it to a place that you really really like and then

we'll get into toggle animation so we can create those like micro interactions right on the page and showcase like what that looks like if it's going to be a background color like this and then

showing like the temperature gauges so please post your progress I would love to see it and let's move on to the next

video hey everyone and welcome back what we're going to get into right now is we are going to animate this little toggle

and the core corresponding colors for the backgrounds so we have lighting and we'll do cooling so let's get right into that what I'm going to do is I'm just

going to duplicate this screen so we're going to have a couple of different instances let me just command C command

V again and again looking great okay and then we will just kind of pop this Row in

to there and we can just kind of get rid of that and what I've done here is I've just added another

text container over here so this is an auto layo container with the circle for Celsius 21 for the number and then I

have the on text right there as well I've also kind of manipulated these um these

little air conditioning lines and I've added lights for the button so we're not going to really worry about whether

those little icons are going to animate right now we can do that on a smaller scale if we wanted to but I'm really focused in on you know making sure these

toggles work as expected so what I'm going to do

is I'm going to actually just copy and

paste and do that okay so we have just this one that is left oops command c not

command X and let's throw that in here command V right in there and delete so we have a couple of different states

here and let's actually animate make this so we'll remove all these flow starting

points and we'll start with this one so if I were to click lighting I would like to go here and we'll do it on top and we'll

keep everything smart animated and we'll keep it at 300 I think that's pretty good and we can actually see what that looks like let's see what that little thing looks like and I just want

you to remember that let's bring it up so when we did start this we had just this kind of background of white and then we had the

color afterwards so we added that color and there we go let's see what that looks like so we saw that change really

nicely so that fill changed as well so let's take a look and make sure that everything is named appropriately so we went to this screen

first okay everything is great okay perfect so that's going to work like that and then we're going to just have

to like link all these different screens up so if I were to click this one I would get the exact same now if I were on this

screen now if you notice that now this is kind of where things may get out of hand a bit so I want to go there if I'm on here

I have to to click on this one because we're going to fill both at the same time and if I'm on this one if I'm on this one and I UNT toogle that I'm going to go back to that

because that will be off same thing if I untoggle that one it be on that one and if I un toogle this one while I'm on

here I'm going to go back to the beginning and same thing for this one if I do this I'll go right back to the beginning so now we've created like a

huge Loop so we have that we have this and we have it turning on and off really

nicely and that's how you can create some really quick toggle micro interactions within your smar home app I would love to see if anyone came up with

something different for using toggles within like a similar app or a website it doesn't matter where you're using it but it'd be really cool to see how you use like the interaction to affect

something else I remember when we were talking about like parenting and stuff like that we were talking about when something clicks something else it causes like an effect elsewhere so we

know these two are kind of married to each other and that's how you create a quick toggle animation hey everyone and welcome back

now we're going to get into a little bit more complex interactions now what I have here is a

temperature kind of dragging interaction that I've created now you may be a little overwhelmed with what you're looking at here and I'm going to explain

it to you and I'm going to break it down the best way possible so let's go down and pick this apart as to how it is

designed and what I was thinking when I was actually creating it so the beginning let's start with the header now the header is just pretty

self-explanatory I mean we have a regular frame and inside that frame this is centered and then we have a back arrow so nothing much Happening Here

same thing with this kind of secondary navigation I created you have the name of the type of smart device that we created and you can tell that lighting is there television is there and it's

all kind of connected back to what we have here and this is where you can kind of take this project and keep on building upon it if you really wanted to you know change up the design a bit the

visual design at least even change up the ux a bit to suit your needs but this is kind of the way I've created this kind of secondary navigation you can swipe through that interact with it any

which way you'd like now we have this kind of main part at the bottom where you can create another toggle interaction I didn't go ahead and do that right away I'll show

you how to do that and we have different kind of settings for the type of heating and cooling air conditioner that you have and that's totally up to you in

terms of if you would like to fix that up or not now this is the more complex part and I'll break this down piece by piece so this is going to be our main

interaction piece this is what I have called temp now in temp I have a bunch of different little numbers and you'll

see them rising from 21 22 2019 so I only did it four times because I don't think it takes much to really really showcase what you're

trying to Showcase here you don't need to go through all the numbers so I have them all lined up accordingly and I have them all sized in a particular way meaning the main number is going to look

like this it's going to even have these Styles so it's a medium DM SS it's 100% black and the number below it and above it are going to be the same

20 and 22 are going to have the same style so it's a regular DM s with 4% opacity and it's going to be smaller

you'll notice the font size there and then the 19 and the 23 are going to be even smaller because we want these to kind of fade a bit into the

background when we're swiping here so these you'll note the actual size is getting slightly smaller we are going 3%

opacity and then we see 18 and then I think I think it's 24 and those are barely visible at 1% and they are a bit

smaller as well we even have 17 up here I have 16 and 15 just in the background because we are going to be going up to higher numbers we are going to be going down to lower

numbers so those numbers we do have to account for they are going to be coming into our screen view and we just want to make sure that we can see them just

barely it adds to the experience so we need to account for that as well but the only difference here is you know we have

a 15 16 and 17 that have a 0% opacity but they all have the same font

size so we're just using 32 for these font sizes that are you know the ones you can't see these ones are 32 as well so they'll just come into the picture

over here so you didn't see 24 before and you see the 24 now same with if we were

going to 21 20 you'll start seeing 18 you'll see 17 and it's up to you if you'd like to you know keep on going

with it so that's just the temperature gauge and the main swiping component that's going to be the main thing that you're going to be interacting with or at least starting your interaction

points from so let's just close that for a second you'll also have this Celsius little button here or

text and I have it just kind of set to an outline cuz the only thing that changes about this is it's going to go in and out based off of the sizing of the number so if I were to copy this I'm going to copy that and then paste it

over here you'll notice that it's too close to the 22 so you you will need to kind of move it over a bit when the next screen comes along so I'll show you what

that looks like when I kind of start that prototype up now the other thing I do have let's kind of go through it a bit more I do have this kind of

background element frame and you may be asking well what the heck is that and that is just

where we keep our motion blur which is not is hidden I've hidden that and I have two rules on each side one on the left side and one on the right side

and I have that done for every single one here and this is where that kind of thing comes in really handy so when I do

swipe I want 20 if I were to swipe from 20 to 21 I want 20 to switch to 21 but I don't want to go directly to this screen I want it to go to this screen you know give me a little bit of color and you

can animate the color any which way you like or change the color so I have it set to like an orange and you can see what that kind of looks like I have the

background motion blur that's right there and I also have on the background elements the different types of fills so

I have this fill here which is a radial blur and we can go into that fill and I'll show you how I created that basically it's just the color and then

fading off to zero on white so you can kind of place that any which way you want the reason why it cuts so harshly over here and kind of like that look is because we

have the main background elements frame set to clip the content or else it would bleed on out of this kind of frame so I

have that done for every single scenario down here and that's basically how this prototype looks and why it looks this

way and also how it kind of is meant to be created and used so you know now how I've set up my

file so when I am moving from 20 1 to 22 I am literally shifting this

down creating making sure that 20 is looking like this and fixing all those numbers manually so it is a little bit

of a strenuous process but totally you need it in order to actually make it look the way you want so let's jump right into the Prototype and I'll show

you what it looks like first let's look at the Prototype so here we have a lot of different things happening we have the on

button so we can actually start from this Frame so we'll just kind of create a starting point we'll just call it

temp and from here if you swipe it'll automatically turn on so 21 to 22 or 21

to swiping to 20 and you can turn it on by the toggle and it'll just kind of turn it on here and from here what's going to happen

is after these are kind of in their state you can drag it if you'd like I'm

going to actually delete these drag actually no we'll actually keep them so I have these drag 1,000 milliseconds on

each you can see I have them here as well so this one going up 1,000 milliseconds this one's 300 we can

change this one to 1,000 so change that to 1,000 milliseconds this is another on

drag so we'll change that to a th000 we'll change that one to 1,002 so we want to make sure we keep everything really

consistent so we have it set to a th000 perfect and then we want to make sure it's just going to kind of fade into here and then after

delay right into the exact same number so I'm just going to kind of go through here and do my due diligence on the timing so I see some are set to

300 so we're just going to set that to a th000 same thing over here we're going to know that 19 is going to go to 20 and then 20 is going to after delay to 20 but we're going really quickly we can

actually swipe between all these if we truly wanted to but that's fine this is going to be a th000 and

then we'll be able to go here for a th000 on drag beautiful this one will be a th000 and this one will be a

th000 so you can tell that these prototypes are getting a little bit out of hand that's totally fine they are totally worth it okay so

let's take a look at what this looks like and if you really wanted to you can you know connect this all to this main prototype I like to break out my flows to be honest because even

though it looks nice to kind of have one big app that you can like showcase to people you can do that easily but I like to kind of break it down into different parts of the app so it just makes it much more manageable because then after

you have these spaghetti lines all over the place and then it gets hard to manage so now that we're in our prototype I'm going to go to

Temp so I can see my hot spots just by clicking and you can see these things are starting to move because it's off but now it's

on so now if I do that I can actually move throughout the prototype by dragging pretty nice little animation that's

coming back with this color it's giving me nice feedback on what's happening with this value change also kind of seeing these numbers pop in and out it's

not harsh it just gives me enough of what I need to know what's next so it's really easy to use but this is how you can put together

a swipeable t temp interaction really really beautiful let's go back let's take a look at our original over

here so if we wanted to actually connect the two let's just actually duplicate them all let's go on our design file again I'm going to hold down options while I

do this option and shift so if we actually wanted to create a new larger prototype

we can do that so if this was like we'll just ontap that cuz we have

it set to a state that's not on so that will need to lead to there so 300 300

milliseconds and I want no smart animate move in from the right we're just going to have that slide right

in and we'll do the same thing for this bring that over here no smart animate perfect this one

we'll have click right there beautiful this one

hold off click right there okay so let's take a look at what it looks like when we start piecing together a larger flow so we have it called larger

app so we can even take this button here and just go back so I have it set to move out so this screen's going to move out kind of like the way it came in

oops it's because it's on drag oh it has the ontap already set to it so we'll just do that again move out perfect okay let's do it

again there we go so same way it came in we have it and then we can start interacting with our prototype and that's how you create a really really

simple kind of complex temp interaction when you're trying to like turn down your temperature cuz it's so hot in your home or you want to turn it up because you are freezing that's the way to kind

of make it look and I'm sure just following some of my tips in terms of how I set this up and to ensure that you know you keep with the types of styles

that are here you'll be able to easily create some draggable items like like this in no time so I would love to see how everyone else's smart home app turned out because this is a pretty

exciting thing and it's pretty exploratory in nature so I would love to see some new colors some new applications for these different types of

numbers and just overall I would like to see if anyone kind of mixed in some other interactions as well so if you have any questions don't be afraid to

ask hey everyone and welcome back we are going to be working on a new project this is a food delivery app that I came

up with now there are several screens here and we're going to be working on a variety of different interactions with just these screens now let's go through

the designs together so this is the basic home screen there are a couple things here that I want to focus on animating I want to be able to show you how to

horizontally scroll through here I've already showed you before but we'll do it again with this I've created a massive container and inside this container there are a lot of different

categories so you can already see what is inside here there is a bunch so we're going to be doing that also we

have a pretty cool hand over here that I pulled from another file and we are going to do some pointing

animations just to bring attention to the code at the bottom here once we are done with that we're

going to move on to our list now this is a pretty massive list and I just created some of these cards pretty easily you

have a bunch that you can work with as well you you can see them right here they're made with an auto layout frame and inside that frame you have the

bottom info card and inside there you'll see the button for the amount you'll see some

information over here in another frame which has the review and the time and once again I am

pull these icons from Material icon so you can find that resource

through the plugins and then I have the title above that I do have the

image let's take a look so the image here is fill in the container it has a fixed height so it's not going to be moving around so this is the card container

that we're going to be working with as well and one thing I do want to show you is how to have a new list of items come

in from the right as you transition so if I were to select healthy so we're going to be doing a little bit of interactions around that we're also

going to be parenting and masking a bit we're going to be using this image over here to go into this cheese pizza screen

so this is the item page and we're going to be able to connect the two similar to our one of our very first smart animate projects when we worked on the photo

inspiration app and from here we'll have a couple of Staggering effects when it comes to the content that comes in and I'll show you how to animate this type

of overlay in a couple of different ways after that we'll work on adding

something to our cart and from there we'll be jumping into the actual order so we'll check out in the card screen

and simulate what it's like to wait for your order to arrive by The

Courier and that is the design for the food delivery app if you have any questions don't hesitate to ask

you don't have to use these designs you can come up with your own designs as well and if you feel like some of these prototypes are pretty complex or you

just maybe want to mimic them and don't know how ask questions please we will do our best to help you and you will have all the assets available to you as well

so if you want to take a look at all the different details they are all there for you if you want to reuse the designs they're there for you to reuse and these

prototypes they're meant to be very generalized aside from this one where we're going to do an interaction around a simulating order a lot of these different types of interactions can be

used in a variety of different apps so don't worry this is all reusable so let's jump

in hey everyone and welcome back we are going to be starting with this little hand and and this container we want to make sure that

these are both in a position to be interact with so we already have this container set to horizontal scrolling which is great so it's already going to

be working now the next thing is we need to worry about this hand so let me just click my design

panel I'm going to just make sure that everything is set perfectly

812 is the size of the iPhone so we're going to stick to that and we will create a new frame we can just command C

command V it okay now this is the final frame and we're going to work on this one so we can do a couple different things

here what I want to do is actually let's just move this out of the frame a bit like

that and I'm sure you all know what's going to be happening now we're going to select that frame select our prototype

panel and move on over and here we'll set to after delay and 200

milliseconds we'll do smart animate we'll set to a th000 I think a th000 is perfect so let's do

that and let's just we can rename our flow just to keep things as neat as we possibly can I know I haven't been really doing a good job of renaming everything but

that's something you can do for presenting to others so let's press play okay so we're just having this load

in another thing that I we didn't do was we didn't set the 11 Pro

up we can even fix the background so this is our app let's bring it up to size oops

perfect and we'll just open up the sidebar for the future so that's pretty cool so one thing we

can do as well is we can Loop it back and forth and we can just do it on after delay let's see what happens when we do

that so that's pretty cool we could do something like that or I if we didn't want it to be so redundant we could just

kind of remove that and not show it twice so let's just take a look again so it's just something maybe the

user sees when they first log in and then they can also see these different

categories so that is great now we have an easy way for users to see categories and also bring attention to the different content over here another

thing we can do is we can even move this content over let's see what happens when we do that that looks great

and how about we remove this Auto layout we'll remove it here as

well make sure to not use the final design for this make a c copy of the page so we can stagger the

content like that and we can also bring the opacity down so let's see what

happens so that was pretty cool but the one thing I didn't like so I'm going to bring the opacity up again one thing I

didn't like was that they were all staggered and I feel like only this should be staggered this is what we really want

people to to see so let's let's fix that okay now let's try it again great

okay and now we can go to the 0% opacity and I think we can even make this a little bit longer

in duration so we have it to 1,000 how about 1,500 because now we have a couple different things animating at the same time wow that looks pretty great nice

and subtle and the delivery of the content really forces users to see this code so let's see that again so I'm just

pressing R over and over again I love it and that is a way that you can even incorporate some subtle motion into

something as simple as a code card or something of that nature anything that really you need to bring attention to in a subtle way I know I kind of went maybe

a little bit overboard with the finger pointing but you could do something similar like this just with the text and that's how you can bring

Parallax into your mobile app hey everyone and welcome back we're going to be working on a list transition next for

our food delivery app so let's get to it so I'm going to grab the home screen again I'm just going to make another copy of

that and I'm going to bring that over here so we can keep this as is and what we're going to do is we're

just going to make another copy so we're going to start with what is

here and we are going to go with another color for this fill cuz we're going to have people click

healthy so we'll change the fill there so I just pressed I and I got that little picker so that gives you this

picker here if you press I so we're going to do that press V to get back and then I'm just going to push this

over just making sure we are as aligned as possible doesn't need to be perfect since we're just kind of working on this just to

learn so that's perfect and then we will work just next on something else but let's just see what this looks like

so if I were to click healthy so first of all we should have horizontal scrolling in here if we were to click that though we

will go here and we'll smart animate and it should take us around maybe 300 milliseconds this is something we're going to just kind of have to test out

so we'll go to flow one which is our new updated one and that was pretty quick let's just go back to the

option there so right now I have in this frame on this page it's hard to see so I'm going to just select all the options and bring

it over but if I select recommend I should be able to go back so let me just kind of Select that even though it's off

screen and bring it here so we'll do 500 and this one will be 500 as well

perfect I think that's going to be good for timing let's see oops H so we are getting a little bit of

a weird interaction right now what we can do is we can stop the horizontal

scrolling so even though we aren't getting the right prototype interaction that we want we can kind of fake it a

bit so that way it behaves the way we want when somebody clicks so something like that rather

than being able to scroll through maybe we can show that in the full prototype but when we're working on individual Interac actions about like list then we

can leave that out of the picture let's take another look R to restart so I can't drag it if I click it we get that nice

interaction beautiful so that is the first part I think it works perfectly let's just delete this other

interaction going back unfortunately that's just not going to work for us right now and then we are going to create

another version so we can go ahead and swap these out for other images so I'm just going to go to my plugins and go to unsplash we can do this really quickly

together now we need healthy food so let's just type in healthy food and see what comes up okay we can just

say salad we're not going to worry too much about all the different details here veggie

dish I will bring that in even though those are not all veggies

but we can bring in yogurt what else do we see here

avocado avocado uh bowls I don't know what those are but we're going to use them perfect I think those are

avocados and we need two more I think this is oatmeal so

oatmeal okay and one more we are so close we can just say soup

okay great and I think that's just going to work for now and we're going to animate this

in let's create one big frame we're going to call that

healthy we'll call this we'll just do short form for recommended same thing what I'm doing is I'm just grabbing them all and I'm right

clicking I'm not right click I'm using my shortcut but you can just frame the selection and renaming it by pressing command

R you can actually rightclick and go into here to rename to see even your shortcut shortcuts are really going to

help you save time I cannot stress that enough okay prototype let's get to it so we have that first transition and then

over here we're going to add another one where we have after DeLay So after that happens we'll just bring this

in and we can push in so let's take a look so there's a couple of ways we can do this so that was actually really nice let's go back

and even cut down the time of bit cuz we don't want people to wait so we scroll down I want to eat something healthy so I'm going to select

this option and that was great and there you go you've kind of once again staggered the content delivery cuz these two are

very separate but also created two nice little interactions one interaction and one transition for this pill and the

second transition for the list of items I think that was great let's try it again beautiful and we can just experiment

with a couple different things like you can use move in if you you want but I don't really like that you probably need a background for your

frame for that to work you could also do slide in which will fade the content a bit so let's take a

look so that one's all right I think the best option in this scenario is to just push the content out we can probably even fine-tune that timing so It Isn't

So abrupt beautiful let's do that one more time with everything with in

view great and that's how you create a very nice list transition hey everyone and welcome back I showed you in the last video how to

create a pretty cool overlay and I want to show you another way we can actually create an alternative to that overlay method it so figma generally has this

one method for creating an overlay but you can actually do that by creating another frame rather than having an independent frame for this overlay so

let's actually Jump Right In and I'll show you how to do that so what we want to do is we're going

to keep this Frame we have the overlay description inside of it so we'll keep that

there and what we're going to do is we're going to duplicate it and we'll go backwards in time I'm going to grab the controls from

here and put them there and then I'm going to grab the overlay description and bring it all the way

up so there is one of the overlay descriptions and I actually have it so you can expand it you'll see it here as

well and I'd really love to see how everyone takes a stop at this when it comes to the overlay I've just put some basic information there about the the

pizza that we're selling but I would really love to see if you can create a little more interactivity in that

overlay right now I have just an add button but it really be cool to see if people would make an add button plus the ability to add maybe more than one pizza

that would be really cool okay so what I'm going to do is I'm just going to expand this Frame like

that and I'm going to do something really cool here I'm going to actually have this image inside this Frame react to this expanding so let me show you how to do

that as well first we got to find those Carousel dots that disappeared so let's find those there they are so we're going to just bring

them all the way up so there they are and we're going to take the image here and we're just going to bring it in like that and we'll

increase the gradient just going to bring it up like that okay we can actually do something pretty

cool here I'm just going to delete this Frame because we already have it and we'll bring this back so

let's start linking this together I want to show you a couple of different things we're going to do here first we're going to do a drag interaction on this

overlay so we'll just select the overlay and select this Frame as a destination and we'll apply on drag smart animate let's do something like 350 and

we're going to do the same thing here we're going to apply an on drag we'll to 350 as well to this

destination so one thing about copying frames it's going to copy the Prototype link attached to

it so let's jump in so we have 1 millisecond going into there I think 300 is fine for

now and then let's do this by back option so like I said you can't actually use this option in this scenario because

this overlay will block it which kind of sucks but it's okay this is the one way to get around it cuz

generally when you have an overlay you want the user just to focus in on the overlay but it's been used as a design pattern much more recently look let's just a

250 we're going to set this and like I was saying this has been used as a design pattern more of like a design Style just to give the illusion

of an overlay but bring a lot of focus to one part of this screen but users should still be able to interact with this if they want to swipe to see more pictures you all know how to already

already do that but this is going to be pretty interesting cuz we're going to kind of work our way back from this starting

point while also interacting with this overlay so we'll just call this overlay continued and let's jump right in and

see how that turned out so here we are okay so we can drag and that's pretty

cool we have the image actually shrinking and the carel dots moving with the

overlay so that's really great so you can just gently drag it to see the nice subtlety of the animation

and duration and then if we click back so let's do that again if we click back we're going to see

this overlay shrink into the bottom and off the screen and we're going to see these controls all remove themselves from the screen as well so they'll just

dissolve because I don't have them in this secondary frame where it's black and then that will just go back to this button which is really

smooth and that is an alternative way to create an overlay and some pretty cool parenting techniques when it comes to

how the different UI elements interact with other elements that you can interact with hey everyone and welcome back we're

going to be talking about how we can keep on improving on this delivery app now we left off at list Transitions and now I really want to get into something

a little bit more interesting I want to apply some motion design principles that we talked about earlier I'm looking to do some masking here a little bit of

parenting and then I'm going to be focusing on some overlays so let's Jump Right In as you can see over here I have several assets

from the main designs and I've kind of started to break them out let's look at what we have so you may notice that

we have this new card that I've designed and the reasoning for this is because figma has a little bit of a bug

when it comes to applying a mask and what I'm trying to do here is when I click this button we are going

to jump right into this screen and what should happen is that this image over here will

expand and we're going to actually marry the two between these frames so we'll see a nice smooth transition from one to

the other so let's get started one thing I want to do beforehand is actually focus on making

this feel like a whole button so what I'm going to do actually is I'm going to duplicate this Frame I'm going to leave this one as the

original because I'm going to do something interesting here I am going to

create outlines of all these different layers I'm going to remove the auto

layout and then I'm going to select both of these text layers and then I'll do an outline stroke because what I want to do is I

want to click this card and have it shrink and you can't really shrink the text so we need to actually turn them into vectors same thing with this button

here we're going to remove the auto layout and we're going to make the text outline stroke right there so now the text we've made it into a

vector and we're just going to select everything as its constraints to be scale and scale so we had the

button we're going to do the promo copy the constraints will be scale and scale and that allows us to scale

everything okay this one is fine we'll do scale and scale here and I think that is enough so

what's going to happen is this is going to be the first frame we're going to copy another frame over and we're going to shrink this just a

bit just like that and what we're going to do is we're going to modify the drop shadow so I'm going to make it seem like

it's gotten closer to the background like so and then I'm going to take that first

frame and duplicate it one more time perfect I'm going to just move all these frames over just so we have a neater

place to work I'm going to bring this down with the rest of our designs and you'll have all these designs as well so don't be afraid

to go ahead and use them okay so this is the other design here let's actually move these out of

the way for now so we don't focus on them and let's just work on this button really quickly so we're just going

to we're going to go to flow starting point we'll just rename it masking and overlay

that's going to work for now and what we're going to do next is we're going to click this button bring it

over we'll just do 100 milliseconds smart animate we're going to select the whole frame and use

an after delay and we will keep it at one just so we give the user some good feedback that they've clicked the button so let's

press play and see how this turned out oops okay I think it's called flow one we'll go back to

that so we have a nice little interaction there so I think that's good enough for now the next thing that we're going to

do let's copy that name it's weird that we had a flow start in there okay let's just rename this to that okay now what we're going to do is

we're going to transition into this page so what I've done is I've kind of already started here a bit and I've created a new

frame and I've used use this same type of design but I just kept in mind that all the other imagery here has been

removed so it's just going to dissolve as we use Smart animate but the other thing is this promotion frame I've left it

here let me just go into my design panel so I've left it there and you can use it like this because I think it's actually perfect we'll just animate to here and

this image is going to extend beyond and we're not going to clip the content so we're going to keep it unclipped so that's going to happen much

more naturally since we're not going to be scrolling into positions if we were to say click from here while we've scrolled this page we'd get a very weird

interaction and animation going and it's just the way figma currently is until you can preserve the scroll position across smart animate you're going to

just run into that issue right now there is no workaround and the only thing I found that works the best is having something like fixed within the main

screen where you don't scroll and click that and just have that static so it's always going to come from one spot rather than scrolling and clicking it on

a list that's up here at one point or in the middle so we just keep that content as static as possible so back to the promotion frame in here I've also

removed everything inside of it so you'll notice I removed it so it's not there the only thing is the image that scales I've also added a couple of things so let's take a look at this whole

frame so we have an overlay description there which is this Frame on the right we're just going to keep that there for now we'll

actually copy this Frame over for another video and we're going to remove that overlay description for now so that's perfect we have a gradient

just so the image Isn't So harsh and I changed the background color as well so that's been changed so this is

the only thing that's there and then in the next frame what we're going to do is we're going to start introducing the controls so we have the controls at the

top and then we have the carousel controls over here and then we'll use an overlay so let's jump right into the

Prototype here so some of this is actually connected a bit what I'm going to do before I look at those connections to make sure they work I'm going to just

attach this Frame so after we click this button and it pops back up we're going to quickly jump in in to the screen so

we'll do an after delay like that and we'll just do a smart animate then we should do another after DeLay So I already have one

set and that's going to be perfect and then over here we'll do one more after delay and that will allow us to do a little bit

more with this overlay so I have this as a independent frame and the way you can do it this way is probably the most

popular way to do overlays is to select in this menu instead of navigate to you're going to select open overlay and you'll select this Frame as

a destination and then you can select the different places you would like it to come from or appear

so I have it at the bottom center so it's going to be popping up over here and it's fixed at the bottom the only problem with this method

of using an overlay is once it's up it acts like a modal so you won't be able to actually apply interactions to these buttons you'll be able to apply them but

when you actually have those buttons hooked up they won't work and that's because this kind of adds like this

imaginary frame behind it which nulls everything so that's the only caveat about using

this so we have it moving in it's not just going to be a smart anime because that isn't even an option

with overlays so I have it moving in from the bottom at 300 so let's take a look at what this is going to look like so I'm going to press r to

restart so that was really nice let's actually tighten this up a bit I think we can allow a little bit more so I have 300 milliseconds

now so I really like how this image comes from that card so we'll do it one more time and that just seems much more natural and that's how you can create a

really nice masking and parenting effect where this is marry to this card but also you make a nice connection from page to page and then here comes the overlay at the bottom let's take a look at the

overlay and just comes in really nicely really smoothly and then you can interact with that in any which way you want and that's how you create a mask

and an overlay in figma hey everyone and welcome back I want to show you a couple of prototypes that I just built that I think will be

really helpful for you you to think about how to use micro interactions in these scenarios of having overlays and

also to Showcase different areas where we can really draw attention for users so let's Jump Right In so I put together this prototype very similar to

what you have seen over here some of the naming conventions have been changed I don't have this this container for promotion to go back back so that's one thing about

prototypes you may be changing the actual structure of the designs just to showcase the interaction so that's something you just need to be very thoughtful about when you're

communicating that to your team because if developers are looking at these designs they're going to be following them sometimes to a T and you don't want to have any mess ups like that so you'll

have your main design file that will have a really nice structure and then you'll have these different pages that show the interactions that's why I usually have a designs page and a

prototype page this is kind of what I've been doing just to Showcase to all of you how to design and prototype but all my prototypes are living in this design

page when you get the file you'll notice that they're all in the prototypes page so I'm here in figma and I have this

other prototype and what I wanted to Showcase here is how to add something to your cart

now we're going to still have that dragging interaction here and I'll go through that a bit so I've just applied a very similar dragging

interaction and then I have a clicking interaction and what I'm going to be doing here is I'm going to be changing the color so you'll notice there's a lot of screens here that's totally fine if

you really want to go into depth because we're going to be doing a little bit of a bubbly pop with our button

here but I have this item page screen and then in the overlay I have this icon and it's called add and then there's another frame inside of it with the

actual icon that has the vector so selecting this add

button I actually have the inter action on the whole title here just so it's easier for people to click but the interaction is always going to be on

that button so in this screen let's take a look at what we've done here so I do have it just a smart anime it's going to be really quick it's just going to change colors we could probably even

bump that up a bit to like 100 so it's going to change colors and then we're gonna have an after delay of 1 millisecond and another

100 millisecond animation and we are going to actually change this button a bit so let me show you what I have here so I did keep the

exact same button and the exact same naming conventions but I changed this Vector from the plus to a check and I'm just using the Google plug-in for

material design it's super helpful I've showed it a couple times already through the course but we are going to get a little bit of

like a transition ition from the plus to the check it's not going to be perfect we can actually go in and really perfect that like we did with like buttons but

we're going to keep this very simple and we'll just have it dissolve a bit I've also increased the actual size

of the button you'll see that it is going beyond the borders of this one frame and then

after that we're going to have another after delay 100 milliseconds and it's going to shrink and we are going to keep it the same I have a

larger animation here and you'll notice that once an interaction plays out then we're just using after delay to simulate how the rest of the interaction plays

out so if there's like a cause and effect especially in this scenario we have the cause being adding something to your cart and then having the cart pop up in your bottom right hand corner so

it's easy for you to click it's bringing immediate attention to your cart in this screen where you didn't notice it before so we have this cart container

pop up from the bottom if you notice in this screen I have it right here off the screen so I'm going to bring that up just so you can see so it's right there it's going to be off the

[Applause] screen and then in the final frame we're going to do another after delay but we're going to apply an actual delay

here and have this button swap back to the plus button so you could go ahead and even build upon this and create a

button that has the ability to add more right now it's just a plus button so you don't know if you have a cheese pizza in your cart itd be really cool to see

maybe a one in this circle over here and then when you click it it gives you the check mark and then it says two so that would be really cool or it could be more

traditional where there is like a minus sign and a plus sign and hitting one of those different buttons will trigger a

minus or a plus so that would be really cool too okay let's take a look at how this actually plays out so there it

is and just remember it's always best to try and keep these as neat as possible sometimes I don't but usually I

do and in order that I have them like this so this is really neat so here it is micro interactions and you got your

floating cart so we have this same type of overlay parenting effect where everything is basically married to this

main container here so whether it shrinks or grows the content around it going to be affected in some way so let's click this button here so now we

can so that was pretty cool let's do that again so there was one little Flash and I'm going to go take a look at that in a second let's do it one more time so

we'll see the button movement and then the popup so that's really cool now let's go see where that flash came from it could be a naming convention that we

didn't use properly so we have pizza image Pizza image oh there it is so we have the frame so we can remove that frame it's shift

command G to remove frame let's take a look at this screen this is the ungroup shift command

G you'll find yours if you need to sometimes it's kind of hard to remember all the shortcuts and it just comes with time so let's go see if that's solved

itself great that's looking super smooth and that's how you create a really nice micro interaction within your

overlay hey everyone and welcome back this is another flow that I've just created it is pretty complex I'm going

to walk you through how you can do it as well so you have this prototype and I'm going to Showcase a couple of things

here I'm going to Showcase how to put gifts in your prototypes and have them play out as intended and I'm going to

show you how to create a really cool story and have that play out so I mentioned cause and effect generally

when you interact with something there is an effect there is something that does play out most of the time it's pretty quick it's a screen transition or

a button click or sometimes it's like a loading bar that could take a couple of minutes and one scenario where I really see the effect taking super long is when

you're ordering something now when you're ordering something off of an e-commerce site generally you have to wait days for that to ship out and then maybe days to get

it through your Courier but when you're doing something like ordering an online delivery for food you get

updated all the time as to what is happening with your food when your Courier is going to be arriving when your item is being delivered and I'm going to walk you through that whole

process and how to do that with INF figma now you'll notice here there are a ton of frames and I don't want you to be

discouraged because sometimes if you do want to have something that does play out for a bit it's going to take a bit of time to actually put something like

this together but it's pretty easy there's sometimes just small little adjustments you need to make from frame to frame to ensure that things really do

move smoothly and I'm going to show you how I did that so let's Jump Right In so the first thing I want to talk about is placing

gifts now I always say that buttons should have one more purpose than just being like clickable if you have the ability to use that button to Showcase

like a process or progress or whatever you should do it so over here I have the checkout button this is the card screen same one over

here but you have this checkout interaction where you click the button it darkens you've also noticed that I've been playing around with different types

of interactions whether things darken shrink just trying to give users as much feedback as possible and then in this second screen you have these Bubbles and

if we take a look at that we'll notice that we have the loader in there now we don't have the loader here we've replaced it so it's going to

dissolve in because there's nothing else that matches it on this Frame but we'll actually have that loader playing out continuously or as long as we wanted to and that's why we apply an after delay

over here of 500 milliseconds just to let it play out to give people an understanding of what that transition supposed to look

like so we can jump right in and I can show you what that looks like immediately so I've named this one progress update here it is so if I click this

button so you already see this play out let's do it again so if I click it you'll see that bubbly little button just giving me some

feedback as to hey your order is loading let's take a look again so all it is is just placing the

actual gift all you need to do is literally copy and paste it from your desktop you can drag it in

totally up to you as to what's easier for you now let's go through this larger project here so you'll notice that in the original designs we only had a

couple of different states here we also have this driver State that's hidden so there will be a point

where we push up but we have four different states here one where we are processing the order and once that's completed we move on to

the order being prepared so at this state we're just going to have both of these items on the screen and this is what I mean about

having things transition properly what I have here is the home button or the home icon I have it set to zero opacity so

it's just going to gently fade off the screen I can show you these interactions as well here so it's going to be really quick just like 100 milliseconds 150

milliseconds in between some of these this is going to take a bit of time I have it set to 300 we can even make it take a bit longer we can do something

like a th000 so I'll show you what it's starting to look like so let's click that's going to

happen so we have a th000 over here we're going to set the delay to 4,000 and then we're going to set the

delay over here to 4,000 so the whole animation will play out a bit like we'll be stalled on the

screen just as if something was happening like processing order now the order is being

prepared so that's great so now we've gone through this part I mentioned that you need to actually have this image come off the screen first so we have it

dissolving with the smart animate we are going to be using just the opacity we're just going to drop it down to zero and then from here the next step is to start

zooming in on the map now this map was pretty easy to make I would get this plugin called Maple I'll show you really quickly this is what I've used so you

can basically name which area you want all you have to do is go into Google Maps and grab it within the web address you can grab

these coordinates from there and you can jump in and zoom so this is 15 and you can Define the size of it you can even Define the

style I think I have M set to light yeah that's the one I chose you can even have it set to dark so you have a lot of options

here that's the plugin I've used for here so we have map cicle we have the map in the background this is the map

and we got to be very very cautious about how we place it because we have it at certain coordinates so over here I have it at 18th Street near Castro

theater so I have that placed there and same with the home I have it placed on 24th Street in Firefly I don't know these places but that's all I know about where I'm setting these icons so I just

make sure to keep that very consistent so when I do scale the map up I'm scaling the map up and I'm moving the icon to the spot so

we are going to stop right there we're going to take a break and then we'll jump into the second half of this prototype hey everyone and welcome back

we are going to get into this second part of this prototype it's pretty lengthy we are over here now we've just talked about the order being prepared

and now that the order's being prepared we are going to give the user a bit more of an update so what we want to do here is while the order is being prepared

you've often probably seen on other types of apps that you get connected to a driver and once you're connected to a

driver then the driver's blip starts to show up so let's take a look what we have here so I do have the driver's blip over here already ready to go it's set

to zero and in the next frame you can see we transition over with an after delay very quick transition where we

just have this fading in and then in the next frame we actually have the car moving from point here to this point

over here and then in the following frame we have it moving to this point over here so keep in mind that these are

all named the same same with these different icons here they have their own naming conventions so we have the container and we have status

names and even different names for each of these sections so keep that in mind as you're designing even possibly building off of this I just really want

to show you some pretty cool interactions here so we have this driver getting there and

then so once again it's going to take them a little bit longer so when they stop here we're going to delay a bit for I have it set to 100 milliseconds and

then we're going to move up just to do our best to simulate how a driver is showing up on a map it's not going to be super quick or

super fast it's going to be pretty slow so we let that whole animation play out let's see how long we put it for here so we put it for a full 2 seconds I think we can even do it a little bit longer so

we can do four and all it's doing is just changing the position from over here to here and then we can do the same here we can have

this play for a bit longer too okay so let's take a look at what it looks like when the driver starts to drive so we're going to

start okay my order is being processed now my order is being prepared and now my driver is there he is driving or she is

driving really cool okay so that is the next part so now our driver is finally there and this

is another transition we need to make we need to make the transition of the driver getting there and then once they arrive we have to change the status over here so you'll notice that the reason why we have so many frames is because

because there's so many different working parts within this little story we're trying to tell so we do have this status popping

up here so the status stays the same we also have different statuses over here so we have Adam is picking up your order and then once Adam has started picking

up your order we're going to dissolve this restaurant in the background so we set that to zero once again and then we introduce something else in

this Frame so here is this thing I have called route one and you may be thinking what is Route One and Route One is the

beginning of the driving line and I just placed it there on the frame it's set to zero and even the height is set to one so it's like barely noticeable you can't even see it right now because it is set

to zero and from this screen to this screen what we're going to do is we're going to change change the status to Adam being on his way and we're also going to shrink the

map back down and we're going to have this house come back into the picture over here you'll notice

that the home is set to 100% the opacity but it is off screen so we're ready to just bring it into the picture without any opacity transition

like it it's always has been so we'll bring that there and everything goes back into position so same area where the restaurant is and

this is back to this section as well now this is where we start to bring Route One into the picture now route one is going to be at 100% opacity the position

stays the same as the last frame but now the driver is hiding it because the layer is on top and we can start expanding it if we take a look at the

Prototype what's going to happen is we have this 500 millisecond movement where the where the map is

being zoomed out of I just change it to a th000 just so it's a bit more longer and then we have this other

section here where we draw the line so before it was small we're going to bring it all the way down so I'm just doing a very simple L but you can do anything you'd like this is the most simple way

to do this so we have Adam on his way and then we bring in route two so route two I

have over here as well and it's set to 0% same thing we are keeping it super small and then we draw it over here here

so let's take a look at what that looks like so that's the the animation for the the lines let's take a look at the lines before we

start getting the driver moving so order being prepared everything's looking smooth now the driver is going to be driving to the

destination while the order still be prepared we'll get another transition here Adam is picking up your order and now Adam is on his

way so that was pretty cool now if you noticed this driver has started to move so it's started to move from here

to here when we created this line and what I want to show you is that as this driver moves from frame to frame we are

removing the height of this line little by little so it's shrinking as you can see here so we're actually going to keep this a little bit

longer so we're going to go to 4,000 actually let's go to five so we'll do 5,000 and

then in this Frame we remove Route One it starts to go off into the distance out into the sunset it is gone

0% opacity and then we're going to remove it in this Frame as well but we remove it there let's

fine-tune this Frame over here that's fine now this Frame from here to here is going to be a bit longer so we'll do 2,000 so now the driver is getting

really close and now the driver has has arrived and at this point all that we're doing is Route One is gone from this screen

because we've already hidden it here so it's safe to just remove and row two is going to be gone as well when the driver

gets to this point I think it's pretty safe to actually have this removed so let's take a look at what it looks like when the driver gets to the point the only thing that sucks really

about this is that we're going to have to watch this over and over again until we really like how everything plays

out but when everything finally is done and we're getting very close things look fantastic so there is our little

animation and they're driving slowly slowly slowly really cool and then you just saw it we just finish off with a zoom in on the

map let's see all the the elements here all we have is the home the overlay at the bottom and this is where we change

the status over Adam left your order at the door and we changed the icon as well so we're having some really smooth transitions from screen to screen there

so I'm going to be really focusing on how subtle these are I like them you can do a different thing you can have them sliding in from side to

side so that's looking really smooth there I feel like this area could probably use a bit work but I think it's

so good for now looking so good bring me my cheese pizza there we

go and here you can either keep on going have a screen that says order delivered like a success screen you can even throw like a confetti pop in there

you all know how to make it by now and I would really love to see how people build off of this and I really love to see if people come up with some new

ideas around telling a story with multiple frames it's really interesting and it's very very similar to video

editing and that is how you create a progress update Within figma