Creating a Storyboard in Figma for the Rive Animation - Tutorial [Part 1]

[Music] hey there my FL and creativ hope you're all doing well welcome back to another video in this series on creating Rive animations so in this video I'm going to

go ahead and create all of this that you see over here we're basically going to define the various States create a story board understand how to define the logic and what the logic should be and we're also going to go ahead and set up the

elements so that we can export this into R easily and I'm going to show you how to set this up right so that any further Ado let's get started I'm on a website over here called 60fps and they have a lot of cool interactions it's actually

two of my friends who are actually running uh this website and they're basically taking interactions and then showcasing that over here so I highly recommend you check this out and U I saw this Duo animation and this is basically

what we're going to be creating now let's look at the animation I'm going to break things down a little bit and then sort of organize a storyboard in figma in a bit so I'm going to go ahead and play the animation all right and the animation is pretty simple and

straightforward all right I can play again all right and yeah so let's actually understand what's happening now I won't be creating the entire screen because just creating this progress bar and

stars itself can get very complicated so I'm not going to do all the other things I'm just going to focus on this part and I'm not even going to have the numbers over here because animating numbers can be a little complicated in RVE so we're just going to do the progress bar and

the stars and this looks simple but it's actually not so I'm going to start off over here now as you see it starts off at zero there's nothing nothing that's happening over here and of course

there's a score and there's a quiz that the user has to take and once the user performs the quiz they get a score and then the progress bar here changes according to the score right so in this

case the score is 953 points you know and I'm assuming the total is 1,000 points right so if you see over here um the progress bar is moving all

right and if you see over here I'm actually past the middle point so if this is 1,000 this area should be around 500 but as you can see the number is

still 300 which means the number is animating at its own speed and then the progress bar is animating at its own speed so in drive if you're are actually making the number animation as well it

would be something that is totally disconnected from the progress bar because the progress bar is moving at a different speed and the number is moving at a different speed right they're not moving at the same speed now in this

case because in our tutorial series we're not going to be making this number we're just going to making the progress bar we don't really have to think about this correlation but that is something that we have to tell our developers when

they're syncing up the values together all right in code of course so if I come over here uh to around the first Milestone if I were to call that all right the moment it crosses that

Milestone you can see that the color changes to um black or it basically Grays out so from yellow it changes to this black color right and if you see the animation all right just focus on

the progress bar it it does a stop every time it comes at this particular Milestone right so if I play this so it stops and then it starts again and then it starts again so it's not really a

gradual One-Shot animation it's actually three separate animations so you've got one animation over here it pauses for a second second animation over here pauses for a second and then it moves on right and of course it doesn't pause for an

actual second but I'm just saying that it pauses before it starts right so it's not really one shot it goes in stages so there are three different stages so let me play this again right so one and then

two and then it finishes up over here right now this value and I sat down and calculated it uh in figma this is

actually 600 and this is 780 right so this is obviously middle is 500 this is 600 this is 780 and this is 1,000 right so we obviously need to understand that

if the score was less than 600 then it would somewhere end over here right so probably if it was around you know 400 then it would end over here and because

it's 600 it comes over here 600 to 780 is over here and 780 to 1,000 is over here now as you can see each of the Milestones represents a star so if I

reach 600 points or more then the first star gets triggered if I reach 780 points or above then I reach the second star and if I get to have the third star I need to reach 1,000 points right so

that's basically how the animation is happening all right and as you can see the change of this uh from from yellow to Black to is the same as the star

right so both of these happen at the exact same time so one and then two and then three all right now any none of these texts none of these items in the background none of these buttons we're

going to have that right we're just going to focus specifically on this so now that we've understood the animation I'm going to go ahead to figma and show you how I built up a simple storyboard

so here I am in figma and I just go went ahead and just took a screenshot so I can ref this I pretty much you know use the same size and this is basically what we're going to be using to export into R which I will explain in a bit but let's

quickly understand the storyboard all right now we basically have multiple States so it starts at this base state where the value is zero now here I've just put the number for the purpose of explaining we will not be doing any

numbers animation in RVE in this course so we have these three states all of them are yellow now if the if the score is 240 points then it just comes still over here right and all of this stays

