Figma: Interactive components | Bruno Sáez López | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (58m)
    • 1. 01 Intro

      1:04
    • 2. 02 Buttons

      6:33
    • 3. 03 radio button

      7:42
    • 4. 04 input

      15:16
    • 5. 05 spinner

      7:44
    • 6. 06 loading bar

      5:23
    • 7. 07 Slider

      4:54
    • 8. 08 Illustration

      7:55
    • 9. 09 Outro

      1:03
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

58

Students

--

Projects

About This Class

Hey! 

Welcome to this tutorial! Here you will learn how to create Interactive components in Figma. Is a new feature that allows you to have interactivity inside a single component so when you put that component into a frame or a working prototype has its own animations or states embedded.

We will be making interactive components for Buttons, Inputs, Radio buttons, spinners, loading bars, and how to animate an illustration.

If you want to explore the interactive components universe in order to improve your workflow in Figma join to this course!

Here you can see the Tutorial Figma document:

https://www.figma.com/file/N7FzMtJkFqfrabgk65l2L6/Interactive-components?node-id=21%3A2249

You don't need too much experience in Figma to follow this tutorial, although if you are new to Figma I suggest you start with other courses I have to learn the basics and then come back to this one.

Create a Design system from scratch: 

https://www.skillshare.com/classes/Figma-create-a-Design-System/894614838

Master variants in Figma

https://www.skillshare.com/classes/Figma-using-Variants/962464417

Meet Your Teacher

Teacher Profile Image

Bruno Sáez López

UX/UI Designer and Front-end developer

Teacher

Hey, I'm Bruno!

UX/UI Designer with more than 20 years of experience currently working in a big data company making complex products simple.

Figma, Sketch and Adobe XD are my favourite tools.

I love going to the mountains and record music.

If you like my classes follow me to be updated when new content arrives!

