Advanced Figma prototyping

love story baby [Music] all right hi everyone i'm sharing my video now hi everyone is my name is nam so i'm trying to connect my airports for the best audio if you can't see me at any point in time just indicating the chats i'll be i'll be running both so i'll be presenting and also checking chat so if you have questions or if you have any feedback you can just um let me know in the if you can't see me as we can just mention i'll be checking that on my secondary screen and this session is about creating advanced figma transitions using the prototyping feature then also making use of smart animate to maybe create a little bit of magic that closely resembles um the the final transition of your design or um in case you are just trying to brainstorm some ideas with your colleagues or your engineers you know you can just quickly use that to illustrate how you want the pages to you know navigate from one page to the other so i'll be starting now sharing my screen right away okay all right so um i'm hoping everyone can see my screen all right so we only have 60 minutes and i want us to make the basics of that 60 minutes um so right there okay before we dive right in if you have um specific questions about feedback prototyping that you want us to to mention or that you that you like us to discuss just let me know i'm going to miss everyone real quick just to do a quick audio check and let me know if you if you guys can hear me please so can everyone hear me okay awesome all right thanks foreign thanks for the feedback okay all right so we'll get right in and no more bad music um so the first thing in the last three sessions we've add and foreign and our awesome um um and we've had really awesome speakers coming here talking about figma prototyping are now best to make use of it or just taking um some transitions and applying it to your designs now those use cases can be applied anyway but a quick and a quick look at how smart animate works because um from my understanding prototyping is mostly small cameras by smoke and mirrors i mean once you figure out what you are trying to illustrate or what you are trying to portray using illustration is much easier for you to act your way into it that means and where smart anime stops you can innovate further beyond that particular point so what we'll be looking at is how does smart animate work and this is a quick design which i did to further illustrate that um all the links are ready and connected so i'm going to try and and disconnect all but first let me play so you guys can see what's the and what happens you know or what the final transition look like with smart animate so here we have a bunch of colors and we want each of these colors to expand when we click on them and by then expanding one and the other colors to you know compress so what when one expands what i want contract and stuff like that so starting with the yellow screen you know and then you can see out and the the blue green and red screens kind of you know contrast and if you do the same thing with the blue the yellow con in contrast and then the blue expands sensing with green so you alternate and go back to yellow it costs you you know and expands or you can go to red you're all just expand so that's then there is a smart animate works and if you look at the layers here you see that smart animate so a smart animation text the layers and text the layers in a particular frame and compares it with the layers with the naming of the layers in the order frame then it subtracts the difference but that difference is what causes this um really nice beautiful animation that we see in this um screen that we are looking at is so if you come here and you look at the layers panel right here you will see the layers namely if you open the second and frame and you look at the layers you see that they're very much the same so while it is moving from this particular screen to this particular screen it tends to animate itself i'm going to remove all of the um links and just quickly link if you want okay so remove all connections that's a quick tip that i learnt last week um to previously i would have had to disconnect all of the one after the other so yeah um so to prototype that you take this particular front and link this particular model and you link it with this other screen then you set it to smart animate you can play around with the timers um if you want depending on how fast or how you want that transition to be and when you come here and you look at it you see so that's the way smart on the network now knowing how this works you can see that it's much um easier to apply this to whatever you're working on be it on a dashboard where you want to try and do some mock-up parallax scrolling or you want to do some mock-up um transition where when people are scrolling down a table or when people are when people click on a particular button you know you want something to come out and fly around just understanding that and having the questions to create the multiple frames that you want you can easily work that out so and without wasting much time i'm going to be moving in now i'm kind of timing myself because i need to make sure that i don't keep you guys waiting and this is the first transition that we'll be starting with this one has something to do with smart animate that is something that someone asked that how can they create um a character effect within a within a website without and people and without having to that's what's not their police struggling with but then they want to see how they can create a sliding effect you know a carousel and then still make it work within that um page so this is the coolest example that i found and which is abm big plus so there is this slider here um you just like that here that when you click on this it slides it slides and if you cannot use even on the real website you can notice that the sliding is not that smooth it's hands for a bit before it continues to the end so only if you guys can see that now another interesting thing about this particular sliding is there is a counter here that lets you know exactly where you are and how many more slides that you are so in this case there are about five different and counters and you know those being able to make this slide and then make the counters also move so that's the face that we are going to try and regret [Music] this is super tricky um what i did here is i i downloaded all of these pictures so i can create you know and and there's something similar to this so all of the images here and all downloaded and you can see that i mean yeah they're all downloaded and this is a screenshot as you can see it makes one it's a screenshot so it's faced in there now if we move this out you know that's that this is the screenshot right so if you turn this off you can see so i really want to walk you guys through this one and one step at a time then this we have the counter here at the bottom here so that's just this um all right i'm going to bring i'm going to bring this back to the frame um i need to make sure that this is actually where it was although this is not relatively if you're working with your own design okay perfect now the next thing is they have this they have this um these arrows that lets you know you know if you click on here it slides to the left if you click on that slideshow right so we are also going to try and make use of that now i've also created the individual slides for all of the sliding and pages i will be using then at the bottom here we have the the counter and we are going to try to create that um real quick so first i have to already length them this is what the problem looks like right now this is what it looks like right now um you have all of the pages then if you come here to the arrow and you click on that it slides and you can see the counter is also moving as well so while this is not you know as perfect as it would have been if you're using code you know to code this out but it's very close and you can pretty much pass whatever expressions are trying to convert to either people that you're working with or how you want this to be when it has been put in and then it still goes back you know to the other and to the beginning so um without wasting much time i'm going to remove all connections and then try to and link it again now first thing is i need to know because the the last this is the last slide and this last slide links right back to the beginning to the very to the beginning of this slide and since what you're going to be using and for this particular transition is um open overlay and swap overlay right so that means we still need to make sure that it swaps right back when you get to the end of this it swipes right back to this and to achieve that we have to create another slide full of this so that it becomes one loop of swapping slides and let's get started so come in here i i don't want to let you so you can click on the arrow because you know on this one the arrow works so all right okay maybe i'm just going to go with the arrow i'm going to name this to this easy peasy um on click yeah i want it to be on click then i want it to be open overlay and um so when you set to manual i think we already talked about this in the previous session when you set to manual it's kind of stairs fixed an example is if you have a box if you have a button if you have a button and maybe you say button or i use an auto layout to quickly create that and then you have another button okay and maybe this one needs to have a different color just to make sure that it fits what you're trying to do straight and i link these two buttons and then i want to open overlay when i select manual where i want to place this button on top of this other one when i select manual it takes this button and places it exactly on top of this one perfectly so and those are alternating you can see the difference between each of them and the one on top is slightly um slightly transparent so that's what happens here and selecting that i want this to be and close my clicking outside i always prefer that because sometimes some friends some from some of the and linked friends might actually when it has to do with overlaying so i'll just add close when clicking outside then animation i want this to move in so because it's sliding i want it to move in and to achieve that it needs to you know coming from the left sorry from the right to the left and that's what we have right here then peace out um i'm going to have to manually adjust this thing so that it fits right yeah now if we play that refresh if we play this you can see it slides in and then you can see like this and you can see the counter also moves but then you can't go because i will link that yes so let's link that and see what happens um now on this right there it will be me linking it not to this particular um not to this particular frame because then and this should be moving so i'll link it to the last to this last and slide which is like one so that's where it comes instead of moving in from this other side i wanted to move in from um from the left hand side so smart animate and if i smart animate this i'm not sure if it's going to and i messed up okay okay i'm supposed to add um one click not navigate swap with so let's try that again slide in all right so sliding yeah and the contact takes us right back to the beginning then um then and it's also animated by taking it back to the second slide again so instead of open overlay i'll i'll change it to swap with so then i still need to make okay keep this constantly moving from the right so let's see i really hope you guys are following me on this and so refresh slide slide slide okay perfect now just loads and and let's just laying the rest of this um this one right says it's going to be pretty smooth and from here down so this link is here changes to swap rates and this stays the same since it's moving from this way then our first link all the arrows that's making it from the right so this link with this and then change to swap width i don't want to replace this slide with this slide on top of this frame so that's where the swap response comes into play then um swap reads perfect so to select the arrow all right navigate swap rate then this same thing okay this is the last frame so i still want this to swap with this one which takes us back to the beginning of the frame so yeah all right and then we'll start linking and this particular arrows so this one after you take me to the last yeah so the last and then this particular arrow takes me back effect perfect swap it okay i need some sort of exactly the final one see this still wanted to swap with that okay so let's see what we have you've successfully linked all of this refresh okay i will length from this particular one so this one will definitely come to this particular slide which is last slide and instead of swapping we are going to use open overlay so i'm just going to move it you know from the left-hand side so refresh come back come from the left-hand side then if you want to go back okay so refresh that comes in from the left hand side and then this comes in from the right hand side as well then the contacts are also changing freelances for me to make the counter work this is what i did i i placed you know this counter here second that we have right here i place it you know simply and by pressing down alternate key i was able to drag it exactly to where we have this one right yeah now without this background um well this other one is going to be showing because that's you know this is a screenshot but say you have your own design you know like you might have to tweak that to that but i think my one that's the same color as this particular section of your website so that it will still stay on top of it so that's that's the complex like that okay all right so that's the complex like that and then the next thing that we are going to be working on is um this is a series of pages um so this this as much okay i don't know what that is going to be that day no deleting um so this is a dashboard and because of how it's possible to have as many as as many as you can you can have multiple and and interactions transitions within your figma file and it does what is perfected to illustrate that so that's why we went with this and we want to turn um and prototype the l out of this dashboard and make it look as realistic as possible first thing i'm going to do is the is the sidebar so you can see this side but there are some embedded sub menu within this sidebar and we want you know to swap this as much as possible then we also want people to be able to you know and interact with this if i want to add some micro interactions to this and graph right there so i'm just having this thing here when you move your console over this is supposed to um let me see if i name this i love you guys okay i'm going to add this like that and then there let's see if at least i want him to cover um okay perfect so if you're over on top of this you should be able to see you know um the um should be able to see more details about this particular graph and that's what we are going to be doing then we are also going to be playing with um and playing with the drop down and how to use you know how to prototype a date speaker a custom date speaker you know on the dashboard then there is the sidebar right here which are going to be prototyping you know to make you switch between different sidebars and the race on side bus what i play example is because i want to use this design system um so like the remote sidebar works is it allows you to browse the contents within the sidebar without leaving that particular page so if you are trying to prototype this in figma there is there are some ads to be done around this so you can still you know scroll through you know without leaving this particular page so that's what i'm going to try and play with um remember earlier when i said that prototyping is mostly um smokes and mirrors that means whatever you can visualize as the end transition you can always you know walk it out within your design um checking there any questions so far okay all right so still locations yes but i can't even do this right now um all right awesome so back to the design um the first thing i'm going to try and do is if and let's start with the sidebar so i did a little something to do with answers because that's what has mostly been on my mind lately um i'm just going to delete all of this and then i'm going to write in bo so we know when the pages are changing or when the pages are not changing so those games have and right there um have to delete that just right and what do we have here overview right so this is the overview right now you just have to show this this is the current and side the current state for this particular page in the sidebar and the next thing is the abstract analytics all right and drag this out and we make it go so you don't miss it i'm not going to do it 64. i'll pass for that correctly all right um then so this will be i'm going to copy this i have using all cuts for my and the next one is and we got it i'll just copy this select this paste it delete the rest then copy that rename sidebar and that's that then the next one is um evidence locker so yeah what's that in mind for everything was and the one place where you can go to see every video of start harassing people and that and that claiming doesn't exist then what this location does and less people organizing this to know um and where with this are currently happening around the world and news reports this has to do with everything related to news reports like cbn and news and all of that so this should make it easier for um for the people organizing this to have the one place with all of this information document taken um i'm going to space this out so you know when the pages are being all right so over here we have all of the sidebar with the individual and embedded sub menus so analytics sub menu one um then it only has one um evidence locker has about four stock menus embedded within that then and put this location as only one news reports only one phones are not dream all right then there is the bottom now but yeah that kind of look and shows as it dropped down instead he goes up on the right you can't call that drop off all right um so one way to go about this which is a non-reversible way is by making all of these components um i'm not sure if that's going to um all right because we have that time constraint and let's not go with um components because if we make a mistake we can't um reverse the component without deleting it and we don't really have that sensor um okay perfect so this is the overview i'm going to link all of these pages before putting them within this sidebar so if i click on this i'm going to prototype more if i click on hashtag analytics i want it to take me here and on click then i want it to um open overlay because i need to know when i'm swapping your friends and know when it's changing within the within the pages okay so first line then we got a copy going to give you um with this because i have one more that i would like to show i've got to do with that activities and and process locations then the news reports [Music] um so copy forms okay awesome then i'm still going to have this as well i've done this before i don't know why i'm having second thoughts in my mind um okay so this is the overview we are going to keep this particular page because of what we want to use this for the future so we want this to knew it i shouldn't have done that so we want this to come to hashtag no you want hashtag analytics to come to hashtag and we want this to you wanted to open overlay not centered you want it to be manual that means you need to stay on top of this particular frame you need it to also close when you click no you don't need to close then you have to align it first to the top then the next thing you want to do is by converting them to component it would have solved you know the stress of doing this manually then and you got it you want this to when you click on that to open overlay and display that particular page um awesome if it ends up dropping okay we'll still check before we continue um same with this one wanted to drop down because of that jordan that we have in there it doesn't work you just have to your movie okay so let's go now instance fun so that's how that thing there's only so much you can do with this um if you prototype me with the smart thing to understand about it is that it allows you to still you know convey whatever ideas real quick to the people that you are working we got with one click all right one wrong refresh okay so it drops down awesome okay you continue um so the next one is evidence locker um on click then open overlay manual instant animation this instant you just have to take this off go just locations and then then news reports there's no fonts on this particular one so forms same thing and click now we get to open overlay um i'm going to actually just also link this box and open overlay then set to manual and that's that then quickly align this to the top same thing with forms align this to the top so now we have now that we've done that then we can now guide them and convert the rest of these pages to complement so we can make create multiple components that's that fingers crossed um fingers crossed we haven't made a mistake that's what you think that person is from then we also want to be able to swap this um [Music] i don't really need this then with the hashtag analytics so what we've done so far is you know linking all of this oh it removes all of our move all of our um linking so you don't have to do it without that okay you don't really have time too much okay so we got it hasn't been linked yet that means whenever um i'm clicking on legal aid [Music] if you want this to where is it okay that's it right there we've copied that into hashtag analytics and when linking this swaps then people want people to also be able to navigate between each of these pages that means we probably have to create um individual pages and pages for each of them as well so people can see um just going to do link this one here another drop down and we can name that to top menu one now i'm opening overlay we want this stop menu or one to link here you still want people to be able to browse within that same page and follow the content let's make a copy should be linked to this particular one and it should still should be and swap with then process locations to swap with news reports to swap these so by swapping with it as zones all of the transitions that the other um overlay are going on so immediately right now then we can see it kind of allows you to drop down each of these pages let me link the rest of this and swap it and click swap it recently okay so let's name the rest of them real quick if you're swapping don't need to manually align anything um and also by doing overlay by doing overlaying it takes us back to this that's a single page it doesn't drop down then you got it takes us here and then it swaps with that evidence locker that means you have to do all of this manually and swap with protest locations swap rates so we're going to be swapping all of these with each other let me link this one back to this i still swap it with that then now there's there's something tricky which i do if i want currently you can't link um you can link an element within a figma frame to its model frame so for instance this it right here you can't link it you know within this i want this to be able to and and return to this particular or close so in this case um if you are trying to link a friend within a friend you take out that element and you maybe create it as a friend and then you you create a frame out of this frame selection and you got to prototype you can now link it within itself so that's one quick hack that you can always use to be linked within yourself it's of course in case this way you have like um like a home page and then you want the logo at the top left corner you know to be able to always refresh that page wherever people are even if you're on that page similar to the way and blue and normal websites were so we will now come to league out edge which is this page right here and put that there um sentence hashtag analytics where is it i've linked all of these i've linked all of this next we're going to be linking this one so i wanted to face swap before continuing to link the other page same thing here swap with [Music] now he's swapping because all of these have already been prototyped as and as overlays so that's where we have the swapping and action all right let's see what is what we've done so far refresh and overlay supposed to open that particular one um okay let me let me go to this overlay just to show what i was trying to say you need to make this a friend i'm going to name this to this and i'm going to take it back in so we have that download 100 now if you have the typing and we can't overlay and go to overlay we still reframe that particular page because we've linked it to so and behave that way um hashtag analytics it drops down then you can still select all of these um you've been able to achieve this effect right here where you can and navigate between different sidebars without it taking you to that particular page and what we mostly use for that is having lots of headers and so a lot of overlays like separate pages that just and opens us as an overlay and they're linking all of the different pages assuming we've converted these two components it will be much easier but then components are kind of irreversible that's why i didn't want us to know that way because you want to probably prototype a lot more with that um okay this hasn't been linked yet but so far you can pretty much and we've still stayed on this particular page then for this one right here you are going to be using um so let me check how many there any questions so far are there any questions so far oh okay so i'm trying to see the questions still checking this is it possible to and adapter your ass is it possible to animate a small frame and then insert the frame to server the frenchman and not all of the animated features present in the bigger cell like an animated component not really cutting yes and this is very much possible i think this is what i just talked about where if you are trying to and stand if you are doing you know um like a website and then you want to make the move the right and the top left corner to always return back to and return to that particular page you can take it out of the frame prototype it and it will always revert back to friend i mean that assassin okay all right okay so okay um how do you adjust text size by just dragging it and how did you use all of the connectors at once um okay so to answer to remove all of the connectors at once i'm going to come back here to this particular one that's before you downgrade um say i link you know a bunch of these okay so i've linked a bunch of anything we have a bunch of new bros i think i will face them as videos let's call it prototype names so i'm saying we've linked all of this and you want to remove your right click without selecting any elements on on your artboard you right click and you see remove all connections if you click on that it removes all of them you don't have to manually be on linking then one after the order so that's that um then audio i just take sides by just dragging it okay real straight um so to do to adjust text size i i press down shift that doesn't work so you come to the corner yeah sorry um you go to scale and then you drag to to adjust the text size but i don't think this is really advisable especially if you are doing some product design because then you get to have some and some decimals in here that you might that might not really be useful to what you're working on in the long run so that's something to watch out for then you know do ask apart from components being useful to easily change an asset across screens how is it how is the component which will be prototyping okay um all right all right all right all right um let me see where am i going to be using that um okay all right so this is one place so i'm going to be using that um so right here we have this table really data and that's our information in all of these and then we have this texas here now process could mean a lot of things so what i want to do is i want people to when people over on this and on this process i want um i wanted to display exactly some kind of some kind of information probably with a tooltip for them so um what i'm going to do now is i'm going to duplicates the heroes are all friends i can have a little bit of time okay so and the rules are all and friends then what i'm going to do is i'm going to create a suitcase in here so something like this and quick one i just since then what and then i'm going to make this form at the corner i'm going to insert a timely triangle in here i need to make this picture okay and that's absolutely i need to 0.5 okay and then you need to match this and flatten it so that's our two tip right there and i'm going to say something like um process what do you want it to be when it's being processed and okay um now let me just say painting i know working in a fintech has 20 way i just like it's either spending or is always successful processing is something i'm just going to make this 12. put that in there okay awesome i'm going to make this dark like super dark and make this white i want people to know i'm not gonna see this okay so you just call this card i'm going to stay there okay the first way is the frame and your one and this tag to find something i need to move all of them forward i'm going to move all of them forward go to okay take exactly what's inside the frame drag it inside the frame and then i'm going to delete all of these because i would have allowed it if the names were not unique now it's what i want to do right here i want um from how to disconnect this and then click there so force all force to take people to this page right here i can see the page there this sidebar shouldn't be moving this position was pulling okay um drive it in there this position make this board then now what are the existence for this one oh okay yeah f1 okay write the active states for that please pretty screen awesome okay so this is what i'm trying to achieve um [Music] i want when when i over on top of this when i over on top of this i want the chart to display so something like this go on go to prototype mode drag this down perfect so and mouse enter open overlay killing ghostbusters open overlay i want this to be my source to stay all right so you go back i don't know what you're refreshing because i think this so this is what you're talking about you know when you over it drops shiny pending now in this scenario where we are full of designs i need to delete all these objects i'm going to make this a component now linking the rest of this the actions still stays the same i don't realize this might not be the best use case for um all components of them prototyping is closed okay so open overlay mama all that stuff is fixed all right so if we now come here we can see okay so while converting this to a component it removes the connection that i did the first time all right come on one okay perfect so this this now when you are scrolling you can even choose to maybe give it some formal background to further make it interesting so see the design and we do this as a background okay there are no texts then this background tends to just come right so all right so that the background is not going to work um but unless you understand exactly what i'm trying to say with components once you have a component once you have this as a component once you have as a component and you link all of these to different pages whenever you copy this and link this is a play example if i let you first name this if you link all of this and you now duplicate let me just leave them randomly and you duplicate if you duplicate this it copies with the connection so say you have like a navbar or a menu and then you copy and then you created that as a component and and you now link it to different pages if you copy that now back to another page all of the connection that you've created stays so it's like a much faster way to prototype so i make that answer the question and [Music] okay so i will says um [Music] once you are true with the design in order to turn it to a responsive page what do you do next um so the the automatic way of converting and a web design to a responsive design doesn't really apply for much more complex web pages like like a web design um what is my work for some simple models like um one might work for some simple models that just involves you scaling it and then setting constraints to it and then dragging it you know or reducing the rates of the pages um in some pages he doesn't always want so you still have to manually now come and move elements around so that it fits within mp and this small release date of most mobile friends and that might end up being just as much work as you you know you're creating the mobile or making the your webpage responsive manually um i think we will try and fix something you know like a session that kind of covers that um i'll just get through with this i know you're almost out of time so the drop down this links to this and i'm going to drag all of these down okay all right so i want this page to want this to open and drop down this opens a drop down drop down here you can now come and select custom dates so that's what i want to do now um drop down so let's customize all right awesome so let's get started i'm going i'm first going to make this i like when the button kind of takes over and you all feel like it is on okay and um um select let's and the economy goes before then you name it then send it to the bug make it white and group it with that and then we have our custom head all right um so that's that then next thing i'm going to create the text field where you have to manually enter the custom date and i'm going i'm duplicating this button here i need this to be 16 i like using like using this first thing i like my experience um i'm going to have to ungroup this up to layout okay so this console button and group that was the s41 okay so what is this and this is one zero zero four is mainly sent to bob you did that align these okay so for white a stroke of one perfecting this inside okay this is inside all right then i'm going to come here make it regular um do start it awesome so this is our start date right all right so with this okay yeah group this and then rename me to start dates then duplicate that and rotate this so to update thanks horizontal and then end it okay so this is our this is our input fields now and then we are going to because we've already selected this from the customers i'm going to change this to custom desk listings it doesn't okay so let's manually align this down to four all right um now what we want people to do what we want to achieve now is we want this calendar we want this calendar you know to show people click on that so i'm going to link what we've done so far going to custom decks linking to this particular frame then we'll call this overview custom date all right and you want people to when they click on and then speaker this shows up yeah kind of tricky and on click then open overlay manual close one clicking outside they will not come in and i just stopped so now come here and adjust the um calendar awesome so let's see what you've done so far all right um refresh on your custom day this show stop then click on start date and then we have our calendar right here now this way you can still click and i think a normal date speaker allows you to pick a date and then when you click on the end date it kind of just highlights the selected data that you selected in between the start and the end date so what we are going to do next is um so that's that now we are going to duplicate this and say we want to today's date is 26 so we want this to start from monday which is 23 we are going to come in here um so when this opens you want people to select i need to make the old feel selectable i don't think it's selected right now then um alt select this okay then paste it below okay good make this white so i want people to when they select on this so we just call it selected there so when there and click on this you should swap with you know this other date with 20 dead i think i'll just copy this copy bring it in here first no okay all right um align this okay awesome and which color should we go with and i will just make this to be effective and use the mom become really bored and selected um swab so even the swap function here by using these don't navigate no swap all right so let's see what you've done so far start from the beginning custom date started you select right by just swapping and then by selecting this we also want this start date to change as well so you now come back duplicate link this to this okay now we get to that and then this will now change to and and because this particular has been selected it needs to be you know much more stronger than the second one so let's see how your dreams that has been selected already the end is what i'm going to be working on next so for the endless at the end that you select that you are going to need this to to work with and you need to have to remove the connections all right that's it so for this um it gets a little more tricky because i can just manually drag it i'm going to send this to the bottom of this layer within this group you get one and so sent to get back now i'm going to take these drag into today's dead so that didn't work um today i need to take this all the way to the bottom that means i need this to be behind these lines right here so um this probably copy the properties of that and paste it here and make all of this selected wants to do which blog pick blog and then um it's you it's you so okay so these are the selected types now and we want and we want this to appear such that when you over your console you can still make each of these cells each of these calendar cells you know to be um to show some form of state when you over on top of it or not depending on and how little you want to know this to be then but for now we just want this to highlight this for this as a selected date and i'm going to delete these click it then do search that we saw that this this has already been selected going over on top of these okay all right i'm wrapping this up now um so end it comes here on click open overlay set to manual then come here okay so real quick let us see what you've done so far then when you over and this needs to stay wide okay so that's white um so when you over it kind of shows you selected it from the start date right onto these days and then to just go back um sorry that spewed into some extra time um okay so um i guess that's what i'm going to you know wrap it up for today and we can probably do this again and then try to go into some other um prototyping tips i know for dashboard the prototyping and it's all that that works for dashboards and there are probably a lot more um they're probably a lot more um complicated because of the way that was a design and because of how much you need to show and those micro interactions within a particular dashboard and this might be telling details like and bad charts graphs i'm sorry i didn't get to show you know the graph chart i'll try maybe do and like a quick recording of others can be prototyped then share with everyone so thank you so much everyone for tuning in and it's been a pleasure all right thank you so much and if you ask questions you can always still ask me um on twitter or otherwise um there's also whatsapp as well so just let me know what you guys think or our best or whatever you think you want us to focus on for me on the next session thank you so much everyone have a nice day okay

Channel: Friends of Figma Lagos

Views: 257

Keywords:

Id: ej09zDqLOLk

Length: 69min 33sec (4173 seconds)

Published: Fri Nov 27 2020