Interactive Components in Figma (BETA)

what's going on mds here and in this video we're going to take a look at interactive components inside of figma what they are how they work and the different ways that we can use them in our prototypes we'll also look at stepping up our interactive component game with some smart animate tricks and at the time of this recording this feature is currently in beta and not available to everyone however you can sign up for the figma interactive component beta right here in a previous video we created a bunch of variants from a single component to create these screens so definitely check that video out if you're curious how we did that and what's nice about variants is that you can keep things nice and organized and now with interactive components we can add interactivity right inside those same variants to create much more robust prototypes i posted the design file i'm using in this video for free on figma community and you can find the link down below if you'd like to follow along so without further ado let's dig right in to create our first interactive component let's click the prototype tab up here on the top right that will give us this little terminal on the right side of anything we select now let's grab that plus icon and drag it down to the done variant of this component we also want to make sure that it says smart animate in the animation section now we'll do the same thing with all of these pairs of done and not done variants again if you missed the variants video definitely check that one out if you want to know how this was all set up in the first place so with our single screen that's built entirely with this one component we've got lots of interactivity despite the fact that we didn't link a bunch of screens together now if we want to get a little fancier we can draw a custom strikethrough rectangle instead of relying on the strikethrough text alone so under the more icon in the text panel we can pull up the type details and we can see the strikethrough is selected under decoration we'll click on none to turn that off now let's draw a small 2x2 rectangle inside of this done variant and we're going to name the layer strikethrough so let's transform this object to extend the full width of the text layer but we do want this line to always stay the same width as the text so to make sure this happens we're going to use auto layout first we need to group the strikethrough layer and the text layer together by hitting command g and then we're going to rename that group to label now with that group selected we'll add auto layout to the group by default auto layout treats these two objects separately and hasn't quite given us what we want you can see that if we try to move the strikethrough layer that it keeps repositioning itself around the text it does this because both layers in the auto layout group lose their x and y properties in favor of the built-in auto layout controls you can see that we can control the distance between the objects but we can't add a negative margin in there in order to hack this layer to give us what we need we'll select the strikethrough layer and hit command option g to place that layer in a frame now that that layer is in a parent frame we have access to the x and y coordinates the auto layout is now applied to the strikethrough frame and the text label and now we can adjust the y-axis of the strikethrough layer independently so now we'll bump this up negative 12 pixels here now we need to adjust our constraints to keep things in place if the text width changes we'll also need to update the resizing constraints on the frame as well in regards to how it responds to the auto layout we want our strikethrough frame to horizontally fill container that way as the text label expands so does the strikethrough frame we can type a new string into the text field to test our constraints and as you can see something is not quite right so let's go through and double check everything so somehow our child strikethrough layer changed from left to right to right only so let's just put this back into position and select left and right now that's fixed we can test it again by retyping a new string all right it looks like our strikethrough frame is now behaving properly so we're good to go let's copy and paste our new auto layout frame that we just created into the other variant instances instead of recreating all of that again from scratch we'll command click this text label to select it and delete it out with the variant selected we can paste in our auto layout frame and it's important to have the same layer structure in each frame when you want to use the smart animate feature in your prototypes since we're working in the default instance we need to change the strikethrough line to be invisible but i want to animate it from left to right so instead of just hiding it we're going to change the width to be 2 pixels change the opacity to 0. we also want to change the text label to a lighter color we'll also change the strikethrough layer to be white even though it's invisible that way it's the same color as the text when it begins to animate this will serve as our starting point in this tiny animation all right now we can see that it's working now but it seems a little bit slow so if we go back to the prototype tab we can change the animation timing from 300 milliseconds to 200 milliseconds to increase the speed let's make sure to change the speed on both of the interactions now we could go in and create custom animations for the check marks as well but when you're using nested components like this you don't have as much granular control over the animation in order to push this further you need each layer separated out so you can control each individual little piece all right so we've used interactive components here to create little micro interactions on the same screen just toggling from done to not done and vice versa now let's dig into this example where we have multiple objects animating across the screen that's all controlled with interactive components linked to different screens all right first we're going to create a new page called one two three and reuse some of the design elements from our other screens we'll kick things off by making a really big number one and a simple navigation at the bottom we'll use a rectangle shape and a text layer with roughly 12 pixels of padding all around i'm not going to worry about auto layout here based on the text size because this will be a three wide navigation with a fixed width control all right with both layers selected we can hit command option k to turn it into a component we can center the text and add a fixed size so that it stays in the middle when the width changes to keep the text bounding box with our 12 pixel margin on each side we'll need to set the constraints to left and right let's option drag this down to create an instance of the component and we'll create two more instances to the right by option dragging again and hitting command d and we don't want all of these buttons read by default so let's create a variant of that component let's change this text to be light and remove the background shape and use the frame fill instead to create those visual differences now let's add some corner radius and give this a little more style we'll rename this component to tab and update the variant names to be yes and no and that will correspond to the active variant property name and it'll give us a little toggle switch to use now we can select two of the instances in our row of three and turn the toggle off all right with those three instances selected now we can hit command option f to create a new frame with all of them inside of it now inside of that frame we're going to select each instance and add the scale constraint so that if we resize the width of that navigation they all resize appropriately all right now let's option drag these new tab components onto our first screen and resize the width to have about 24 pixels of margin on each side with that in place we can rename our labels to the appropriate one two three to make things a little bit more tidy now we can select our large frame and hit command d twice to create two duplicates now we'll make a big number two and a big number three here's where the magic of interactive components comes in now with the prototype tab selected we can now select our individual tabs in the main component and link each one of those to the appropriate screen by dragging that little terminal and connecting it from the tab to the screen now we can go back to the screen based instances of the tab component and update the variants for each one by turning on the appropriate active tab each of the screen's tab components all work properly because our main component has the interactive connectors instead of controlling the connections at the screen level previously you would have had to link every single connection individually over and over for every screen and that can definitely be quite the cumbersome task interactive components now gives us a single source of interaction truth as long as we know how to set it up properly but remember how in our first example we didn't have the check mark animated because it was a nested component well the same thing is sort of happening here we've got some nice fading in and out of the numbers as they're selected but it's a pretty bland interaction so let's take a look at how we can quickly add some extra animation polish to really take things to the next level the main problem lies within the tab component right here it's a simple on off switch that we've created as a constraint now it is nice and organized but it's also limiting as far as animation goes so let's rename this page 123 v1 and duplicate the page to create a v2 alright first of all we'll delete our on off toggle tab and we're also going to break apart all of these component instances by hitting command option b on each of these purple component layers okay now instead of using the frame fill to create the red shape for each individual tab we are going to create a single rectangular shape that can traverse all three of these instances so we'll remove the red fill from the first frame and tidy up our layers so that we know what's going on here we'll call this rectangle active and we're going to pop it back into our tabs frame but we want to make sure that it's only in the tab group frame and not in the individual tab frame we also want to make sure it's in the bottom layer so that it doesn't cover up the number now we can turn this tabs frame into a component without using the nested components like we did before since the active tab is now on its own layer it can travel independently of the tabs and before we go any further let's re-link each of these numbered frames to the appropriate screens we can also delete these old tab instances out of the other screen since they are from the first version that we created and before we add this new navigation to our screens let's think about this component structure for just a second if we remove the active tab from the main component then we can link the tabs and create a variant of that component instance now we're going to make a duplicate of the tabs component which includes all of those pre-made interactions and we're going to hit command option k to create another component with that tabs component nested as the base component so we're doing a little bit of a component inception here one component handles all of the interactions the other component which will have variants will handle all of the animation let's call this one tab group and create the three variants that we need and rename everything accordingly and remember when we create variants like this they all get their own little variant frame to put things in and all of the interactions are still baked in because we're using the nested version of that tabs component the tabs component is controlling the default styles and the interactions so now we can use this new tab group component to handle the active tab animation so we'll copy and paste this red rectangle as the bottom layer in each of these variant frames and we'll change the text color accordingly now let's copy and paste this tab group instance into each of the other screens now we can update each variant on the proper screen so that the correct number is showing all right let's test our new interactions look at that nice animate active tab nice and smooth got the active tab going back and forth but look at our number here it's just fading in and out with the default settings we haven't really been intentional with the number part of our animation so let's go ahead and fix that too and before we do that let's give these inactive tabs their own background color so that it sets it apart from the background of the screen okay let's make a frame for this number that has the same 375 pixel width as the screen so that we can control the x-axis more easily we'll do the same thing for our number two and our number three now we'll reduce the space between these frames to zero select them all hit command option f to create a parent frame for them all as well to keep a single source of truth for all these numbers we can turn this into a component by hitting command option k and then we can copy this and paste the instance into each one of the frames because our interactive components are already linked to all of the screens already with the smart animate set the numbers should animate automatically based on the x-axis of that component let's test it out and see how it looks there you go an animated active tab animated numbers all controlled with the single interactive component there are a lot of ways that you can set all of this up these are just a few examples of how you can be really strict with on off toggles or you can expand it a little bit to have some more custom animations happening it really depends on where you're at in your project for a lot of design systems you might have a more strict organizational process but if you're creating prototypes you might have a different type of structure it really just depends on what you're trying to accomplish so i hope this was helpful interactive components inside of figma it's a really efficient way to create these types of prototypes if you have any questions drop me a comment down below and i'll do my best to answer it and if you want to learn more about ui design in general please check out shiftnudge.com and uh other than that thanks for watching and i'll see you in the next video peace you

Channel: MDS

Views: 25,441

Keywords: matt d. smith, mds, designer, interface designer, freelancer, athens ga, athens, vlogger, shift nudge, figma, sketch, ui design, learn design, product design, product designer

Id: slmLyaolF50

Length: 13min 53sec (833 seconds)

Published: Thu May 27 2021