yellow and then the stars do not get active however if the score is 600 then we we come over here we touch the first Milestone the star gets active and also

the color over here changes now maybe I need to add another state so let me go ahead and just move this over to the side and let me add another state here

so I'm going to call this state 4 here if the value let's say is around 720 all right so let's say I make

this 720 then here we want to have some more right so right now this is just a single ellipse so I'm just going to copy this um delete this paste this over here

on top all right and then move this to the back so I can see the circles and I'm just going to double click and then press p on my keyboard to get the pen tool and I can click over here and I

think 720 probably would be I don't know around here I guess a little bit all right and then I can select and then double click again to enter the um path mode I can just click and delete this

all right so this is somewhere around 720 all right then we have around 780 so this is

going to be uh State 4 this is going to be State five this is going to be State six and then this is going to be State 7 all right now if it is 780 then we hit

the second milestone two stars are active and then the next state is after 780 so let's say 900 53 that you know sort of ends over here and then th000 is

the full circle now depending on what the score is the animation will obviously change if the score is 240 then it's going to change from state 1 to State 2 if it is 600 State 1 to state

three all right so let's go ahead and sort of explain this in a little bit better way right so I'm go ahead and just take all of this all right and I'll come over here or you know what I'm just going to go ahead and I'm going to make all of this into individual components

um you don't really have to but just for the sake sake of Simplicity I'm doing it I can come over here and say create multiple component sets so each of that becomes a component all right so now if

the score is 240 it's going to go from here to here all right this is 240 and probably I can just say uh score uh is 240

okay now if the score is let's say 600 all right so if I let's say the score is 600 then it would move from this State and this state and I'm using shift

command R to replace all right so it directly moves from this state to this state if the score is more than 600 but

less than 780 so let's say this is 720 okay so it moves from this state to this state and then it moves on to

another state which is 720 going to replace that over here so here it would be two states here it would be two states but here it would be three states

so from zero to the first Milestone it pauses there completes the animation and then it does the rest okay so this is

720 all right now if the score is 780 then we would still have three states so if I make the score 780 so I'm going to copy that and paste

that over here so it would be three states so from the base state it does the first animation of 600 and then it does the second animation um to reach

780 and then the star is activated all right and maybe I'm going to put this one below the other uh so it's easy to look at them all

right and 780 and now if the score is 953 all right so I can come over here

and set the score to say um 953 all right so then we would have four states so the base State first state

second state and then we duplicate it right and I can replace this so copy and shift command R to replace so now in this case we have four states right so

0o 600 700 and then this and if the score is 1,000 so I go ahead and duplicate this if I go ahead and set the state to 1,000 then I can go ahead and copy

this and then I can replace that over here so then it would be zero first Milestone second milestone and then third Milestone now that you've gone ahead and created all the various States

let's try to decide what the logic should be on how these animations should work so I'm going to come over here so now if the score is 240 all right what

should be the logic and the logic is pretty simple here the logic is okay the score should be less than um 600

so if the score is less than 600 which means 599 and below this is the end State the star is not going to be active

neither is this now if the score is 600 or if it is 720 the first animation will happen nevertheless so if the value is 600 the first animation will happen and

the star will be triggered and even if the value is 720 the first animation will happen and then we have this additional now we have two options either we can have separate Logic for

600 separate Logic for 720 or we can just sort of combine them to one because the animation is the same and we just have this additional part right so what

that means is here we can say if the score is equal to all right or greater

than 600 so if the score is equal to 600 or if the score is greater than 600 which in this case obviously 720 is greater than 600 we want you to run the first animation all right going to go

ahead and just copy this and come over here and paste okay perfect and maybe I can just color code these so it's probably easy to see so let's go ahead and just add a little bit of color so

that's going to be the first one um I can copy that and paste that over here and then change the color over here so this is going to be the second

one all right and now here is 780 so if the the value is 780 or above 780 I want you to do the second animation the

second animation is basically include the first animation and then this is the second animation which has the star as well right and then we do that over here and this is the extra part which we will

