Figma Tutorial: Create Interactive Components with a Real Project (In 7 Minutes)

hey beautiful people it's msgo here now if you haven't heard about interactive components well you definitely need to get excited about it because interactive components allows you to create interactive components which allows your clients and your team to interact with your components now if that doesn't excite you then gently smash that like button and hopefully that brings a little bit more excitement to this video so let me walk you through exactly step by step on how we can create this in minutes so let's get right into it guys now if you don't know how to utilize variants within figma make sure to gently smash that link above because i walk you through how to create variants in minutes so make sure to watch that video first here we have a lean version of the design system that we have at mizko media and as you can see we've turned all our button variations into a variant so let me help you illustrate and get straight to the point on how we can create interactive components so let's say we want this variation of the small button to when we hover on this button it will actually turn darker and same as the default and large so all you have to do is select the variant head over to prototype make sure you click on this plus icon drag it to the hover state make sure you select the interaction as while hovering and then you make sure it's changed to that button you can either set to dissolve you can make it instant so let's go dissolve you can ease out for 300 milliseconds right so let's just do that for the three buttons that we have let's go while hovering and let's do it for this one as well while hovering perfect oh and by the way guys make sure to stick right through tm because i start the video off by giving you guys a quick explanation on how to activate interactive components but right after that we work together step by step on creating your very first interactive component and also some variants from scratch so you know exactly step by step on how you can achieve some beautiful interactive components in minutes so then let's head over to our assets let's drag down a button over here let's head over to our preview and voila once you hover your button you can create these interactive components that will work and scale throughout all your designs so without having to create multiple screens and show to showcase all these interactions all you have to do is plan a little bit ahead create them turn them into variants turn them to interactive components and you can utilize this and leverage this across all your designs so another example let's just take a look at input fields so let's say with this input field the default one when we click inside we want it to be on focus so simply drag the plus icon over to here on click we want to dissolve perfect let's do this again and again and all we have to do is head over to here let's grab our input field let's put it down on the page let's head over to here let's head over to inputs and click and voila so it all works and it's perfect now what happens if we want to turn off the focus so let's head back over to our design system let's click on the focus state let's drag this back to the default state make sure it's on click perfect let's make sure this is done as well and let's head over to our design system bang so now that we can click on it and we click on it again it will just disappear click on it again it will appear again so interactive component is really really simple to activate as long as you know how to utilize variant so now that we know how to create simple interactive components let's head back over to this video over here and i'm going to walk you through step by step on how to create a variant and also an interactive component from scratch so we're going to create a very simple to do list item over here and i have already created uh i've already created a component to house the to-do list so i've got an auto layout with a heading inside i've also created a very simple checklist item so auto layout with the text and also a frame for the checkbox now obviously what we want to do is we want to create one set of items for at the default state which is the checklist item let's change this to checklist for example default and what we want to do is duplicate that we want to make this checklist selected so this will be the selected state and the selected state will be let's just quickly jump in grab that let's change the frame to green and let's just remove that so that will indicate that this has been selected right so very very simple what we want to do is we want to turn these into an component so command option k if you're on a mac whoops these should be separate there we go there we go so two separate components now what we want to do is make sure they're both selected head over to variance combine as variants and that will turn this into a variant so now if i actually head over to here and we type in checklist i can pull through a checklist item right and i can actually set the different states over here correct sound good all right so now when what we want to do is we want to head over to our design file over here and we want to put the checklist down here we want to duplicate it duplicate it duplicate it duplicate it all good and then what we want to do is also grab a button that we have created previously chuck it in here and let's maybe just make this let's just put it inside let's make this default right looking good looking good looking beautiful cool so obviously we can refine the padding but we won't do that right now because really this is about interactive components so let's just quickly preview this mode so let's close this and here we have it so obviously nothing is interactive right now but we have a very simple oh well actually i forgot the button is already connected so it's already an interactive component so as we're actually hovering you can see it uh activating here but if we click on these inputs they're not actually activating so let's head back to our design file let's click on the component head over to prototype let's simply once again drag and drop it on the component that we want it to interact with make sure it's on click make sure it's dissolved so if we click this input it will dissolve into this one and let's double click on this one so we can create the returning state right so on click dissolve is out perfect so once again here we have it we have our very first interactive component that works very very schmick let's click on this click on this click on this and we can hover the button and it is an entirely interactive component but there is one last trick that i want you guys to not forget about which is make sure if you want this to be a perfect interactive component is to gently smash the like button guys if you have any other questions about how to activate and utilize interactive components make sure to leave those questions down in the comments below i'm definitely answer them and i will see you in another video very soon guys [Music] you [Music]

Channel: Mizko

Views: 100,816

Keywords: figma interactive components, figma interactive components beta, figma interactive, figma interactive buttons, figma interactive prototype, figma interactive prototype example, figma interactive text field, figma interactive tutorial, figma interactive variants, figma design, figma design tool, figma prototype, figma tutorial, figma vs adobe xd, figma vs sketch, animation, component, design tool, interactions, library, state, symbols, vector

Id: 4KAXczKx1h4

Length: 7min 31sec (451 seconds)

Published: Sun Feb 28 2021