Office Hours: Get started with interactive components

all right so with that let's interact we're going to get into it now and i will uh be actually passing it off to to miggy to give us a little bit of an intro into interactive components all right let's get started let me take a moment here to share my screen all right can everybody see my screen there just give it a thumbs up if we're all good okay so thinking about interactive components um before interactive components uh if any of you have prototyped figma before trying to create kind of like smaller interactions could be a bit of a pain in the butt if you look here you know if you wanted to create something like a simple list and check things off you would have to create many many many frames to kind of like accomplish the complexity of demonstrating that so now with interactive components things are much simpler we can kind of componentize that we can make these smaller sort of shareable reusable elements that um will make prototyping much more accessible much more fun quicker and have the opportunity to like iterate a little bit more so i'm actually just gonna pass it off to uh to nico real quick um did you have any kind of like thoughts when you're building out the feature that you wanted to share yeah i think i think one of the core things that we kind of like knew from the start um and we we had a first version of this kind of like i think i don't know two and a half years ago during the make a week so it's been a while like it's been on our minds for for quite some time and one of the core things that hasn't changed since then was that we wanted to kind of like minimize the interaction concepts for that a larger prototype right you connect two frames with each other that exactly that same interaction concept is also the concept we apply on the kind of like the smallest scale so that if you hook up a hover state for a button or if you hook up a kind of like a switch toggle that that's ultimately at the core the same behavior as building a larger prototype because that kind of kind of the same thing uh jamie you ever thought yeah so in building the future we obviously have to keep in mind some really core use cases we have to keep in mind simple form controls like check boxes and buttons but um thinking through the mental model to try to really think deeply about the primitives that we wanted to build and then this is kind of the thing that niko's talking about where we have very simple interaction paradigm here um people can use the same tools to create those simple constructs to build much much more complicated things so we kind of viewed the need for those things as constraints for the design rather than the goal of the design it wasn't just that if we had accomplished hover states and checkboxes then we could say like okay we've done it like we've created the thing people need and we wanted to build something much much richer while still providing just these really simple primitives that compose really well with the rest of the system and it's really really cool to see that the system we built to support hover states has created these incredible examples that we've seen in the community yeah so i'm actually gonna um thanks for that really appreciate it um lovely love love that insight so i'm gonna look at this this image real quick and i to help people better understand where we're thinking about with interactive components so in the past if you had prototypes you would go frame to frame to kind of like accomplish something as simple as you know tapping back and forth and then we introduced variants and variants provided this opportunity to have kind of these multiple states you know of any given component thinking of that as like a component set now interactive components kind of brings that together and makes it much more modular so i'm going to hop right over into some examples that i have here so this is kind of like based off of what i just showed where we have the button so if i hover go into here you see while hovering uh the interactions are happening kind of like within that uh with between those variants so if i go ahead and hit a preview um let's see it's gonna refresh that so now when i click right we're still in one single frame and i'm able to get these nice micro interactions you know and they're kind of remembering you know the different kind of state that they're at so i'm gonna hop back over here let's take a look for like menus and tooltips this is another great example so here you can actually see we have these sort of nested items so the way that this is built out you can see that we have the hover state and we have these other options so let's go ahead and play that let me just give it a hard refresh to make sure that that's working properly and now so we can see i can select a topping i can kind of move up and down and over here i have the tool tip one thing that i do want to mention is that you know these things you know they're they're they're kind of like persisting across the frame so like all of the objects they in order to to to have those elements kind of override you know the elements kind of are existing in both of those states but we'll get in more to that a little bit later this is another example i i really enjoyed putting together this is a carousel and this carousel i have two different sort of iterations of it so i have both of those placed on the stage here so when i go ahead and hit play let's see that prototype load up and what i can do is i can drag and because of the way that you can add multiple interactions onto the same object when i'm here i can drag both left and right and it it'll perform that kind of behavior and like i said that these are kind of sort of nested in within each other so this kind of logic with the previous way that uh prototypes were handled uh would have been much much more laborious to accomplish let's take a look at my favorite example the tic-tac-toe here once again you can kind of see how this is easily beginning to play out where we have these different states where i have a hover state that then brings me two different options i go one way or the other let's go ahead and hit play so you all can kind of see how this actually works out let's refresh that prototype so now i hover over right and all of those are just same instances of the same thing so i can play a little version of tic-tac-toe with myself because i have nobody else to play with sad face but you know this is kind of fun and i can even reset each one of those individual objects one really cool thing about that and and we're just going to talk a little bit about iteration here i can basically take that whole setup i can duplicate it over here and if i want to change you know one of those properties i'm going to just change that fill over to red it's actually updating here so one great thing about interactive components it provides you this opportunity to really iterate on your designs right so um if you're thinking about ad is gonna be great for my design system it's also gonna be great for your ability to just think through concepts test things out and iterate those i'm going to hop over into experiments so this is one of the first things you know that i thought of let's go ahead and hit play and basically what's what's happening here is that we're using auto delay to kind of like play through these interactions so i hover over this object right and while i'm hovering it's playing through that auto delay sequence of frames within the interactive component so as i go through and hover over all of them i'm able to have a much more sort of dynamic generative in a prototype it's a lot of fun all right so i'm going to hand it back over to anthony who's going to talk a little bit more about how these things are created awesome awesome thanks nikki for going through that yeah so quick tour of just the kinds of things that we can do let's go a little bit slower now and we're going to back up and we're actually going to build these things and really make sure that we understand how we actually put them together and some of the cool tips and tricks that you can use as you're building your own components so i'm gonna go ahead and share my screen now and again quick confirmation that we can see it if i can just get a thumbs up awesome looks great fantastic oh boy all those thumbs up come through on notifications awesome very cool so we are going to start with the basics we're just going to start with a very simple button and work up from there now as we mentioned in the beginning interactive components is actually building on something that we launched last year which was variance right variance was is the idea that we used to associate two things together simply through naming conventions right we would say something like button forward slash default forward slash hover right and those naming conventions themselves were how we associated that these were two states of the same button that works but it's a little fragile and you know we would be doing things like swapping instances from the instance menu to make sure that we had the right one but then we launched variance and variance lets us take that same thing but actually have it be a real construct within figma where you have a single component that has multiple properties and each of those properties can have multiple values so we are going to be starting with variance for building interactivity if you're brand new to variance i definitely recommend checking out the variance live stream that we did uh last year as well it'll walk through the basics to understand sort of how you can use variance and this is going to be building on that concept by adding in interactivity so for starters we've got our simple button here our two states i'm going to combine these into a single component that has both of those as variants so i hit the combine as variance button you see we have a property called default and hover well i know that this is a state so i'm going to call this state here we go i now have a button that if i grab an instance of this and i bring this over to my canvas here i have a button that i can switch at states right this is the power of what we were doing with variants but now we want to set it up so that when i hover over that button it'll always show me the hover property and value that i have here as well so or the hover variant so what i'm going to do is i'm going to go back to my component right here and i'm going to switch to prototyping mode just as the same as if i was going to be making a prototype where i was navigating between frames except now we're going to be doing it from variant to variant so you'll see here just like with prototyping you're going to have the little handle the noodles that you can pull out and i'll connect the two together now because we're using variants it's going to understand automatically that i want to use our new behavior that's called change2 so you're going to see this new action here or sorry this this new interaction called uh change2 which change to basically means i want to move from one variant to another you're only going to see this this action type or interaction type inside of variants so that's how you'll know if you're if you're in the right space if you don't see it there um first of all you have to be in the beta for right now but uh beyond that just make sure that you're actually working with variants as you're going through it so here you'll see that we have an on click event well in this case it's a hover state that i want to use so i'm actually going to change this to while hovering so you can see now we've encapsulated this behavior inside of the variant meaning that every time i go to use that component if i have multiple instances of it and let's go ahead and just play this so we can actually see it here you can see now as i just hover over these interactions you get that included as part of your component and you don't need to wire it up for every single uh version that you want to make some of you may have had a situation where you had some nice complex interactions and you had to move them to their own page so that you could actually prototype it and see it you don't have to do that anymore you can now just save those as a variant and you'll be able to uh sorry save those as an interactive component and then anytime you go to use that component you'll have those behaviors so what's great is you'll see that in my assets panel now if i go to the right page here which i believe is going to be this create news page here that we're on you'll see that every time i go to grab an instance of this component i'm going to have all of that behavior built in automatically and again this is a very simple example but you're going to see how we build on this and can do some pretty pretty crazy stuff so again sort of looking at what mcgee was showing off there this is a lot of the same stuff that's happening over here with these behaviors right so we now have on click events that are changing to different toggle states much of the same behaviors that you were able to do with prototyping you can do here as well so we have things like smart animations where we're actually smart animating between two of our variants we're going to show some really cool examples for that in a little bit um but this is um again if it feels like it's clicking or like it's making sense we're taking two concepts that we had in the system and really just trying to bring them together and make this experience better for everyone so let's up this a little bit and talk about a couple more things that we can do with uh interactive components so next we want to talk about nesting interactive components and yes you can nest them so this is an important thing to understand interactive components are still components right so a component can have variants it can be interactive it can be anything like that which means that a lot of the things that you'd expect to work for a component are going to continue to work for interactive components too meaning that you can nest them inside of other components in this example here you can see that we have a simple label that is a checkbox with a label so when i click on it i it's basically going to say on click change to this one and then on click change back so i built a little toggle here right where i can toggle between the two i've actually nested that inside of a list component right so i actually have several instances of that nested component nested inside of a list because you may want to reuse elements like list elements right if you've got a list of menu options or you have a list of in this case checkbox forms or something like that i've actually put them inside of a component here and then i actually then used an instance of that somewhere else so we basically have an instance of our menu list with instances of our interactive component inside of it and things will continue to work as you expect so if we if we play this one here you'll be able to see that we are actually able to just continue to use those check boxes so again many of the things that you might be familiar with and how you sort of build your scalable design like using instances nesting instances things like that you should continue to use those principles alongside of interactive components very similar to how variants you still use things like instance swapping for nested instances and whatnot you can continue to use those principles alongside of interactive components as well yeah we definitely uh see a couple things coming in from the chat yes it's full of layers there's there's a definitely a little bit of uh instance inception happening here too which probably a good thing to mention too as well right which is just that uh as with everything that we do in in figma these are incredibly powerful tools and you want to make sure that you're doing it at levels that are going to be understandable not only to someone else but you also a few months later too right so make sure that you're being careful i mean try everything but then when you go to build things for production obviously be you know make some some good decisions around how things are constructed so that they're easy for people to understand as you're designing as well don't forget to be responsible exactly clever is not always better but sometimes you know great next thing that we want to look at is um working with overrides right so again as i mentioned these are normal components so they're going to work like components as you'd expect in fact some of the properties of variants are going to feel very natural because they're going to basically build on the same concepts there as well so if we have a our button component again so that we were working with before i can still swap out text as though i was working with variants as well here too so right like so show me some kittens and we hit play we're gonna see here that we get the override preserved even in our hover states as well again this is kind of what you'd expect from how the variant overrides work but you're going to see it here in the prototyping capability as well too so we didn't have to um even if i had swapped my variant normally like this right as far as changing what the initial state is you're going to see that it preserves it there but it also was preserved in the hover state and i didn't need to to set that up ahead of time it was just how the override was working one thing to note on the overrides it's kind of important is if you want to have things preserved in states other than the initial state they have to exist in the initial state and if that's confusing i'm going to explain it and show it right now so what i mean by that is here we have a tool tip right a tool tip has two states we have one where the tooltip is closed and one where the tool tip is open if i were to bring this component onto our page right now this is an instance of that and chances are i'm going to want to change the text of the tool tip right so what i can do is i can go to our open state and i can edit the text here you know here's a kitten um if i decide to set this back to the main component sorry to the initial state to actually be set to the closed version of the variant you need to ensure that that tooltip still exists in here so you'll actually notice that inside of this component we actually have that tool tip also hidden here and this is because you're going to need that same thing to exist in both states for those overrides to be preserved so just know that if you're changing things that aren't the initial state you're going to want to make sure that that tooltip is there so in this case i have it hidden and now when i go to actually use that component oh in this case i think i hid too much on this one there we go let's unhide that there we go awesome and i say if we go and actually hook this one up okay great it's got a while hovering event and you'll see now that i actually get i actually get that custom text that that override that shows up so you can continue to use overrides there yeah little i know right it's it's mind-blowing it's it's great stuff um last thing that i'm going to show and we're going to continue building up and sort of our more advanced features here that we have as well is understanding different frame sizes so we're going to build on that tooltip example that we were just looking at a second ago and you may have noticed something there which was that the frame size is only around the actual information icon itself in fact the tooltip is outside of our frame it's still in the frame itself but it's visually outside of it in fact we have clipping turned off right now to show how that works there's a great help article on our on on help.figma.com that talks about clipping and how how this can actually be used but what's happening here is that these are actually outside of the frame size this is really important when you want to decide how things should be positioned when you're changing from one state to another by default things will only change from the top left hand corner meaning that you're going to have to construct your frames in a way that they actually appear where they should so in this case you can see i've actually manually positioned this tooltip up above the frame where i wanted it to go and the frame itself is actually much smaller than this as well so we're able to use a uh while hovering uh interaction here so i'm gonna drag between the two i'm gonna say while hovering so basically while hovering the size of this frame i want it to show the tool tip again when i hover outside of this frame i want the tool tip to go away i don't actually want the tool tip to stay there even if i'm hovering over the tool tip so we make the frame just the size of the button and what this allows for actually i'll just grab a new example just to make sure some let's go ahead and play that oh i might have accidentally deleted my connection when i when i did that let's go ahead and grab that again awesome hold on a second let me just double check here well hovering change to open awesome how did i break this i think i know how i think i grabbed a frame not the actual instance itself there we go awesome so you see that that's how we get the while hovering behavior but if i hover off of the eye we actually lose the tooltip and it doesn't stay up when it's hovered you might want a different type of scenario which is that you actually want the thing that you're hovering over to stay visible when you're outside of it and this is where having different size frames is actually valuable right so in this case we actually have a menu where we want to show a drop down and we want that to actually be selectable so you'll see that the frames inside of my menu are actually different sizes right so these variants are not the same size as each other they're going to swap out but and the frame is going to increase in size so we're going to want to make sure that the menu can actually stay visible when we do it if we were to just use a while hovering event so i'm going to say i'm going to connect these two together i'm going to say wow hovering if we do this we're probably not going to see the behavior that we want for this example in fact let's go ahead and play it great but you can see here it's kind of acting like the tool tip right as soon as i take my mouse off of the first frame the menu goes away and we can't select it and that's because the while hovering is looking at the size of this first frame and saying okay as long as you're hovering over that i'll show it in this case what we actually want to do is have a little bit more complicated of an event here we're going to actually use an mouse enter and a mouse leave so we're going to say mouse enter and then we're going to say mouse leave what this does is this then tells if i'm going to say oh okay yeah while i'm hovering over something this size go to this one and then and then as long as we're within the frame of this one until we leave that then go back to the original over here so if we look at this this version of it you'll see now that that menu will actually stay open and again we have those nested overrides sorry those nested uh interactive components happening for hover states so you can see how quickly it is uh how quick it is to build a simple menu like this and in fact this was only three three components for also for just for the hover state for the button the menu item overlay and the actual menu opening and closing as well very cool and with that i'm gonna pass it over back to maggie for some more advanced examples too as well all right can you see my frame it's my frame in frame we're good awesome thank you appreciate it all right so um we're going to talk a little bit about component memory or i like to call frame remembering for me that helps me understand the concept a little bit better so i have here i'm going to deconstruct this a little bit so i have two frames so here is one of my here's one of my my interactive components right so when i click on one of these it changes to this so when i click on this it goes back right so red dot yellow dot and then over here i have a second different frame and between these two right this will hop over to this frame and this will hop over to this frame the interaction that i'm using here is uh navigate to and i'm doing a push animation so i'm going to go from one frame to the next and what i'm going to demonstrate is how interactive components are going to each frame is going to remember the interactions that you performed so i'm going to go ahead and hit play so i'm on frame one and i click you know one two three and i have those little circles those little duders going and i go now to my next frame and i turn on and i make some other ones you know available so now when i go back to that first frame that frame still remembers the the the actions that i performed so like the different kind of points in time um is kind of still there so i'm kind of going between those frames and it's keeping that so think of that as you know the frame will remember you know the interactive component um the actions that you took and kind of where they're at at that point and that stage in their life um so um that is component memory and for me that's you know might be a little bit difficult to comprehend as you start to kind of make you know multi-frame prototypes you're going to start to see the benefit of having that kind of work in that way so next is is the thing that i'm most excited about um is i've been seeing a lot of people using interactive components for animation um so i'm gonna play this really quick and i'm gonna keep it on the screen i saw that i was maybe going a little bit too fast with some of these prototypes so i'm going to hit z so y'all can kind of soak that in right um before when you would go from frame to frame it would be really hard to have kind of multiple animated things taking place at the same time so what i'm doing here is i have multiple of these interactive components placed onto this frame um all behaving kind of like going to their own tune um and their own timings so the way that this is broken down um if you take a look at this prototype i'm i'm basically rotating this this internal uh uh ball here right and if i go to my prototype did i just break it no i didn't break it okay so i'm using the after delay um and smart animate to go from one point to the next i know that some of you are thinking like oh my god why is he using linear if you have something that's a constant motion like linear is okay right it's like the one sound that it's okay if you have a constant motion so what i'm doing is i'm actually rotating these and the fun thing here that i'm kind of doing is i'm actually rotating it from zero to 179.9 and then from 179.9 to a negative 0.5 right so i could get that full rotation but what i have here is i have multiple instances of this on my frame so i bring this over um let's go ahead it has like a little white background but uh i can remove that little white background there we go so i have multiple of these on and and i'm performing my my little override so i'm changing that color and and i'm rotating it here and um down here i have a few other ones and these are just basically you know circles that are that are kind of bouncing and each one is bouncing to its own timing right so this one is going 600 milliseconds between the frames this middle bounce here is going 300 milliseconds between the frames the small bounce is going 150 milliseconds between the frames so having those instances on that frame i could even change you know that starting frame so right now i have position ground i'm going to change that to sky so once again when i go ahead and hit play right you can see all the things kind of taking place and the reason that this is kind of awesome is if you're designing a home page and you want to have little micro animations kind of playing if you have loading sequences things like that there's there's so much potential and opportunity for you to kind of have these small nested animations that'll just really make your prototype that much more rich so the last thing i just wanted to identify is um just kind of talking back to the way that the engineers were thinking about this you know not just creating hover states but really rethinking and kind of reshaping the way that you prototype in general you know we have these sort of ideas these mantras in the way that this is created so being able to quickly look at the prototype you know um at the the the state of the interactions and so you can kind of instantly kind of consume what's taking place so then that way you can iterate much more quickly and and produce on these outputs and it's going to make prototyping in general less intimidating because you don't have to create an individual frame for everything you can make these smaller more nested um interactions that take place so you're going to have much more opportunity so we like to say it's you know beyond just design systems right so variants provided a lot of opportunity for design systems but interactive components is going to provide a lot of opportunity for for prototyping for exploration and really kind of digging into the the potential of what can be accomplished um and and allowing you to just get your thoughts out you know right there on the stage hand it off to somebody else and they can begin to instantly see how something is composed so we're not going between you know like two different pages to see okay here's a nested component now let me come back to my main stage it's all laid out there right in front of you um so with that i'm gonna hand it back over to anthony um who's going to uh talk a little bit about what people in the community have been doing thus far with interactive components yeah and just a couple points on the stuff that you showed there too i think that the the easing animations i think i learned this from you right when in doubt he's in and out tends to be good yes linear for when you're doing things where you have to meet but yeah at the same time uh easing out he's using it now is a lifesaver for sure um on your last point there too i think um nico had actually mentioned this to me and nick i don't know if you have anything you wanted to add to this too but like you will begin to see have a sea change in how your giant prototypes are set up right something that used to maybe be a continuous flow as in like you're seeing something that that moves from one frame to the next to the next to the next and maybe you even have duplicates because you're trying to go back but you could never really go back in the same way that you wanted to that kind of thing you're going to begin to realize that the prototype itself can actually sort of take on a much more um compartmentalized or modular structure right as you're building those out so as as um miggy was saying there i don't know if anyone had anything else to add to that because i know that it was a huge uh consideration for uh for when everyone was was building the future right yeah i can i can add something today we have an uh an internal channel uh on slack called uh uh pasta pictures and uh yeah it's it's like it's like a known secret right um we talked about this a bunch of time and like uh passive pictures is basically just collecting either internal wild prototypes or uh kind of like like prototypes that people shared where you just see a lot of our blue noodles uh flying around in in on the canvas and of course that's not that's not ideal and we know uh we know that people do this and so for us i think the way we look at these things is kind of like what is the set of frames that are necessary to have so that you can still kind of like read the prototype and understand what it's supposed to be doing um but and you can still kind of like easily edit each important part but that you don't go into like this this wild wild mess essentially and at the same time it was super important for us that you can with minimal context switching see how that the one like interactive component then is used in a different context and then maybe that interactive component is used in a bigger context so think that we'll move away from seeing like these huge pasta messes to seeing like yeah a set of compartmentalized like like interactive objects that are then reused and i think you'll be able to see that like through screenshots on twitter that you'll start to read these systems in a way of like oh yeah this is happening this is happening oh i understand the prototype just by looking at it once and i think the more we can get into that into that environment in which you can like reduce really quickly the more effective it will allow people to collaborate on those prototypes because if i jump in and see miggy's file with the tic-tac-toe and from the first time i read his prototype i can duplicate it and iterate it and add my own ideas to this and i think that readability is huge in communicating how this feature works and communicating your interaction design intent um and so i'm pretty excited to where this will go but i think we'll have to say goodbye to pasta pictures at some point well well yeah we'll have more more tasteful noodles now moving forward so one of the last big areas that we wanted to uh to do was a little bit of a community spotlight this feature has been out in beta for a week now i want to say and already the community has created some amazing stuff yeah um andrew i don't know if you if you wanted to to just maybe like sort of draw attention to to what we've been seeing and things like that or oh yeah we knew people were going to make some cool stuff when we first built this feature but i think the quality and variety of what we've seen has blown us away um i think the first thing that i wanted to highlight anthony if you want to screen share is um something from adam p who is a pretty prolific creator in our community um he's been creating stuff since it's more animated days and i think one really popular prototype of his has been a keyboard prototype um and when anarch equivalents first came out uh last week uh he didn't disappoint after three days he came out with this awesome awesome battleship prototype um yeah we were uh joking after uh mickey came out with his tic-tac-toe prototype that like oh people are gonna make some like pretty cool games now but um after three days just like seeing this where uh you can play the entire game of battleship um in figma just blew us away so cool yeah and adam if you're out there definitely publish that as a community file we want the link we want to see how it's put together oh yeah just to add on top of that um there were a couple hiccups with uh publishing prototypes with interactive components in them in the community uh they didn't work uh earlier they should work now awesome yeah so if you're having trouble seeing the interactivity in the prosthetic view you should be able to see that now so um yeah next time i kick you over to jamie i know you had you wanted to show off that something pretty cool that we saw so i was i was really impressed when i saw this this is a sudoku prototype by dave williams and i think that one of the things that i didn't really anticipate is the variety of different input methods people would figure out how to really fruitfully use so using this sudoku prototype i had like kind of a magical moment because when i clicked onto it i'm like i was oh i was wondering kind of what input mechanisms they're using for other games we've seen really cool things like when you click on a square it would kind of bring up an overlay menu for each different options you might choose so that's not expecting expecting to click in and then see all the numbers from one to nine and that didn't happen and then i was like oh i wonder how this works and then i showed the next intuitive thing which is hitting the number key the corresponding number key and that just worked my head just kind of exploded i'm just like so so impressed that someone had thought through how to use these um these constructs to build this like pretty realistic input mechanism for sudoku game and i just i just thought it was it was so cool to see the variety of different input strategies people have figured out in order to leverage interactive components to make these really rich experiences it yeah this one is wild in particular so you can see here uh how this is sort of constructed right so so there's a a here's the key gamepad interactions and this is for every single square all done compartmentalized into a single um single square so again if we did the math on this i imagine that if you had to do that in the old-fashioned way so while we do still have a nice tiny little pasta here going on but you know it's like nine connections one to each of the keys um we would have had to do that times the entire size of the board i know nico has done some math on some of these in the past and the the the order of magnitudes get up there pretty quickly so you can see the kind of stuff that we're able to do much more simply uh than needing to do all of those connections normally awesome uh maybe i know you had another cool one to show off um so this this is by uh dave williams i hope i'm saying that right williams and actually uh dave has another really really cool one that we're going to show off right now too so all right wait yeah so he made minesweeper um like fully working too so well fully working but let's see so with minesweeper let me load this up and uh so yeah um i can basically click i can oops i think i broke something maybe give it a refresh i i think i i hit that name ah there we go okay cool so um we can click and uh basically play minesweeper and oops i hit the bomb if i want to see all the bombs there are my bombs even has the rudimentary timer i can hit the r key to restart oh i think something's funky with my zoom let me just say restart i happen to show it on my end too all right so here we go so click click click click click click click but the really cool thing about this right so i hit the bom boom bombs go um the really thing that the really cool thing that i like about this um is once again you know it's like we can easily kind of see you know the construction here he's using the the key gamepad when you press the spacebar to put the flag on the objects there's a ton of like after delays here to kind of simulate the timer but i really like the creative use of the scripter plugin so if i go over here and i open up the script um let's uh oops did not mean to do that undo okay um so if i click on the scripter plugin uh there's a little overlay here to the mines overlay let's oh here we go there we go so you can basically generate um here we go so i can generate new minefields using the scripter plugin so this was just like so not only you know really awesome use of uh interactive components here and kind of generating everything and the interactions but if you actually have the community file you can hit play um and then regenerate those minefields and kind of keep it covered away from yourself so if you want to be surprised every single time amazing i am in the chat total madness and it's amazing just like what you can do with this kind of stuff right it's almost like we're building little state machines and this is really pushing the feature uh as boundaries right like so we know there's going to be really practical use cases i think for people doing interface design but you start to see just where you can take this stuff and and just the kind of stuff that can be prototyped alongside sigma um i'm gonna show off a few more here as well too i've got a couple examples that i wanted to show um close a couple of these and let's take a look at the uh one of my favorites here is um a comparison slider so this is actually done by uh andre i think it's lenku hope i'm saying that right um actually this is a creator of one of my favorite plugins too called styler so if you want to check that one out it's pretty awesome um let's go ahead and play this and you'll see here this is actually using uh drag interaction types to store this as a component so i can basically click and drag and actually do sort of a preview comparison so here we're actually looking at um you know saturation comparison between the images but you can kind of see how this could be used for for uh different ideas in the future right so again prototyping drag interactions but we've compartmentalized this into a tool so that it's much easier to inside of a component so that it's much easier to use so you can see here here are the assets that are getting used for this and then here's the components it's just a slider component and then the actual handle component itself too right so we've got the increase in size and then we've also got the sort of how the drag interaction is happening here you'll see that if we go to prototyping mode we have those drag on drag and the way that drag and smart animate work together is that you can actually the distance that you drag will actually relate to that particular part of the tweened animation between the two of them so you can actually manually drag that as well pretty cool another one uh this is by uh bruno uh one of our actually uh friends of figma portugal uh organizers as well uh going back to some of just those simple animation things that we were looking at this is a great example of how you can just take a quick little micro animation something like that and store it as part of your component right so you've got these nice examples let's zoom out a little bit and we want to look at another character here as well so you can see that if we look at how this is actually put together these are all just stored as smaller subsets and smaller animations and using those timing delays to really make it a nice uh simple experience you almost have your little your little components here that you put together to create a larger animation each one of those have their own like mini timelines in that sense um just by how many how many delays they have how much how long the transitions are pretty awesome stuff um and then one more this was actually a a remix i think that someone did so there was an original file by uh izzy uh where it had these awesome uh keyboard keys basically all of these keyboard keys that are set up for you automatically this is a community file that's out there and um i believe this was remixed by uh oh shoot man i'm gonna forget it now i will have to make sure that i tweeted out to the person who remixed this um uh uh kapoor oh man all right i'll have to come back to that one sorry i forgot this one in particular but what's really cool about it is if we hit it hit play this is hooked up to all the key gamepad interactions as well so i basically have a full keyboard that i can type on it i can actually get the keys to highlight um you can start to see some of the again more of that compartmentalized interaction where i didn't have to wire this up on some massive scale i can do it key by key and then reuse those by setting overrides for the letters and things like that so just a nice simple way to to organize those components uh and then i'm gonna give it to nico for i think our last and probably wildest thing that we've seen so far so nico you want to explain what's going on here i would i mean i would explain what's going on i actually don't really know what's going on but i think so somebody here like recreated the figma ui as a prototype in like a mac os i think 91 style i'm not 100 sure um and it's interesting because it's like it combines a bunch of existing features that we have a combined auto layer that combines variants and you know uses interactive components too i'm not entirely sure how this is set up under the hood um but the interesting thing for me really here in this example is that like um and the thing that i'm also like just super excited to see over the last year uh last year's last week essentially since this is since this is in beta is that now with interactive components we hope that this is the first step to make prototyping not feel like a tedious task but that it feels like a task that you that you start in and then and then it kind of like you you you explore you playfully really explore the the interactive possibilities of of your interface ideas right so instead of being like oh i have to prototype now and you create 30 different frames i uh really hope that this will kind of like shift towards just encouraging you to try out interactive behavior and yeah just just play play with it right and then see and through expressing your interactive ideas like improving them and finding better solutions for your product awesome yeah and wesley thank you for throwing this together again publish this to the community i'm sure everyone would love to understand how this is built and put together as well sigma built in sigma as a figma prototype that also has the ability to prototype inception we reached it um awesome very cool uh last thing that we want to do is uh also just give a little bit of time for some questions i know we've had some good questions that are coming in so i might um actually ask different uh people from the team to help with some answers on some of these as well one of the big ones that i think some people have run into is that they've noticed uh so far that with auto layout and smart animate and and uh there might there might be some some edges there that are still sort of getting uh figured out um yeah i don't know if somebody wants to sort of uh explain where we're at with that and what's going on in the beta maybe i'll pass it up to it to andrew if you want to sort of mention i think we're working on through some of those additional things as well oh um yes uh is a highly requested feature um it doesn't it isn't fully supported at the moment but we are working on it um sorry uh anthony um can you repeat the question i was uh no worries that was it so basically just like letting everyone know that like we know that there's some edge cases in auto layout that you may may not look correctly in the prototype right now again feel free to drop us feedback that's one that we are fully aware of and development is still happening so cool um i had another question come in just around um do we get access to this document that we're seeing right now one thing i'll mention is that all of the examples that we've looked at so far these are actually all available in the playground file so we actually use the exact same examples for that reason so that you would actually have access to it so if you go and you grab the playground file which you can get at figma.com at sigma beta would be the the beta profile account um and you'll have access to this file where all of these examples exist as well here's one maybe for the team uh actually this looks like the same question i think it's just mainly around auto layout yeah so if you're seeing stuff with auto layout um just uh check it out as well uh awesome just going through my list of questions that we have over here as well i know we are getting close on time too so uh i just want to check this out oh here's one for the product team as well uh any thoughts on on adding uh any kind of logic might we have the idea of logic built in at some point yeah i can i can talk about this yeah this is like i mean i can't i can't promise anything but generally it's definitely something that we're uh looking into not specifically like conditional logic there's there's many different ways on how to approach this um but it's basically kind of like how can we um make components communicate to each other is definitely on our mind uh and that like if some change happens other other components can react to this um but there's like yeah no timelines that's awesome very cool um and uh it got a couple of people asking how will this work with with uh code export i'll just take that one quickly there and just mention that um we will be looking into into ways in in the future but for now just understand that the inspect panel is going to work as it does with variants right so that this is mainly just for um inspecting the editor views and less on the on the prototyping side so the the interactivity you'll see in the prototyping view but the inspect panel will continue to show things like variant props and whatnot as you're as you're working through them great very cool um we do have another question here um i think this is a good one for us to touch on is like are there any community creations that you can spotlight um made by by women or or or or others and i think absolutely yes and i apologize i don't have any examples with me today please tweet at figma or at me i would love to make sure that we get some of those to the surface and that we have more examples that we can show from from the entire community as well uh okay we have a lot of questions unfortunately we are coming up on time for the session today here as well um i might just have a couple more questions and then any other questions that we didn't get to again please tweet at us we will be happy to to answer as much as we can um this is kind of a good one i think for the product team and uh and uh and are there plans to add more interactions beyond change to and and in my head i'm trying to think what what kind of things that could even be as well right other maybe other types of uh nested interactions and whatnot jamie any thoughts i have each kind of interaction type that we add to figma really uh to make sure it composes with everything else so i'm sure there's other things we're going to consider in the future but we don't have any specific plans at the moment awesome awesome very cool um this is an interesting one is there a reason why um this is i think maybe maybe just for for miggy and i hear why we're using chrome instead of the app on mac um good question i'll give my answer it's actually just personal preference for me i'm i i it's the same experience in both i have both i use the desktop app when i'm developing plugins but i actually use chrome profiles pretty heavily so i actually have multiple accounts that i'm always switching between and it just makes it really easy for me to not have to sign in and sign out of all of my google spaces and whatnot and i have the same thing set up for my use cases as well so personal preference i don't know if anyone else has a has an opinion on that one yeah i think for me i'm using the chrome profiles for the same i just have like so many different approaches and different setups for each one and i usually use my desktop one for like doing demos things like that so i have it set up and like i have things like kind of queued up a particular way there so i just have just different environments so um just sharing in a live stream is just easier for me in chrome awesome um had another question just around um and again maybe back to the team is there any way to affect the state or the the current variant of another component can you actually have one that changes another one that's not possible at the moment at the moment the workaround for that is that you can flex still create two separate frames so if you need reactions where one object changes and another one changes you can just kind of like add the interaction onto the interactive component link to a different frame duplicate that and just have the responding changes there um it's it's yeah it's the current workaround awesome very cool okay with that i know that there's more questions coming in again there are so many of you please come and find us afterwards and we will be happy to answer more questions um just a couple closing points that i just want to touch on as we're going through this here again if you're not in the beta yet and you want to be a part of it please sign up we will get you in there is a support form for anyone who has questions great place to ask questions and also get help too as well check out the playground file if you haven't already all of the examples that we walked through today are available in that file minus the community ones but again many of those are in the community so if you just search interactive components under the community tab you're going to find a bunch of great examples there and also always check out the help center for for more information if you have questions a couple of uh just sort of housekeeping things here uh tomorrow uh maggie's actually going to be leading a session uh with a couple of um people from the edu space uh and and you should definitely definitely check that out it's gonna be a ton of fun um and you can go ahead and sign up on figma.com events for that as well and with that i just want to give a huge thank you to uh product and edge for joining us today it's always great having other faces on here with us um and maggie who i believe this is one of your first office hours live streams that you've done too as well and of course as always thank you to everyone who joined us today um we can take this feature to a certain level but we really built here is something for you to to explore and actually create things that even we didn't anticipate and understand and so always be publishing to the community sharing your ideas out with us we want to learn more and see more from from you as well and thank you again for joining us today have a good day thank you so much everyone

Channel: Figma

Views: 44,560

Rating: 4.9957805 out of 5

Keywords: figma, figma design, product design, design systems, ui, uix, ui/ux, user interface design, interface design, livestream, design tool, ux design, collaborations, office hours, properties, components, figma tutorial, design, user experience, animation, collaboration, prototyping, prototype, mobile design, フィグマ, デザイン, Figma Tips, Office Hours, interactive components, variants, interactive variants, component set, variant prototype, interactive figma

Id: hOoEeNa6aEk

Length: 52min 33sec (3153 seconds)

Published: Mon Mar 08 2021