Cheers!

 

 

 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 01 Intro: Hey, welcome to this course. In this course we are going to see how interactive components work. Seen fema, they have been around a while, but in a beta version. And finally, not so long ago they were implemented in the final version of Figma. So we will be learning what are interacting components, how to make them and what are they good for. So we will be making interactive components for buttons, radio about those as litres, as beginners. Loading bars, even animations, creating, creative, all of them with interacting components. And you will see that these will make your prototypes more alive. So if you're interested in and getting deeper into create more consistent workflows in Figma drew me to this course. 2. 02 Buttons: Hey, So, thank you so much for unit two scores. As we have seen in the intro, we are going to see some interactions. We can do. We've interactive components. As you can see here in the radio button, I have all these states like Holger when I click the same when these buttons that I have, the homozygous state and the state in all of them as well. I have these lighter than the weekend replicate and make it interactive as well. These as BGR here, or these little animation that we can triggered when we click on some places as well, these loading bar or even these input name, as you can see, when I do this on the hover state or in the state, we have these cool animation with the lining bar or the writing like you're typing as well, these animation in the input name and when i checkout or hover out or I lose focus on the input, it will make these. So let's get started and let's create another base here to create our components. This is going to be the tutorial or okay? So for these, I'm just going to start grading a, a frame. Remember that you can just press F. And I'm just going to add these MacBook Pro. So these are going to be our interrupt the components. And I'm going to create another frame right here to start this thing. Hour components. So this is going to be playground. Okay? So let's get started with the buttons, which I think they are. There's going to be the most similar one. So let's start by creating a rectangle of height is going to be 40. And I'm going to apply a border radius of four. And let's create some test here, which is going to be a bottle. It doesn't matter. And with these, I'm just going to create an auto layout. Remember that you select the two elements and press Altoid, okay? So I'm just going to make like a primary coil or something like this, blue. And this is going to be white. I'm just going to create a component with this, okay? And this is going to be our button. Okay? Our button as lash default, this is going to be our default state. I'm just going to duplicate it and the Dutch it because we want to create baryons with this component. Okay? And I'm just going to go here and that's HSL and just get deleted down this and this is going to be our hover state. Okay? So we created thus component yes person in there. And now I'm going to attach it again and I'm going to create a clique estate, okay, So for B, so I'm just going to make it a little bit darker. Almost black. It's as good. So I'm just going to rename these to Glick estate. And this is going to be our hover state. Okay? So I'm just going to, as here, as you can see, is not a component yet. So, and now it's a component. And remember that invariants. What do you have to do before creating body on seed, selecting the elements you want. And here on the right, you yes, breast combine variants. And what is going to do is create one component with different states, okay, so in this case, the property one is this date. And I'm just going to put the before first, then the hover state and the click. And now it's where interactive components come into play. And if we press here into prototype, and we select our first button, what we want is when we hover these bottom goes to these nested state. Okay, So instead of clique, what we want these wild hovering come to these estate, to the two V's hover state. Okay? And then a nice thing, it's by default, I think it's comes like instant here in animation. And what I think it's the best is just you put into a smart animate. So it's going to make a smooth transition between the two states. And we can put here instead of 300 milliseconds, yes, bring it to 200. Okay. So let's make it the same thing with this. When we half, when, when we geek on the, on the state, what we want this does while you're clicking coming to these state, okay? So while pressing, while clicking pressing comes to these state, okay. So check that as Martin, he made these activated and 200 milliseconds, you gotta just us as you please. But I think it's a nice dark. So let's try our button. So for this, what we are going to do is just breast the old key to bring gas-like. Or we could come here to assets. And in our tutorial, just certa about our component, our button component, and drag it. And let's see if it's working. Let's come to playground. And when we hover, we see it's making it. And when we click, it's black. So it's working. Our first interactive component. Okay, So let's get into the next. 3. 03 radio button: So let's go for the nesting draft the components while we have these interruptive, horrible sound out there. So the next one is going to be the radio button. Is going to be, is going to take the same approach as is. So for these we are going to create like a 24 circle. And yeah, and what we want is to create always the most complex component possible. And then, and then remove some parts. So lets us al-Banna stroke, let's say something like that. And the field in this case is going to be white. And important thing. As later on we are going to have like a whole nice cool hover effect. I'm just going to duplicate this ellipse. I'm just going to start to rename. So this is the selected circle. This is going to be our background, our background circle. And these one, which is in the, in the bottom. This is going to be our hover state. Okay, so I'm going to boot like hover background. You will see now. So now what we want, It's too. Yes, select these color, put outside and put like three. So this is going to be our hover state. We are going to get something more and not so harsh. So this would be our selected with a hover estate. Maybe I put like here like four in our Hubbard background here, like four so we can see more. And this would be our great component with all the elements, with the hardware selection, everything. So what we are going to do here now is to create a component and rename it to radio button is selected. Hover. Okay? So we have our first component and what we want to do is duplicate it as we can see some instance. So we want to get That's this instance. And now we are going to start to make changes here. So this is going to be white. We are going to create the hover state, but when he's not selected. So we have this and we as well are going to create. Now a component in the skull, in this case is not selected. Or default. You can rename it or name it as you want. Okay? So I'm just going to duplicate again these and now we are going to create the state where the default state is not selected and is not Hubbard anything. So for D is what I'm going to do is these stroke, I'm just going to bring it into white. Okay, So this would be our default radio button. So not selected. Default or just like that. And another state I don't have is just a selected button, not with the hover state. So I'm just going to duplicate these deducted. So we have it like an independent component from now. And again, these harbor background we have, and that's going to bring it to white. So we have the default deselected and the hover state. And now I'm going to create again, this has a component. This is the selected, not harbor. This is the default state, so we'll just rename it. And we have all these dates here for the Holober. I want to make some changes in these two because we, the hover, I like to mark a little bit more. These, you know, you know, this border here. So we have our four components created. So we are again going to combine them as variants. And I'm just going to reorder these a little bit because usually you have their radio button like this. Then you come to the horror state. When you click, you come to the peak and the hover state. And then when you hover out or you mouse out, you come to this state. And if I click here, or you have likely here, it comes here. Okay? So let us start again with our prototype here. What we want is when we hover Here, it comes to this one. So instead of click, we tend to do a while hovering smart animate to a 100 milliseconds. When we click here. This is good. When we click, we want to change it to the state, okay? And the same thing here. When harbor out, when we are no longer without pointer here what we want, we want to come to this state, okay, so here it's own mouth leaf. Okay, comes here. And what we want these when we hovered these, it comes to this state. So what do we do is just drag it here. And while whoring comes to these selected hope. So again, let's come to our playground and come here to assets and bring our new philosophy radio button. And let's see if this works. When I hover, it makes the hover. When I click, it's perfect. And I missed one. I missed one state is when I click here, it, it has to come back to the default S-shaped not selected. So we come here again. So we come here and when we take here, what we want is to come to this state, okay, so this is what we're going to, on click is going to change here. So we come back here our tutorial and now we click and as you can see, we have it there, okay? And there is something missing because now I'm not hovering. And as you can see, the hover state is there. So there is another step we have to do is we have, we're hovering. But when what we want here is when, when Mao's leaf, when we are no longer in this, comes again to this one. Okay, so let's see if it works now. Okay, this is working. And when we mouse leaf, as you can see, it has a default state. So we have our interruptive component now working flawlessly. So let's go to another component. Let's go with the input component. This is quite a complex one. So let's go for it. 4. 04 input: Okay, So let us start designing our input as well. Again, let me change here to the side instead of prototype. Again, as we did with the buttons, Let's put a height into 40. Let's put our border-radius into for lecithin a stroke. Here, you can create the input that you want and their style that you want here, we are going to with a white. Usually. As I say, that I like to create the most complex, the most complex components at the very beginning and then start to remove parts. So let's start. This is going to have like a place holder. And this is usually a little bit, yeah, not so dark. And as well, another thing that we want is to have here like, like the name of the place holder, like the name of the or this input know, for instance, is import label, okay? Or let's call it just label. In some inputs, like in material, what it does is the place holder or the label usually is inside and then comes, becomes the label. So it's the placeholder baby at the very beginning and chains like the labor. So this is something we are going to do. And for.org we are going to create. Here is an auto-layout. And for that you just press Shift a and you see that now we are, we have here now auto-layout or you can come here and come in and press right-click and Alpha and auto-layout. And what we want here is to put like a white background on it. So we yes, breast plus. And we can see that this is too big and we don't need so much space here and there. So here we are going to put it into two. And this is going to be into two as well. So in this case we have the label here is it doesn't polarise in the place holder. So and as well as we did with these radio button, when we hover these, we want some border, make their focus on the components. So I'm just going to duplicate it and I'm coming here into, into how this is done. So this is going to be called label. We have the R placeholder here, then I have our background. And this is going to be the background hover. Okay? So this is the latest one. This isn't the bottom is going to have again these four on the outside as we did here. I'm just going to copy the style. So for that you breath out Command C. And here we are going to paste it. Did our background hover. So yeah, he's paid is based in the style and just making that. Okay, so we almost have all the elements. So, yeah, let's create a component already with this. And these are going to be our input hover. Yeah, input field hover. Okay, so again, let's duplicate this and detach it. And what we want now, it's to bring these labeled down, which is going to be our placeholder. Remember that our placeholder is going to disappear. So we are going to give it the opacity of 0. And this label is going to have the same size as a place holder. So here we have 16, 24. So now we are going to increase these into 16. Okay? And what we want these to be, to have it on the same place here as these placeholders. So for that, and that's going to get rid of this so we can align it well. So we remove these auto-layout. So now it's on the same place, okay? And we see here say date and ease these SAP. So we have them on the same place. Okay. So these would be the hover state, but not field or whatever. Yeah, this would be the default, the default hover state, okay. And I'm just going to create a component with this and then duplicate this again. The data set, remember, I like to Make these and duplicate these components. Because sometimes when you duplicate these details components, they changed the names. And we need to have the exact names here inside the component in order to make the transition as well. Okay, so the next step here is going to be our default state. They're very basic the input, okay? So in this case the stroke is going to be the pass-through. The opacity of this stroke is going to be 0. Okay? So this is our default state. And this would be our field, that state actually. So when, when the input is already field and we want another step here, which is why typing. So we are going to replicate when we click on an important these typing. As long as you start to blink. And we want to replicate that as well, okay? And at the very beginning we have these placeholder in, like helping us. So I'm just going to copy this and paste it here. So this is good. And the same color and, and this is going to be our typing estate. Okay? We will see now maybe this is a little bit crazy. Right now plot is going to be alright, So, yeah. Okay. So, so we're roughly already have them all. So list, again, select all the components combined as variants. This property is going to be the state. This is the default. And we have the overstate. We have these whew this one. I don't have it as, sorry. I forgot to eat, That's this. So I'm going to create it as a component and you can drag it here. And now we have another resting. We have seen. We are going to see that we have four states. They be Fault, which is this one. We have the hover state here or the default. Then these could be the field when, when, when the input is field, here we are going to have this hover. And this is going to be the focus one when we are typing. Okay, So let's connect this prototype to see how it works. And later on, we are going to add some more interactions into its components for, so in this case, what we want is while hovering, we want to come back here. Onclick. Why? When, when we click here, we want to come back into gum into this state. So honestly, we are going to go here. And yeah, On Click out when hovered out this, while hovering on Mao's leaf, we want to come to this state, okay? And in this state, what we want this, we don't want this border. So we are going to get the opacity to 0. So this is the field that state, okay? And this is going to be that they've been estate. And for the Diabetes Day there is something interesting with these blinking effect. So for these, we are going to create another interacting components. It's going to consist of just one line. Let's say it's something around that. Let's see. Yeah, something around that will work. And for these, we only want to create 22 components, one with the black and one with the Norba, a width 0 basicity. So it's going to be like making these changes. Let's see it. So let's call him blink, being black. And the other one is going to be, I'm going to adjust this and change the opacity to 0. And let's create a component with it, which is the blink light. And these two components, we are going to combine them as the blink component. And we have here, this is going to black and this is going to be the light, and this is going to be this date. And what we want these a continuous animation between these two elements. So it's not while clicking is not a while hovering out. We just want the end to plate by themselves. So for that, what we do is come to prototype. And we have these, the other component, invisible components. So what we are going to do, it's just to connect it. And instead of click, we are going to go to after delay. So what do we want these when these components, it's on there, on the canvas, It's going to start by itself to work after some delay. In this case, what we want this to start immediately. So that relates going to be one millisecond is the minimum amount we can use here. We cannot put 0, So it's one millisecond and in the stars, the day interaction. Okay, So what we are saying here is when these component is in the screen is going to start in one millisecond. So instantly it's going to start and then change to this other state with a smart animate. And here I'm going to increase these 232300 milliseconds. And what do we want this after 300 milliseconds from this state, we want to come back to the first one. So we create these illusion of blinking like black, opacity, black capacity, black. You know, we are going to see how it works that now. So instead of click again, we go after delay and we put here like one millisecond. Okay. So let's see how this works. Justin, our playground. Okay, so let's see how this is working. So we come here to our playground, we press Play, and we can see is doing nothing. I don't know what's going on here. Yeah. Now it's working. Sometimes it takes some times to these two work as, as you can see, we have only one frame and everything is working here. We have our blinking type in state. So it's working. So let's come back to our interrupt this component here. So I'm just going to get rid of this. We don't need it anymore. I think we see is working. And what we do, it's I'm in gas going again to drag these linking component or we could come here to assets, bring out blink here, and I'm just going to add it into our intuit, this component, okay? This is when we click here and we start to type. Let's say we have this blinking component here. Okay? So let's see in our layers, yeah, we have our blink here. Okay? So let's see how our input, it's working so far. So on, Let's come back and press play. So now we have yeah, there's something I'm not doing well here. I forgot to connect it. This is not the estate. I want the estate I want by default is the default state. So yeah. And I I have something here that is not really working properly. So yeah, we have the default state. Let's see our prototype. While hovering chains here, while clicking changes to typing, okay? And when typing in here on mouse leaf is going to change here. Okay, so yeah, it's working, it's working good. So exactly when we hover here, we see that we have these state. When we click, it's a star like we are writing. And imagine we have written something inside the input and when we hover out its field, okay? So the input is done. And here, the most interesting thing for me, it's how to implement these blinking estate inside these input, okay, So you can create more complex interaction. So let's go with an S1. In this case is going to be d a spinner. It's quite a nice one. So let's go for it. 5. 05 spinner: Hey, So let's get a stop that without a spinner for these, I'm just going to create a rectangle. In order to see our spinner as well. I'm going to create the circle with you of 32 by 32 with this nice size for it. And I'm just going to add on a stroke here. Well, not yet. So here this is going to be a white stroke. So you can see that we have these arc being here. So what we can come here. And here, we are going to make it like 65 percent. So we see that we have this and we don't need a stroke anymore. Okay? So you can see that you can move it around and later on is what we are going to do. And if you can leave it like that or if you want to create like a border-radius here, you can just press then. Or you can make it, you know, you can make it as you please, then is good for me. So this is going to be our First Estate of these spinner. So this is going to be the spinner as last one. Or you can call it right or up or whatever, Let's say write them. Okay, this is going to be our first state. Again. We breast sift out or Alt to duplicate it and then detach it. We do this so the name is stays the same, okay? Ellipse 1. And here we see the name of this element, the same one, because if you duplicate at the very beginning, is going to change the name to ellipse 2 and 3 and 8, 4, and later on is not going to pick D animation. So it's important that when you are going to smart animate something, you need the same names, okay? And the same kind of elements here. So, so, yes, what we are going to do is in the next state is going to rotate down. So for that, what we are going to do, It's to rotate this and this one. We want it like minus 90 degrees. And this is going to be our bottom, right, bottom. Okay? Again, we duplicate it with that, that's it. We select again the element and we relate it more to a 180. And this is going to be our sorry here. And this is going to be our left bottom. And we need the latest state. There is, again, duplicate the Dutch and select the element and then movie too, 90 degrees. And again, we select this and we create a component from it. And this is going to be leftOp. And we already have all we need. So let me just adjust this so we can animate them better. Let me align this a little bit. And those, Let's bring this two down here. Okay? So we are going to create a body and with all of these components that's going to combine them as variant, this is going to be the position. Okay? So let us start with this one. We want to start here, come here, come here, come here, come here. Okay. Or do you could just start here if you'd please. But this is, let's start with the a. So we come here to prototype. And what we want, remember what we did with the blinking state. We want to be autonomous so it animates by itself. So again, after a delay of one milliseconds, we want to instead S by smart animate this one. But instead of ISI in and out, what we want is a linear movement. So it's linear. We don't have like breaks into all the estate, so we have it, we want the linear here. Let's start with 300. Right now in later on, if we see is towards lower something, we can change that value. So the next step would be to change to these estate. And again, we go to after delay, one millisecond, linear, 300 milliseconds in the Smart Animate. And from this state to this one, again, after delay, one milliseconds denier or 300. And again, we did, this is going to be a loop. So again, we have here, we want here after delay one milliseconds and 300 with a linear one. Okay, so let's try our spinner here. So we come here to our playground and lots less of our spinner here. Okay, So, well, I'm going to do something, I'm just going to get rid of this. Well, I'm going to change these ones too blue. Or even I'm going to be a little more creative. Let's say. And let's try something different here. Let's choose this blue so we can get rid of this. And what we want this when these moves is going to be changing of color. So yes, two, to see a better animation here. Cooler animation, while the colors are not the best. But yeah, it will save our barbers. Okay, so in here, I want to start with the right DOP. Okay, so let's start with this. So let's see how this performs. Again, it takes a while. So the animation to start. And now we see we have our spinner and it's changing its color flawlessly. It's quite good. So let's come back. And as you can see, it's quite as low. So if you want it to go faster, It's pretty simple. Let's put this little bit here. So we come back here to prototype. And what we want to do is to change this to, let's say 150. And again, we are going to select this one, 150, 150, 150. So we come back here. We can see that now this is much faster. It's better. Okay, so we have created our spinner. So let's go with an S1, which is going to be our loading bar, which is pretty similar to this that component we have created now. So I'll see you on the next lesson. 6. 06 loading bar: So we are going to create a loading bar. So for that I'm just going to create a bar about a big associates are right. And what we want is to have like a constant background here. Then what do we want these to create? You know, a bar with, with our blue. Let's select our blue here. And we have to create different estates. What we want this, this bar to the very beginning to appear, then move into here. And then the sappy year over here, something like that. Okay? So, yeah, so this is what we are going to do. So we need different states for this and these bars, okay, this is going to be, Let's come here into layers. The gray one is going to be our background. And we need these one which is going to be our loading bar. Okay? So I'm going to create, this is going to be like the intermediate state. Let's say. I'm going to duplicate these in this case, as you can see, is maintaining the names, so it's not the adding one or two or three, so we are good to go. And the our first date, what we want is just an empty an empty yeah. And empty and empty bar. Okay. So for these, what I'm going to do, It's bringing this into here and make this 0%, okay? And then as a state is going to be, what we want is that this bar is start to load. So this is going to be our first state. This is going to be our second state. Then these bar is going to come to this state. Okay, so it's going to come into the middle and be bigger. And what do we want as a final state or intermediate state is this one, and this bar is coming here, so the bar is going to stretch a little bit. And the final state, it's pretty similar to the first one. But on the right. So these invisible bar dot, we have fear. We want that, we want it aligned to the, to the arrived. So I'm just going to align here to the right. And now, as we can see, we have these bar, invisible bar there. So we're good to go. We are going to start to create components with it. Let's create this first component. So let's create this another one. Let's create this one. Let us create this one and this one. So for this, I'm just going to go and combine this as baryon right now and rename these to load embark. Okay? And this is going to be the first state. This is going, this is going to be the second one. This is going to be the third. Is going to be the fourth, and this is going to be the fifth state. Okay. And this is going to be this date. So I'm just going to reorder this. Not important and actually, but to keep things tidy. And now it's time to animate of this. So again, we're going to use what we have used in the spinner. These interaction, which is 1 after delay, again, one millisecond, we want to make it as smart. And this is going to be like 20 to a 100, sorry. And this is going to be linear for now. And again, we make the same things after delay one millisecond as Martin, he made linear. Yeah, so, and let's see, let's see how, how it performs. One millisecond. Remember this is important. I don't know why it's not keeping the value. So I have to change it every time I come to after delay. So let's see if everything is good here. Yeah, all It's on one milliseconds. So again, we come here to our playground, come to assets, and bring our loading bar here. Something important. In order to make this like a loop, we need to connect the last one to the first one again. Okay, So again, after the layer one millisecond it, Let's see how this performs. Again, I have to press R In order to restart the component. Wow, this was pretty cool. You see? So it's making these kind of escalate in animation in the middle and is disappearing. It's quite good. So I'm quite satisfied with the result. So let's see. Another component. In this case it's going to be and it's lighter. So see you on that has less than. 7. 07 Slider: Let's continue with our interactive components trip, and let's create tennis later. So the slider is quite similar to this one we have created here. So again, let's create like a rectangle of a big source. In this case, we are going to other border radius of 10. So it gets these is move size there. Then let's create like 24. So it's big enough for us to work with this and the slider. Exactly the same thing that does. The loading bar has, we need two rectangles, one for the background and 14 when, when the slider is blue. When we have done this and you know, we have these, these like meter. Okay? So let's come back here to our layers and see how this is doing. So what we want here is our background. To rename this to background. This is going to be our meter. You can call it whatever you feel goes to you. And this is going to be the draggable aria. So I'm just going to call it drug. Okay? So with these elements we have all, well, and these, I'm just going to make it a little bit softer and this is going to be a little bit darker, something around that. Okay, so we have our slider here. So again, what we want this to have our full, it's like they're done and then start to reviews. To start to move the components and reviews or give them opacity or in order to work. Okay, so we have our full slider here, so we are going to create a component, okay? And in this case, the slider would be here. And what? And then we are going to duplicate this as an instance. Remember we did, That's it. And again, we are going to move our components to the hip to replace to the initial state, let's say, okay. So for d is what we do is yes, big R bar here and start to reviews it here. Okay, so it's heaven. And these would be our initial estate. We create a component again. And we have two components, and this is the end, then this is a orientalist state, okay? And again, we select both of them, combine them mass variants, a state. And the first one is going to be, so this is going to be the initial estate or via star, then this is gone. Our n, okay? And again, we're going to come to prototype what I want this, these circle, when I start to drag this circle, it becomes here. It becomes the state. Okay? So for this, we are going to a smart animate it as well. And instead of clique is going to be on drug, okay? When we start to drive these one is going to come into the state or simulate like the we are driving this. And again, when we drop these ball or circle to the left, is going to start to become these state. Okay? So instead of Glick, its own drug, okay, so let's see how these performance again, we come to assets and we began our ESL either I'm just going to rename it now. So this is our as lighter. Okay, so we come here, we come to the sign and this component, we are going to read them into a slider. Okay, so let's see how this works. Again. So if we start with Dr, we see it's working flawlessly. Okay? And if we start to drag and we see we have some ECM here, which is super cool. So it's already done. So let's go to our next sort tutorial about how to make animations. All fields, three zones or icons or something like that. So let's go for it. 8. 08 Illustration: Hey, so let's go with our last interactive component. In this case, I'm just going to insert an icon to animate it. In this case, we are going to use the Sparty icon that I'm just going to add from a quantified plugin. So I'm just going to animate a little bit DES. So we can see these, how to implement these animations into our, in our prototypes. Okay? So for these, what I'm going to do is ungroup this and add this into a bigger frame so we can animate better. And we can see now that we have these elements inside a bigger frame. Okay, so this is going to be our illustration. As last one. This is going to be our, well, I'm just going to put one for now. And as I said before, it's important the naming of things. So you can see that this icon is composed by many vectors, but all, all have the same name. So this is quite tedious, but you have to rename them in order to, to later on be animated appropriately. So in this case, I'm just going to boot like being big wherever you can, just use the name that you want. I'm just going to get rid of this. This is going to be the red beak. You can put the name that you want. Okay? So I have already renamed everything with unique names. Okay, so what we can do here is to duplicate, duplicate our illustration and see what the states that we have, we want it to have, okay? So from the very beginning, what I want is to all its element to be tinier. So they are going to come from here, okay? And they are going to be half like an opacity of 0. So it's going to come from here to here. And then what I want is kind of like an explosion, let's say. So everything is going to be like a little bit bigger and like pop off. Some of them are smaller. Then come here. And this one again, like something like that. And become much bigger if we want. Again, I'm just going to be randomly all these ones and bring down a little bit bigger and then start to randomly position them. Okay, so we are going to see like a super part D of confetti flying is quite random. Let's see how these counts up. So we have these states here. And I'm going to add another final estate. I hope things are not, changing. Names is not. So what we want this to fall down, okay, so we want like, like falling down in this upper year, something around that. So this is going to be making like a turn. So I feel like that. Let's see how these K-maps, because other as you can see, I'm making it super randomly. And what I want this to be called these elements and make them disappear. So they start like kind of update very beginning. Let's see how this comes up. So I'm going to create multiple components of this. So for that, I'm just going to tidy up. I'm going to make this a little bit bigger. So we are not constraint here. And Let's make this something well, whatever. So this is our third state. Okay, So anyway, I'm just going to use and tidy up a little bit. And we can select all these frames and create multiple components. And these components, we can recombine them as variance again. And this is going to be our illustration. So this is the initial state. So I'm just going to state, and this is going to be the initial state, the state two, the state three, and state four. Okay, So this is good for now. So now we have to come back to prototype and start animating this. So again, what we want is to bring the delay. So after delay one millisecond these stars is going to start to work. So we want to add smart, animate it less. Lead. Lead is non-linear for now to see how it works. Again, here, after a delay, one millisecond comes to this one. And again, after one millisecond, we want it to come to the state. And the same thing we want do with the latest one. In this case, we want to create a loop for some animations like this. You may want to start and a half and N. So in that case you don't want a loop. You will import these last action here, okay, but in this case we want to see this loop, how is working? So let's see how this illustration is going to come up. Maybe is horrible. I don't know. Let's see how it works. I'm pretty excited to see how, how this comes up. So well. It's quite quirky. Yeah, you can see the idea, right? It's not so cool. Or anyway, I hope to help to be better, but you get the idea sometimes when you enter to a transition into a page or something and you want to see something like that. Maybe it's good. So I'm just going to make some changes here. In order to see, well, this is starting to look much better. And let's try something here. Let's see if instead of linear, we put some easy, ease out transitions, how this works. So let's see. Well this is starting to look much better. We do that more intermediate states to make it more natural, something like that. But I think you get the idea. So, yeah, this was our final lesson of this tutorial. So let's go to the end of the scores to the congratulations video. 9. 09 Outro: Hey, congratulations, you made it to the end. I hope do half learn all about interacting components. I encourage you to try to replicate the, the science we have seen in the tutorial as well that do create your own in order to explore another possibilities of the interactive components. So I hope you have enjoyed overall and you have like the video, please leave a review. You do even like it. Leave a review as well. And if you have any site yes, The him for more tutorials or you are interested in something that you haven't find a tutorial out there, just let me know and I will choose to make it. And and yeah, if you want to be notified when another pictorial comes up yes. Foam on the platform and you will be updated. So thank you very much for following discourse and wish you a great day.