Office Hours: Scroll actions for your prototypes

uh so i'm really excited to show uh what we have today and talk with uh nico and aaron about uh some of the great stuff uh that we're gonna show you and then hopefully walk through as much of the uh new features as we can all right so let's go ahead and dive in um i'm going to just pause here for a second and just i want to ask a couple questions just to niko uh and aaron about some of the new uh the new scroll to interaction behavior and things like that and and i think a great place to start is just with nico can you give us just a quick overview of what is the scroll to action and what does that mean yeah i think on a super high level the scroll to action is just a way for you to make the prototype or a container like a scrollable container inside a prototype to scroll to a specific location um on when kind of like something happens so kind of like on click scroll through the specific particular location awesome awesome aaron anything to add no uh yeah so one thing that i was particularly excited was not just scrolling vertically but also horizontally and also multi-axis as well too some of the use cases that i was excited about were maybe maps or documentation websites where you have one scrolling container here and another one here and you click on one and this scrolls so that's uh super exciting awesome awesome very cool and you know is there is there any part of this that you're most excited about to see how people might use this or anything like that or yeah yeah um so this uh this is the first time that uh figma has on screen interactions within the same frame and i think this is going to be huge in reducing the amount of top level frames some of the expert designers out there may have been able to uh do this feature before but they used a lot of different frames and it was a bit hacky so this is this is the first time for on-screen interactions and i think there's still a long way to go awesome yeah i'm excited to see what the community starts creating with this uh nika i mean is there anything that that you found particularly exciting or are really looking forward to it's like definitely second thing what aaron has been saying of like we've been traditionally been very kind of like a screen to screen flow step-by-step kind of prototyping tool and i think this is this is definitely a super interesting first step and then um with like interactive components that we announced that config like we'll we'll definitely going to take this to another layer you could say [Laughter] are we keeping a tally of the of the jokes because we're getting um one question that i i've kind of been interested in and this tends to happen a lot when we do um future launches i'm always really interested in this part of the story too um that how did we how did we arrive at the name scroll to you know uh some some other people may maybe may have seen this with different names and different products but but how how did we get there yeah i mean naming naming just has been always has been and probably just will be like the naughtiest part of a project kind of because it's like also something you can also change like a week before you launch it which is something that we did with like components and variants like there's some some some stuff there and i think that with foreign not interactive components or scroll to we were thinking a little bit about like scroll to versus anchor links and we anchor links was kind of like a more approachable one the one that we heard uh kind of like more people talk about more naturally in that way but we also realized that since you can use it to scroll containers as well it becomes more like a feature like an action really that you can apply to different kinds of containers um and so that's kind of like that's a little bit of how we decided that uh to use scroll to because it feels more encompassing of the variety of use cases that you can do yeah that i think that's kind of like how we how we arrived at that awesome yeah and we're actually we're going to look at some of those those more interesting use cases that may fall out of the bounds of like what you might have already thought you'd be using scroll two for so that's great uh one last question before we actually start diving in here aaron i i understand that as you mentioned you you started recently this was actually your first project uh working at figma what was it what was it like shipping your first feature yeah yeah this is my first project uh yeah i've led projects at other companies but this was particularly unique figma has a lot of different code bases and a lot of different programming languages as well too and so i had to put on my investigator detective hat and just get a sense of of the lay of the land and figure out how to make this work with our current code base so that was really exciting and also working with our team the design with niko and product and other engineers on the team uh super collaborative uh super cool and immediate feedback as well too as an engineer sometimes there's a delay in getting some feedback from everybody uh but this this was pretty immediate and so that was really cool uh and uh as far as like the actual process you know i spun up a quick prototype uh but we worked in an iterative iterative fashion and so we wanted to add features and and so that was that was really cool and uh finally you know as an engineer you know sometimes you have some ideas and one thing that i thought of what we should add was a custom offset and so you know i talked to the designer and product and they were super supportive of that as well too so i'm excited about that yeah awesome in fact i think that that's probably the offset example i think is one that people i think might be familiar with i think that that's something that you've probably seen in other other tools and other places where you can set to specific offsets um i know the team pushed that a bit further and now we can actually do dynamic offsets and things like that too as well so we're going to look at a couple of those examples as we go through um this is awesome i'm ready to get started and dive in and let's take a look at how this actually works i want to show off a bunch of examples uh some best practices uh aaron nico as we're going through this if you have any anything else that you want to add or any examples you want to show plus please don't hesitate to stop me and we'll uh take a closer look at some of that stuff as well but without further ado let's uh let's scroll scroll over beethoven i don't know i'm gonna work on it we'll figure it out um great so a first place that i wanna start is um a little bit of understanding how the scroll behavior is gonna work in figma right so as nico mentioned before what scrolling allows you do and what scroll to action allows you to do is actually scroll further down on a particular frame by having an interaction and when i say down it could actually be in any direction but most commonly you've probably seen this on websites where a navigation link at the top of a website will take you further down the page usually with an animation of some kind of some kind of timing on it so that you can actually see the content as you're going by the page as well so before we can actually enable this in uh figma you have to make sure that you actually have a page that can already scroll um when you're creating your pages of content i often find that i'll make a page like this as i'm adding things like if i'm making a home page or a marketing page or something like that i'll just continue to make the frame larger and i'll have a full example of a page this might make a little bit more sense if we look over here which is a great way to sort of preview your content understand your page uh look at it and you may be inclined to just go ahead and present it as it is right now and that's fine and that works and in fact actually i'm just going to go back to our basic example here let me try that again there we go and this works and in fact it almost looks like it's scrolling right now already because i have more content than was actually visible but in reality this is actually just the prototyping view trying to be uh kind of nice to us and let us actually look at the whole page if you change your zoom settings you'll notice that we can't actually scroll anything so i'm set to just show me the entire frame and it doesn't actually scroll up and down it's because we don't have any content that extends beyond the frame in fact if we come back to our example we can see that everything here is actually contained inside of the frame if we go to um prototyping mode we'll see that we have no scrolling enabled so there's actually no scrolling within this frame even though it kind of looked like it in our preview over here what we need to do is add content or create a way in which content is actually extending beyond the frame and the easiest way to do that is to once you have your full page created you can actually return your frame to its actual size so in this case if we were building a desktop website i may have the whole page shown here but we know that the actual what we call the fold right or where the actual browser window is going to end is actually going to be much higher up on the page probably something closer to you know about here or so again you can use your presets you can use different examples to understand exactly what your general folds are going to be right so whether you're designing for mobile or designing for desktop that distance is going to be different and this is something that actually content strategists put a lot of work into what's the information that we need to see first versus what's the information that can come further down on the page so to technically create this in figma once you have your content page created like this the easiest thing you can do is actually just change the height of the frame you may be familiar with the concept of constraints right where if i go to grab a frame let's say if something was accidentally set to not accidentally maybe intentionally set to constrain on the bottom like this when you go to adjust your frame stuff might start to move in ways that you didn't want it to so the easiest thing that you can do is if you hold down the command key you'll see here that i can actually adjust the height of my frame and it actually ignores constraints so that's a great shortcut for ignoring constraints as you're doing this a couple other great shortcuts and these aren't actually figma specific these will work on a lot of different systems but as if you are trying to do say like let's say we do horizontal like this if i hold down that command key again i can do just the constraints from one side but if i hold down command and option i can actually do both sides simultaneously if i want to actually shrink the content this way and then lastly another great one if you want to add another shortcut there you can do command option and shift which will actually give you proportional scaling while also ignoring constraints you may not may or may not have a use for it but it's a good little shortcut for resizing your frames so as i mentioned we want to actually reduce the height of the frame here so i'm going to i'm going to actually adjust it up to here and this is cool this is this will actually um we now have content that is running off the frame but we can't see it right now so what one other little trick would be to select your outer frame and say uh uncheck clip content so clip content means hide things that are off the frame if you uncheck this it's going to show you all of your content that extends beyond the frame in this case you can see that we actually have those other leaves showing up now because they're actually beyond the frame once you have content that goes beyond the edge of your frame under the prototyping tab we can actually adjust the overflow behavior and set what type of scrolling this frame should should use meaning that if there's more content on this page than i can see enable scrolling in one of these directions so i'm going to say vertical scrolling because we want to scroll up and down on this i'm going to come back to our prototype and you'll notice now we actually have the right height of our frame and i can actually scroll the page up and down so we've now enabled scrolling or we've enabled overflow behavior on this frame meaning now we can set up a scroll to interaction very easily uh if you set up the scroll interaction first and it doesn't seem like it's working for some reason so if you go in and you create the action that's probably the first thing to check because sometimes you may just have your full page and you forgot to adjust the height of the inner frame or if you're getting very fancy with it some designers will probably figure out ways to use components and instances to simulate that same sort of behavior in a more advanced way definitely check your overflow behavior because this will be the first thing that you'll want to make sure is actually set correctly as well so let's go ahead and um actually uh take a look at one of these behaviors and how they work so i'm going to select a much like any of our other interactions you're going to have the interaction is built up of a few different parts there's basically the what triggers the interaction so the behavior that will trigger it meaning the object that you've selected and exactly how it should interact with that object the action that should occur so what do you want what do you want sigma to actually do when when you either click or drag or or press a key or something like that and then how it should how it should actually uh create that that transition so in this case i'm going to select our button here and i put the interaction click on on click interaction on that so one way to build these would be to go over to the menu hit the plus sign on click you can select scroll to and then you can actually choose any of the layers that are within your current frame so at the current level within the frame you're actually going to see all the other layers available this would be if you wanted to do this from the menu over here the other quick way to do this is much like other prototyping connections if you select a layer you may remember that you can do this to select oops sorry you can do this to select other frames together you can also now use this to select frames or or sorry layers or objects that are within the same frame and sigma will know that this is supposed to be a scroll to connection so it will automatically give you an interaction detail that's set to scroll to the name of the thing that you are scrolling to and a few other behaviors that we're going to look at here as well in fact let's scroll even further down our page i'm going to change this i seem to have a dictionary shortcut set up ah geez what's going on there okay hold on a second everyone i'm just gonna disable that there we go oh it's a long press that's what's happening okay so i'm just gonna grab that and there we go um reset this to our lower object down here that's off the frame so now we're telling it to scroll down and off the frame if we go ahead and look back at our example i'm gonna hit scroll it it scrolls now this was set to instant so much like any of our transitions if we haven't set an animation they're gonna transition immediately to that location could be really useful you might have some good examples of where you want to do that in this case though let's actually animate this i want to see this transition happen and you'll notice that you can say anime you'll get our built-in easing options as well so if you want just a straight transition you can do linear if you want to have ease in and out you can do that too as well ease in back these ease in back ease in outback and using an outback not an australian thing but what these will actually do is these create a curve that actually goes a little bit beyond the uh the linear curve in fact outside of the bounds of the of the linear graph so if we if we go to custom and you'll see here that an outback would actually do something like this you'll get a little bit of a bounce with it uh as you're as you're doing it might be the kind of thing that you want to do it in this case let's keep it simple generally if you're scrolling to a location on a vertical page you probably want something like ease in and out this will start fast slow down sorry start slow so it'll ease into it speed up a bit and then it'll actually slow down again as you're reaching your destination because this kind of feels like this tends to feel like a natural way that you can scroll down your page so let's go ahead and take a look at that again press r to restart my prototype and we get the transition between the two now that was pretty fast so let's go ahead and up this time to one second so in this case a thousand milliseconds uh rerun that and you'll see there we get a nice little scroll behavior amazing all of the same thing all the same frame i didn't need extra frames i didn't need to smart animate between layers i didn't need to do any of that other stuff it's just a nice simple uh connection between the two now as i mentioned earlier this is also dynamic so if you're used to doing scrolling behaviors with things like offsets you'll find now that these are actually all dynamic based on the position of the object that you selected you do still have the ability to set offsets if you want to do that but what's great about this is that if i change the position of this object like this that scroll to is actually updated automatically and will only scroll to once that element is in view this is a pretty amazing thing you can imagine if you were working on a design for a home page and all of a sudden you want to switch a couple of the big sections around like maybe you've got a payment section or or a pricing table or something like that you can just swap them and you don't have to change any of the scroll connections at all great so not only do we have vertical but we also have horizontal so let's just take a quick look at one of those examples uh again the same trick as before i'm gonna hold down command to make my uh frame a bit smaller i'm gonna turn on clipping so we can actually see our turn off clipping so we can actually see our content and then again i'm going to select the prototype layer grab my scroll interaction uh grab the noodle from the from the from the button and then drag it out to the element that i want to you'll see scroll to takes effect automatically now remember we do need to set that overflow behavior if i don't turn this on and we try to run this prototype in fact let's just take a quick look you'll notice that nothing's going to actually work because we don't have any way to scroll there's no overflow set so be sure to set that in this case i want to do horizontal scrolling and cool awesome oh and actually i want to make sure that we have our destination set here correctly and interesting i would have thought that would have worked as expected hold on just double check here great okay so what we're going to do is turn off this oh boy thanks all i'm on a new computer so i've got that nice dictionary dictionary behavior uh enabled here we go there we go i'm just going to update this turn this off horizontal interesting we might have to come back to my horizontal example here looks like i have everything inside my frame there we go this might have just been a little bit of a issue on my end as i was setting this up uh let's check this up hmm interesting i do have that set to overflow we'll move on to this one i've got another example that we can take a look at of nested scrolling that will show this behavior a little bit better too as well great okay so this might actually be all set now awesome there we go so the issue there was i was i just had the button selected and i was actually changing the overflow behavior on the button these kinds of things happen you know as designers were going through there's a lot of different things to click on uh so just make sure that you have the parent frame selected right because that's going to be where all of your content is actually being set to overflow uh lastly last example again keeping these kind of simple right now but you'll see here that we have a giant frame with content in both directions so if i wanted to i could do the same behavior again in this kit time i'm actually going to set overflow behavior to both horizontal and vertical scrolling go back to my design turn off that clip content so we can actually see it here as well and then i'm going to drag my prototype connection out to something that's off the frame you'll notice here too that your animation effects are a little sticky in the sense that whatever animation timing you have set up previously you're going to have that set to the default as you continue to create more connections as well right that tends to be a pretty good heuristic because usually you're trying to simulate the same types of behaviors as you move around a lot of different types of transitions or speeds of transitions might be confusing or strange so and generally that'll probably be how your uh developers are are thinking about it too as well you'll probably just have a couple basic transition types uh as you're scrolling down pages or across carousels and things like that cool so uh last example here we just take a quick look this one is really powerful and this is one that i think we're going to see a lot of really cool examples as to how people are using this you'll see this we actually get scrolling across both axes you can do both horizontal and vertical here so these uh basic examples are uh pretty cool but let's actually put this into practice with something that may make a little bit more sense so let's take a look at our home page here for anyone who's downloaded the plugin file you might sorry the playground file you might be familiar with this one that we have here we have a basic example where we've already done the the reducing the size of the frame so you can see here the frame actually ends here content extends way down and i want to just create a link between the services button and i wanted to scroll down to my services area down here right because the service area has a nice sort of heading and its own little background color and everything like that i probably don't want to select adjust the services text because that's going to when i actually create this it's going to scroll it that far and the text is kind of going to be awkwardly near the top so the easiest way to do that is that if you have a containing frame something like a background color or something like that you can use that as your scroll to destination so in this case if i wanted to i'll go back to my services button make sure we have our vertical scrolling on great looks good back to services and i'm just going to drag this down and connect it to this entire services section now that might be a little bit hard to see but you'll see that there's a connection line that's actually connecting right down to services here again same timing on this so let's go ahead and take a look at this example i'm just gonna present a new prototype awesome and you'll see we get that nice simple scroll animation again all with a single frame so pretty awesome stuff with what we can do there as i mentioned it is also um dynamic too as well right so the location of those anchors is going to um change so if we actually switch the order of these sections or if we had more sections or let's say we just wanted to add more content in here right so if we had another section that was actually going to be within our list of sections in fact if i see if this will work real quick if i just throw an auto layout on that real fast and i duplicate this section a few more times you see we get an awesome little uh way that the page expands so this is using auto layout as one of the newer features features that we just recently updated you'll see that it actually creates my sections and able to quickly organize them and in fact i can move them around very quickly too as well right so if you're doing your design work where it's very compartmentalized like this where you have different page sections auto layout will make it really easy to move those around and your scroll to links will update automatically as well so you'll see that that connection to that services section is still connected all the way down to the bottom even though i added more content in between cool so let's look at another kind of interesting example here which is that we can actually nest the um scroll to destinations inside of other frames so what i mean by that is if i wanted to before we were looking at examples where we were scrolling within the actual top level frame as we call them right so in this in this last example this is the top level frame this frame has scrolling applied to it but in this example we're actually going to be scrolling this frame here so you can see this this nested frame that we have this collection that i have right here it's a collection of cards with auto layout on them uh i think you probably saw this from from some of raji's examples that we had and one of the previous live streams um and what we're going to do is actually link that up to these buttons so that each of the buttons will take us to a specific uh one of these cards within this nested carousel so again the entire frame here itself is not actually scrolling just the nested frame so you can actually create that that interaction as well so if i wanted to i'll come in here again check my overflow behavior on my nested frame in this case we want horizontal scrolling you can see that we already have content that's running off of it a little bit and i'm going to grab those buttons and again i'm going to grab my first button and basically just drag the link to that inner card right there and you'll see here that it's saying scroll to card right so i've actually selected that uh inner card in the collection and we set up that one to connect to it let's do the same with our with our two uh and with our three as well uh one interesting thing to note you'll notice here that since this one was a main component um the other components will actually pick up that same behavior automatically so if you are using main components you may or may not want to have them actually in your carousel uh it'll work for this example because i can just change the destination by dragging the com the noodle like this as well uh but just something to keep in mind if you're seeing connections where you may not have expected them think about whether or not you're using instances or not because those will actually uh keep the original connection that they had on them as well and um so you can see here that we're actually it for our destinations what's what's really cool and uh aaron nico i don't know if you have anything to add on this but we actually have a few different groupings of destinations we've actually got um both of our our nested frames as well as our top level frame as well can just one of you want to speak to that a little bit yeah sure i think that um at this point also i think that's like what you mentioned in in the beginning i think that like for the top level frame the scrolling for the top of the frame basically is just defined through how you look at it in the viewer so we expected to always have the potential to be scrolling and then in the drop down menu basically what we do is we wanted for you to be able to pick things through the drop down menu but we also didn't want you to overload with all the possible children inside of inside of the frame basically and so we decided that we want to show only the first level children of a scrollable container and so if you open this again if you open the menu again anthony what you'll see is that we treat the top level frame so in this case this is a nested example that we treat that as the first grouping and then we treat the we find other frames that have uh scroll like overflow scroll set and we treat those as like subsequent groupings and then show the first level children inside of that awesome yeah yeah so you can see here that we see the the links to the top level frame and then the nested collection of these cards that i have here as well again collection here is just a word that i'm using to mean a grouping of elements it's not really a construct in figma but if you have a collection of cards or things like that you'll you'll hear that a lot of developers use that kind of language as well when they're talking about lists or table rows or card collections things like feeds or anywhere where you have a lot of similar or like items that you're trying to scroll through as well cool so let's take a look at that example here and we're on a new page so i'm going to show a new prototype and you'll see here that now we're able to actually uh with our buttons linked up we can actually scroll between our different uh cards that we have now one interesting thing to note because when i'm on something like the second card because the third card here is already in view there isn't going to be a way to scroll to it if you wanted to add some uh centering so that you actually got a little bit more distance on that you can add what's called an offset here as well which will actually create a little bit of padding here on the left hand side let's look at another offset example and if there's time we can come back to this one too to see how we could improve that but let's go ahead and look at our original example again right so we had uh in our basic example we had a menu that was fixed at the top right so the menu scrolled with the page but what happens if we have a a menu that is actually a fixed position while we're scrolling so you'll notice that under the design panel if i select something like this header you'll see here that this has fixed position 1 scrolling selected you can also see this in the layers panel on the left hand side you're going to have fixed elements will be actually separated out from the scrolling elements if we go to present this page and again just going to check my overflow settings so we're set to vertical and the frame ends here let's go ahead and look at this you'll see here that again that header stays fixed at the top so if we try to recreate that same example as we did before let's go ahead and grab our services button and i'm going to actually make this a scroll to down to that services section again so same behavior as we did before let's go ahead and look at this example i'm just gonna close those there we go awesome cool we gotta scroll down to the services area but maybe you can see the issue here right so one of the things is that we're actually covering up the services title right so we can't actually see the thing that we wanted to scroll to exactly because scroll 2 is going to work on the position on the outer frame so in this case the header is actually going to be covering up the scroll to location one way to fix this very quickly is you can add an offset and generally speaking a pretty good rule of thumb is take the height of the object that you're trying to that that is fixed and use that as your offset height so in this case if i go back up to my to my header here to my menu and we look at the height of this menu so this thing is uh header there we go you can see this has a height of 120 right so what i can do is if i look at that go back to that interaction that i just created you'll see immediately below the scroll to there's a couple of uh inputs where you can change what we call the offset so this is where you can change the y offset so that's going to be the vertical offset and the horizontal offset now i'm going to put a 120 in here a positive 120 and let's take a look at what happens uh so if we come back here and i'm going to say click on services uh-oh went a little bit further than we wanted it to right so this is actually 120 actually added to the offset because if we think about how x and y uh axes tend to work in digital design programs interface design programs um you're going to get positive in the uh down and right directions and you're going to get negative in the up and left direction so we actually want to create a negative offset here because we're actually going backwards right so we're actually going to go back up a little bit so in this case if we come back now we replay that you'll see we get the services menu stopping exactly where we want it to so this is an interesting way that you can use offsets for this kind of scrolling behavior now there are much more advanced ways that you could try and create this menu too right you could nest all of this content inside of a scrolling frame and not actually use fixed position at all you'll just have two separate frames that appear as though it's a fixed menu at the top i'm sure there will be some great advanced examples of that in the community as well but this is a great way to quickly sort of get around that so if your offset is not working and you've got to present something in about 10 minutes or so and you just can't get the heights right definitely try um try messing with the offset a little bit and seeing if that helps you get exactly what it is that you're looking for then you can go back and figure out if there was a better object that you should have connected it to or if you just want to continue using offsets like that keep in mind that the offset itself will always stay the same height as well so if you happen to move your object or your layer you're still going to have that same offset unless you update the offset as well cool i'm loving all these comments everyone yeah um it's it's uh scroll two is is is pretty amazing it's actually one of our top requested features that we had so when i saw that one coming through i think it was like uh really high up on our list i don't know how much i could talk about but um it was definitely one of the most requested features that we had so um great so with that i want to look at a couple more examples that we have here of what are some practical ways that we might use this right so we saw some pretty good ones as far as like marketing pages and home pages what about something like an app environment well there's a behavior that we see a lot and you might be familiar with it you may even do it absent-mindedly without knowing which is that let's say you've scrolled pretty far down a page you can in a lot of apps these days if you tap the home button or if you're sorry tap the button of the current page that you're on you'll get almost like a back to top action where you can immediately scroll back to the top so what we can do is in our home page example if we wanted to we could simply take something like a back to top button and we could actually tie that to the top frame and it would quickly go back up to the top um keep in mind here you're not going to want to use if you have multiple frames on a page you're going to notice that when you go to create an interaction i'm zooming away out here because i just want to show you the full page you're going to see that there's actually a little bit of a back button ignore that for when you're thinking about scroll to because that's actually for back between page transitions right so and that's still really really valuable and you're going to probably want to use that for other reasons if you do want to create it back to the top on a page just link back up to an element that is at the top so in this case i have that whole header element that i could select and that will take me right back up to the top as well so back to our app example that we have here i've got a collection here and again we can't see it because i don't have overflow turned on sorry i don't have clip content turned off so let's turn off clip content now you can see that there's actually a full feed that's running behind that fixed nav bar at the bottom if we were to grab this and say on our top frame we want vertical scrolling so if we present this example here you'll see here that we actually have a feed that we can scroll much like we would have in an app environment or something like that um if i want to get quickly back up to the top though perhaps i want to be able to select that uh home button and actually bring us back up to the top of our page so in this case i'm going to grab the home button i'm going to actually remove that first interaction that we have there and just drag out from the noodle i like doing that a bit more if you haven't heard them called noodles that is a loving term that we use internally for the connection lines that you see so the blue lines there um it's uh i'm not i'm not too sure of the history nico maybe maybe you know a bit more there but uh it's certainly uh it's pretty fun yeah i think it's just out of lack of a better term um like hey those are like those look like noodles yeah for anyone who um has used interaction connections inside of uh components you'll notice that when you create instances of those components those same connection lines are going to be connected uh to the other elements that are on the same page as that component so sometimes once you it may look like a lot it's actually quite a few connections that you've actually had to create but you can end up with these wonderful uh again lovingly called pasta pictures sometimes where if you if you don't have anything selected you're gonna see a big a bunch of the noodles once you select a frame uh you're reduced to just the ones that are relevant to that frame but it's pretty cute um great so in this case i basically said i want to connect this to that nested feed so that nested frame here with the feed and i want to connect it to this very first item that's in the list we're going to scroll up to the top and if we go ahead and rerun this if i scroll down my page at all and then i hit the home button you'll see we get a nice scroll back up to the top generally in the app environments i think that that's transitions a bit faster but hopefully you can see that one on the on the zoom right here as well too so uh awesome one other pretty cool example that we have is um and this is getting into some really interesting stuff so um uh miguel one of our one of our figmates uh is able to um uh uh found out some really cool stuff that you can do with map centering so because we have access to both offsets right so we can do both horizontal and vertical at the same time we could do some things like moving to different parts of a map when something is selected in this example that we have here and this is the one that you'll find in the playground file we're just doing a simple centering so this is a really nice little interaction that you'll see in a lot of apps a lot where if you are near something or you're selecting something that is close to what's being selected it'll actually re-center that object for you so in this case if i were to actually click on oh let's go ahead and actually hook things up though shall we that might make it a little bit easier i'm going to go ahead and take a look at our math example here i've got our map i've got a fixed bar at the bottom i'm going to turn on overflow horizontal and vertical scrolling for this i believe oh no sorry it's inside of our map we have horizontal and vertical scrolling setup so we actually don't need that one and then what i want to have in here is that with these pins that i have here selected each of these pins i want them to actually re-center the map for me automatically by just bringing the content into view so the easiest way you could do that is that you can take the pin and again this is a pin that is actually nested inside of the map that is moving so if you think about that for a second the interaction is actually on the exact same in the same frame that i'm also telling to move at the same time or be scrolled too so in this case i'm going to uh take this pin and say i want to bring this whole menu item into view so in fact let's just do it without the on click interaction so there we go awesome so scroll to this card and animate it in meaning that i'm going to click on this pin and i want to scroll this card into view if we go ahead and we check that one here you can see what happens right so it actually pulls it into view now if i wanted to get uh if i wanted to clean this up a little bit i could go ahead and do things like add offsets right so i know that i want to actually probably have that be a bit more centered in my in my design as i'm going through this you'll find this one in the in the playground file too if you need a little bit of help with this example would be something like 60 pixels over 120 pixels oops sorry 60 pixels over 120 pixels down um and not actual pixels there by the way i'm just saying pixels just think more of abstract than pixels and again we want to make sure that we get those going in the right direction here so let's go ahead and uh funny enough this one might actually be reversed from what i was saying before here there we go so these two i'm actually going to reverse their their positions that we get something and you can see how much i can i can mess with this if i wanted to um and we can bring these things into view now again this is a rather trivial example but you could imagine doing this on a better page another way to accomplish this if you didn't want to deal with offsets is you could probably hide an entire frame in here that was the size of the window that you wanted it to and it'll pull it into view exactly how you wanted again these are getting into some more advanced nuanced cases you're going to see a lot of really new cool files in the community that are coming out to show off some of these things one more that i want to draw attention to that i think is pretty fun is um a an example from uh louis actually one of our other designer advocates he recently posted this file so um if you want to find it uh we will drop out a link in the in the channel for that as well um but what's going on here is that he's actually got other frames nested inside of a single frame something that you might normally think that you'd be using transitions for right because you want to go to the right or to the top or something like that but what's really cool about using this with scroll through is that you can do transitions that previously were hard to accomplish so things like diagonals right so if we if we look at these uh these prototyping connections that we have here and in fact you know what i'm just going to go ahead and grab a copy of his file here because i realized i may have broken the connections when i brought them in so let's go ahead and grab his file awesome so again for anybody who's brand new to figma the community you can just go and grab anybody's work that they've published and made available to the community um where you can come in and grab different examples as you can see here so let's look at this 45 degree angle version that we have here by the way that this is set up you'll see here that i'm actually able to do these really really cool transitions that we could normally do up and down before but now i can also do 45 degrees scrolling in this case we're using this as um in a full page uh example um i think nico you brought up a good point that like what this really helps to accomplish is sort of you may have a mental model that you're trying to get users to understand about how things are related to each other and being able to give people direct positions and locations can really be helpful for that too as well i think another great example where you could think of this is imagine if you had an entire map or maybe a process diagram or something like that and you wanted to actually zoom in on certain locations and be able to quickly navigate and move around it true you could do this with a lot of uh frames and a lot of smart animate and animate transition layers and things like that but here we're able to actually accomplish that pretty quickly with just um actually moving back and forth just using the scroll to interaction behavior very cool awesome so with that um i had a couple more questions for the team and then we'll we'll take uh some questions from from uh from the uh q a that has come in as well too um but nico we covered it a little bit around just sort of why and how we ended up with having two different behaviors for the nested um so so what i you know going back to our conversation around interaction types and and having uh both access to a topical frame and a nested collection how how why was this important to us why did we want to build this i think that we so when we first the way with the way we kind of like like build these features or kind of like how we go about them is that we bring them onto staging at some point once they kind of like feel feel more ready and staging is kind of like our internal environment which we also use just for for designing figma in figma on the staging version of figma it's like a little bit of a of an inception there and then we try out these features and kind of like send them around to the team send them to the designer advocates and in this particular example rogie another designer advocate was trying this out and what we've seen is that our initial assumption of people will want to it's okay for people to connect just to the first level children um like that that simplification will make it easier to understand we realized that that was actually something that broke a use case in which you are using inside a scrollable frame you're using an auto layout frame to organize the contents and at that moment every card you want to scroll to is a second euler child essentially and so we can't at that moment kind of like we realize okay this is this is not working we have to find it find a way around this but our initial goal still stood which was can we make this drop down menu not show every child of this frame because sometimes people have like super complicated frames with a lot of children and we just didn't want to have like a super endless long drop down menu and so that's why we decided on the separation where it's like if you see something you can drag the noodle to pick that object directly but we don't show this as an option to pick because that would mean we have to show all the other children as well and so with this basically kind of like going two different routes if you go through the drop down menu you get like a slightly of simplified view but if you use the on canvas interactions you get like a more powerful way of picking exactly which object you'd like um and yeah so we hope that makes this feature approachable for people who are generally using the mouse and uh going over the properties panel while still retaining the functionality to be able to scroll to kind of like like more like deeper level nested children yeah and and you can really feel it when you start actually using the the feature too that it's just it it feels really intuitive to be able to say oh yeah i want to select a nested item within that frame uh one quick sort of best practice just to throw out there for anyone who's trying to accomplish it let's say you wanted to actually scroll down your page uh and then scroll to a through a different so like scrolling down vertically and then scrolling across horizontally um you are going to want to still set those up as you might have with multiple frames so you'll do one for for getting down there or a separate interaction so so you can either have it all on one page and just have two separate uh scroll to containers which is which totally works if you were trying to bring both of those interactions together just do it as you were doing before where you would have it scroll uh you know you might have a separate frame that already has that destination sort of set up and you can interact between the two um using a delay or something like that there's some really good examples in the community um and we can uh tweet out a couple links after this too as well uh one last question that i just wanted to ask uh aaron uh kind of related to that um how did how do we actually pick the frame that should be scrolled to what's going on there yeah yeah uh so initially we were thinking well first uh in the beginning since um we can only pick objects that were that were direct children first level children of scrollable containers or the top level frame it was fairly easy to determine which one was the scrolling uh scrolling container it was its parent but now that we updated that to account for auto layout frames in a variety of other situations we came to this realization that well maybe an object could have multiple ancestors that are are scrollable so how do we know which one is the scrollable container is it uh you know maybe the auto layout frame that's uh that it's it's parent or is it the top level frame so we thought maybe we should uh have an option for designer to to select this is the scrollable container and this is the object it's scrolling to um but uh while that is a bit more flexible we realize when we're when the designer is dragging something on the canvas it just didn't feel right to have that separated so that was you know that was a trade-off that that was a bit tricky do we want to limit the possibilities of what a designer can do but we also want to make it as approachable as possible so right now when you select a particular object whatever and the first ancestor that is scrollable is the scrollable container so so yeah awesome very cool uh we had a couple great questions coming in uh from the chat so i just want to go to those real quick here seem to have lost my presentation so i'll just hop back to the thing here uh great so a couple uh quick questions that i saw coming through the through the q a and uh again thank you for everybody if you have any other questions feel free to ask them now uh this will we will be talking about this for a bit too as well so um uh uh you know afterwards on twitter and things like that so if more questions come up you can definitely uh you know just tweet at us happy to answer or talk through any of that as well so there's a question that came up in fact a couple people were asking very similar questions which was around um something like the example that i had there on that services menu let's go back and take a look at that and just realize that it's all in the same window there we go um something like the services menu right like you may want to show that the services item has actually been selected especially with something like an offset version where you're going to have the menu there pres always present you may want to show that type of interaction another uh similar to that question was like can we have um micro interactions that might work along with these uh niko any any context there on on how somebody might think about that as we're going forward or or ways to unlock that in the future yeah i think that's that's why we mentioned in the beginning that this is kind of like the start of on-screen interactions um whereas basically it's a very simple it's ultimately the feature right now is a simple first step you can move content around you can kind of like shift it into its position but what you still can't do and i think with like camera goes into micro interactions is how objects behave when other objects change so kind of like when this is scrolling and it reaches a certain point make this one sticky change this one or change the state of this object um and as i said earlier kind of like with in config we announced interactive components it's like another step it still won't get you there uh it's someone getting there there's a couple of more things we that we need to do for this um but kind of like the ability of like on screen to actions and controlling how things relate to each other it's definitely something on our mind awesome yeah i uh as soon as i started using this and and just sort of thinking about immediately my thought was oh interactive components get unlocked so much for me with some of this stuff um in fact that takes us to a kind of an important example to just sort of discuss real quick which is that uh because we are all on the same frame giving individual elements some sort of highlighted state right like so let's say if i i want to click to the third scroll over but i also want to highlight that this third button has been selected right so as we were just discussing um this will be unlocked uh with some cool features in the future if you need to accomplish this now you can certainly continue to use um you can you can still build this with multiple frames using um animate between layers or even just having different states so if i wanted to i could actually uh have several versions of this frame and sorry for the mac bug there um you'll see here that i could then have this one be in view and i could actually animate between the layers we have lots of other great resources on exactly how smart animate and smart animate between layers work so i'm not going to cover it right now but just know that those options are not mutually exclusive if you have something that's working today in that way and you're happy with it that's okay this is just another way that you can accomplish that kind of behavior as well so great um well i think we are uh getting pretty close to time thank you everybody for all of the great questions that we had um a couple other things again just to re-mention check out the community file if you have not it's pretty uh helpful as far as getting started and things like that um also the resources that we have in the help center are are going to be great for that kind of stuff uh we also have a uh another upcoming um uh live stream actually on wednesday so tomorrow um we're gonna do an in the file so i'll be walking through with um renee from linkedin and ash from github to talk a bit more about uh some of their methodologies and creative design performances and uh the design processes and things like that again all future live streams are available at figma.com events all past live streams can be accessed from there you can also get them straight from our youtube channel as well and if you have any ideas we are always looking to make this more exciting more inviting and engaging so definitely reach out to us at community figma.com uh or you can always tweet to us too as well i want to give a huge thank you to uh aaron and nico for joining us today it's always really fun to actually have the product team on here with us i'm hoping you guys will come back and join us in the future too as well sweet thanks thanks so much for having us well thanks everyone and uh have fun scrolling all the places you'll scroll i'm gonna stop now we didn't keep accounting

Channel: Figma

Views: 23,750

Rating: 4.8333335 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, tutorial, figma tutorial, design, user experience, animation, collaboration, prototyping, prototype, mobile design, フィグマ, デザイン, scroll, scroll to, anchor, anchor link, a tag, anchor tag

Id: WBVfHBThWz4

Length: 53min 57sec (3237 seconds)

Published: Fri Dec 18 2020