ADVANCED Interactive Components in Figma

recording all right shut this door i can never tell if i have my auto focus set right or not in a recent video we looked at interactive components using a single screen selector and then another slightly more advanced example where we're linking a component to multiple screens but then i posted this video in my shift nudge slide community rebecca one of the members says okay but i'm curious this is slick for one component but what if you're trying to design something like a form with multiple radio button questions not being one to back down from a design tool challenge i started hacking away at a multi-selector type screen and i ended up with something like this one two three and then any combination you can start choosing this now if you were going to create this with a standard way of prototyping screen to screen interactions you would have so many rows you would have a color for every single row of numbers your numbers would all be it would just be a lot a lot of screens because every time a one would be selected you'd have to have green and then if you click the two the orange would not necessarily be selected it's just too much logic to try to bake into one screen prototype it's not really what this type of prototyping system is for however however there is a way with interactive components and it is a little bit cumbersome to create but it's not that hard and i actually didn't have to draw every single one of these lines it's quite simple when you know how to kind of hack the system so that's what we're going to do so i'm going to do a quick little walk through to show you how you can make some interactive form components on your prototypes if your project calls for it but before we do that i'm kind of feeling a rant coming on so if you want to skip straight to the tutorial go to this time stamp here i know you might be thinking wouldn't this be easier with framer is this really necessary why go through all this trouble to create something with a design tool that would be 10 times faster to create with code should you just focus on the design and not worry about all these bells and whistles and the answer is framer could make this easier as long as you're quicker and more efficient inside of that than you are figma and also as long as you know how to make custom interactive radio buttons and i've personally designed huge projects inside a framer with extensive interactions components etc and even though i'm quite experienced with it i still prefer figma over framer and i'd rather figure out a way to do this with a clever solution and keep everything inside of the tool that i really enjoy using now this is also just a very personal choice i'm not saying that you need to make the choice and i'm not requiring you to come to the same exact conclusion that i have for how to create this by any means you make your own decision you're the designer you should definitely do what you want and you should have fun doing it use a tool that you enjoy but we're here right now because you were curious about how to create this inside of figma so we're going to dig in right now all right so here's our prototype we've got everything clicking around so this is what we're going to be creating so i'm going to go ahead and show my layers i'm going to add a new one and we're gonna call this color youtube all right so i'm gonna copy this frame and i'm gonna paste it in here and we're gonna get rid of all of that stuff so the first thing that we're gonna do we're gonna draw a little circle we're gonna make it 60 by 60 and we are going to make this 2 2 2 because our background is 1 and we're going to have this be a number and actually let me go ahead and change the background here so we can actually see what we're doing all right now i'm going to make a type tool of one i'm going to use this font tt firs and we're going to bump this up to like 18 pixels we're going to center align it and i'm also going to use mono space lining so that that guarantees all of our numbers are going to be the same exact width now i am going to duplicate this ellipse and the background i'm going to bring it out to 80 the bottom layer remove the fill and i'm going to add a stroke of this blue these are just some pre selected colors that i've got here we'll use a 4 pixel stroke we can do the center the inside or the outside it's not really that big of a deal it's going to be my stroke this will be my background this will be my number i'm going to select all this and hit command option k to turn it into a component and i'm going to call this number then i'm going to create a variant of that component and i'm going to hide the layer here i'm going to leave the layer there this would be an on off toggle we'll call this selected we'll call the default this one is the default and we will call it off and we'll select this one and we'll call it on this would be my first instinct for how to create a radio button it's either on or off right simple easy if you click one of these instances and you option drag out here you get a simple on off toggle because we've named it on and off so if the the thought would be okay let me just put these on here and then i'll have a bunch of on off toggles and i can override the text let's go to here prototype mode this one links here let's just put it on dissolve so it has a nice little fade and that one will be on dissolve as well so now these should all work let's go back to our prototype boom on off on off works great right well not if you want all of these only select one at a time because we have multiple toggles so we kind of have to group all of these selections into one component here so although this is a great way to create a simple single toggle it's not a very great way to create something that has one or two or three it's only good for just a single instance so we're gonna have to go ahead and delete what we just did here go back into design mode we'll just we're gonna take this out and give it the number name again another thing i like to do is kind of abstract my component so instead of being the number one now it's just the number component so now i'm going to take an instance of that and i'm going to duplicate it twice let's give ourselves about 20 pixels of margin in there and now we're going to create a component out of that command option k and this will be our number group all right and this is also going to be our default number group because we're going to add variance to this so there we go this one's going to be default this one's going gonna be number one and i'm gonna hit command d twice more and we're gonna do a number two and we're gonna do a number three so now i'm gonna go one two three remember this is gonna be our default and this is gonna be just just for clarity's sake let's copy and paste this number and we'll use these as kind of like faux rows just so it's like this is group one this is group two this is group three just so we all kind of understand we don't lose our place all right so now that this is my default set what i want to do is hit return and have all these selected so i can go to this one here number one is going to link to the first variant set number two is going to link to the second variant set and number three is going to link to the third variant set and that's all we have to do to set up this component for the initial prototyping settings now this is the this is where we get into the slight hacky part so when we create these variants it gives us all of these frames so we could actually delete everything out of here but we still have the variant frame and we still have this link going to that variant frame it doesn't matter what's inside of that frame it will still link to that frame so because all of our default numbers inside of the default frame are linking to all these variants we're going to go ahead and delete all of these out and then we're going to copy these just hit return on the parent frame press command c then i'm going to select number one and i'm going to command v select on two command v select on three command v and you can see that all of these prototype connectors are updating automatically so now if i go to the prototype tab you can see that every one of these one two and three they all rotate it around properly they're all the links are in place all we had to do was set up that initial one two three and then we just pasted them all in and it all works nicely now we just need a little bit of visual differences to go along with this so i'm going to command click on the background here show the stroke same thing there command click show the stroke that way there is a noticeable visible difference between those three and they're all working so now instead of this group of numbers in the the simple toggles now i can pull this toggle option drag the toggle over there and we are going to play this and you can see it's gonna go between each one of them you cannot select one and then two and then three and have them all show up because it's going back and forth between all these toggles so this is exactly the exact same process that we're going to use for all of the colors so just to make this a little quicker i'm going to option drag the number component command option b to break it apart rename it color get rid of the number and i'm going to make this one teal and i'm just going to go ahead and command option k to turn that back into a component and now i'm going to do the same thing about 20 pixels apart and let's go ahead and give ourselves three more colors and i'm going to command option k all of these so now this is our color group and what's great about this like you don't have to nest the components but if i ever wanted to go in here and change the size of my main color shape it's just a good practice to go ahead and get in if you know something's going to be repeated over and over and over it'll just save you time in the long run sometimes it can be hard to design this way but the more you do it the better you will get at it so now i'm going to override these colors with some pre-selected colors i have made and one more blue there we go so now if we look inside of our color group you can see that all these colors are here i'm actually going to go ahead and name these just for organization's sake because we're going to have a lot of these colors a lot of prototype connectors it'll just kind of uh make our head hurt less once we get into all of this we're going to create our first variant with the color group here clicking on variant you can see now we have variant two and defaults we'll click variant two and we'll hit command d that's gonna be this will be default this will be teal yellow now we're gonna do orange red pink and blue alright so this this i will admit this is a little confusing these are a lot of colors you know this is where people might start getting opinionated about whether or not we should actually be doing this or not but just bear with me there's not a lot we have to do here all right so we can go ahead and bump up the space between all of these because that can help keep that a little more organized we're going to name the property so we're going to name this teal we're going to name this one yellow we're going to name this one orange red pink and blue now with our default selected we are going to go to prototype just like before we're going to choose teal we're going to link it to our teal we can see what's happening over here when we link it to the group that we just named just to kind of double check ourselves so yellow you can see i don't want to link it to teal i want to link it to the yellow variant and then for the orange i'm going to link it down here to the orange or the red we'll go to the red and then the last two we got pink and we have blue now this is all really quickly i'm i'm linking these in a matter of seconds it's taking me a little bit longer because i'm trying to also explain it in a video while i'm doing it but it's not that time consuming in fact it is very fast all right so now let's go back and do our little trick this is the one hack people might get upset about it but i'm telling you this is fast this is a fast way to do it we're gonna go back in here we're gonna select every one of these variants we're gonna hit return once boom that selects everything inside of all those parent containers and we're gonna hit delete we did not delete the parent containers we only deleted the contents inside of those containers so now we're going to select this one remember all of these still link to these empty containers we're going to hit return now we've automatically selected all of these including all the prototype interactions we're going to hit command c and we're going to select every single one of these variant names here one by one hit command v select command v select command v select command v very very fast and now look at this magic prototype boom look at all these lines that are automatically added we have one two three four five six variants three four five six six times what each one would have six so we've saved ourselves 36 custom interactions that we did not have to do because we're copying and pasting those from the default color so now go back to design now we do want to go in and activate the proper color just so it's showing that it is active we're gonna go to stroke on that one make sure we are on we're on red so we'll dig into the red activate the stroke we'll go into this one we'll activate the pink stroke and then we'll go to here to activate the blue stroke now we can grab these pop them over here line all this up and go to our prototype one two three color color color look at there that's a pretty robust little multi radio button color selector thing just for good measure we're going to go ahead and add in a little bit of text we're going to say choose a number and i don't want this title to be such a contrast that it's going to compete with our call to action so i am going to knock this down to our medium gray double a large i'll put this at like 24 i'll put this one at 24 as well and we'll do choose a color and now let me group that and group this and then we'll do like let's say 48 in between those two and then just for fun let's go ahead and create a 60 by 60 pixel button or 60 height rather not 60 width and then we'll do 48 pixels on each side and let's go ahead and round these corners so it matches nicely and we're going to add a light color we'll grab the same exact size font there's really no need to change the size here we'll say next and we'll make it the same color as our background group it call it cta if you really really wanted to we could turn that into a component and then drag the instance over here for this particular demo it's not really that important but you can always make this stuff a little bit more organized so there we go let's go back to this so that's a pretty nice looking little like multi-selector component thing i do want to iterate again i'm not saying that this is the only way or even the right way to prototype this type of thing it's only one way for you to build this type of prototype inside of figma using interactive components if you're already a figma user or if you just perhaps find this way to be easier to use over other methods then this is a way you can do it no problem but if you don't like it no problem i have no issue with that whatsoever but if you did find this interesting be sure to like and subscribe and all that jazz should i have said smash smash the like button smash subscribe if you want more content like this smash it like it pound it use it break it up rewrite it i don't know if you want to like it and subscribe it you can do it that's all i'm saying and if you're super interested in learning all the ins and outs of designing beautiful ui definitely check out shiftnudge.com uh that's it for this video until the next one peace oh my gosh it's so hot in here and i'm also getting ready to break all of this down because we're getting some work done this is my home studio and we're converting this studio into my oldest child's bedroom and we're going to build a new studio in the backyard and i have to temporarily relocate to my bedroom which is not going to be ideal but it is happening so this might be the last video that i make with this setup we'll see we'll see how it goes should i make a video about the office renovation and things like that should i post stuff like that on this channel let me know in the comments or if i should just keep it design focused that's fine too but i don't want i don't really want to do a bunch of a bunch of channels for a bunch of different things just one channel would you be okay with seeing home studio stuff alongside design tutorials because i've got a bunch of random vlogs on this channel also but these are the things that these are the things that you will drive yourself crazy thinking about by yourself in a room talking to a video camera lens of my camera and that's just weird it's weird to do that and you don't have any feedback you have no feedback as to whether or not it would be weird to post a home studio video on your design channel or if there are vlogs i i don't think it matters i think we overthink it i'm going to stop talking to the camera now you have a wonderful day and i'll see you i'll see you next time

Channel: MDS

Views: 12,370

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: ChAyF6JeANw

Length: 17min 36sec (1056 seconds)

Published: Fri Jun 04 2021