have but that's okay we can combine this into one category okay so so here if I go ahead and say score all right should

be equal to or greater than 780 okay so if the score is equal to or 7 greater than 780 do the second animation

all right so I'm going to copy this and um paste this over here and um I can change the color of this so let's select both of these um I'm going to just pull

this color and then probably change it over here okay there we go now the third animation will only happen if the score is exactly 100 which means the score has

to be exactly 100 now essentially you can still enter a value that is greater than 1,000 but when the quiz is created when Engineers are building up and calculating the score the score cannot

be more than a th000 right so here we can just limit it to say th and we don't really have to say more than thousand okay so score is th and here we can change the color again copy that

paste that over here uh let's try um I don't know let's try let's try orange I guess okay so uh um I can go ahead and just organize this

in a little bit better way so this is score two okay so this is the second animation this is going to be the third animation and then this one is going to

be the fourth animation okay so this is basically how we're setting up the storyboard now you don't have to get it 100% perfect at the beginning now because I've actually done the entire thing I know what the values

are and how it's going to work but obviously you may not be able to exactly get it on the first try as you go ahead and start animating it in drive you might have to change your logic here and there so that's okay right and maybe I

want to give a little bit more space over here okay uh so we can see it clearly okay and the last one here as

well okay so now that this is done let's quickly go ahead and see how we want to export things into RVE now you can export most of the things into RVE it's pretty straightforward um RVE also has a lot of basic drawing tools and basic

features like you know fills Strokes dashes and all those things so in this case it's a simple progress bar so that's fine now the way this is going to work is in R we basically have two layers so we're going to have this one

base layer which is going to be the outline and then we have the actual progress path now here I have both but I actually don't need both I just need one of it all right because I can then just duplicate it in Rive and I can just

change the color so I just need one of this now this if you see over here is basically an ellipse and what I basically did was if I I created a circle and removed the fill and added a

stroke all right and here as you can see I've added the stroke to be middle because R only

accepts Strokes when it is in the center R does not accept uh inside or outside so I have to set the stroke to be Center so I basically did that so R does not

accept anything else so I did that to Center and now um to create the shape it was pretty simple all I did was double click to enter the path mode I pressed p on my keyboard and here I could add

Anchor Point so I just added one over here pressed Escape add another one over here pressed escape and then I can press V on my keyboard to get back to the selection tool all right so selection tool and then I can click here and I can

just delete it all right and then this is basically the shape I got and to get these rounding was pretty simple um I just go here and set the um settings

here to round and set this also to round all right and uh that's pretty much it and then obviously you can control the thickness and this is basically how I did it then here we have just simple

circles uh nothing different over here and then here I have the star now what I did here for the star is I went and chose the polygon tool so went over here choose the star polygon actually the star tool and I just meddled around with

a couple of things over here change the corner radius just basic stuff I just try to um map it on this all right and this is what I have and once I was happy

with the shape I right clicked and I chose outline stroke so now that the size of this is the same as the star and we don't have this weird bounding box all right so just right click and choose

outline stroke all right and that's pretty much it now obviously you can use this file if you want to export it into RVE you can obviously get access to this file link will be down in the description and you can export it yourself right so that's about it now

one last thing I did over here is I added a gradient so it's a simple gradient so uh three colors over here so one in the middle one in 50 and one in 100% And then I just copied the same

colors right so 1 2 3 nothing different over here right pretty simple and uh straightforward all right we can we can adjust all of this later in drive so you can you know it doesn't have to be super perfect over here I leave a link to this

file Down Below in the description so you can just use this and copy the elements and Export it yourself um even the artboard Size Doesn't Really Matter over here because we can just copy paste the individual items all right um and

we're not going to paste everything we're going to paste one at a time so that we can create the animation step by step and it's not just going to overwhelm us right so this is basically how you want to understand and set up

the logic over here and create everything that you need to move into rhyme so in the next video we're going to go ahead and Export some of this and start animating so that's pretty much it for this video guys thank you guys so much for watching hope you guys really enjoyed it if you did let me know in the

comment section down below make sure to leave a like And subscribe to the channel for more amazing awesome content and I'll see you guys in the next video by