Designing Google Maps interaction in Figma

hey guys what's up welcome back and in today's video we are going to design this a simple google map interaction using just figma so what are we waiting for let's get started [Music] so guys we are in figma right now and the first thing we need for a map is a big map so if you notice from the google map interaction is that you can move the map around in endless direction like you can move it up or down in any direction and the map moves endlessly uh to mimic that behavior we need a really big map obviously we cannot make it endless but we need a big enough so that we can begin a map so that we can just mimic that endless behavior the two ways of getting that map you can either get the map from a screen shot you can just go to google maps.com and then just quickly grab a screenshot and that screenshot desktop screenshot should be big enough for this purpose the second and much more better way of doing it is through a figma plugin called mapsicle uh just install the plugin from the community tab in figma and i'll show you how the plugin works so this plug-in is really versatile and it's free of cost so you should definitely try it out this is how the plugin looks like um you have position so basically you can scroll to any part of the world and basically get a screenshot of the map of it um you can zoom the map as well so if you want like a certain zoom level we should get we can do that from here you can set it to like 13 let's say 13 bucks for our case so we'll set it to 30 you can also set up the size of the map that you want so as i said we need a really really big map so what we'll do is we'll set it to something like 2000 and 2000 so this should be good enough for us to get a map now you also have a lot of styles available in mapsicle so you can basically select like streets you can select outdoors so basically it's a different look and feel of the map you want a dark map for a dark theme app so you can get that as well for now let's just stick to streams and you have some other features we will just leave it to default and we'll hit create map so as soon as we hit hit create map it just takes a little bit of time and gives you a really really giant image so if you see we have got a 2000 pixel versus 2000 pixel big map image here with us now what we want we want to drag this map into our artboard so if you see with our artboard i have already set up a small search icon search tab just a rectangle with a text and an icon now let's drag our big map into the screen yes so i have just dragged the map into on the iphone artboard that i already have and i just moved the search bar up so that's always stay on the top of the map if you see the map is hidden right now because the overflow is hidden right now because i have set the properties of the artboard to clip content if you remove clip content then you can see that the map is actually uh pretty big so what we'll do is centerline the map and we again do clip sub con uh clip content so that we don't see anything outside flowing of the artboard okay so now this looks like our map uh the map is actually bigger but that we are just not seeing the hidden one the overflow from the cardboard now what we want to do is uh we first need to group it so i'll add other things as well we want to also want to add pins on this map so this group will serve that purpose and we'll set the property of this group will change the probability of this group to frame now what frame does it gives you a bounding box and it helps you set alert another property in prototype which i just quickly showed you so if you don't know about how frame works i think you should definitely check out figma's documentation around frames so frame does nothing to the content inside basically it just sets the bounding box and you can change the bounding box dimension do not hamper anything inside that group and you can just set up anything the way you want so that only thing that is in the bounding box is visible and anything apart from the bounding box will not be visible so if you see we have set it to frame and our map is inside this frame one i will just call it map for now and if you see the bounding box is quite big so we need the bounding box to be same as the artboard uh our iphone artboard so what we'll do is the iphone artboard is four one four eight nine six we'll set the bounding box the same four one four eight nine six and we'll align it in the center yeah so uh we have aligned the map and we also need to align the map in the center because map is also moved up so yeah so now if you see um if we can show you this so map is in the center and this map frame that we have built contains this enlarged map and we do clip content and it will hide the overflow of the map okay so now that we have done this let's just quickly go to our prototyping tab and here you see overflow behavior so basically the bounding box that i was talking about now it's the figma is giving an option to set a behavior for that box so what we'll say we want to horizontally and vertically scroll the contents in that frame which is basically this giant map now if you just quickly hit prototyping play let's see how it looks like does it even work or not so yeah just give it a couple of minutes uh since the map is really big it takes some time to look yeah now if you see i am able to move the map in all directions right it's behaving the same way a google map works so um very simple just put a map in a big map in a frame and then set the frame properties to horizontal and vertical scrolling so i think we have done the first bit of it uh and we have 50 there now we also want pins on the map and clicking on those pins should show you the details of that location so let's quickly build that so what we'll do is uh we'll quickly select we'll hit our oval shape option and create a circle we will create a circle of 24 pixel bit with white fill and we also want a stroke to it without a stroke this and stroke width of four and outside yeah so now this will become our pin okay so this has become now this is our pin and we also want that this pin should move along with the map so i have clubbed them in the map frame that i have already built so if you see here um just show you the prototyping again so if you see the pin is there and you can move it as as you drag it stays in the position so that's what we want now let's set up a few more pins really really quickly okay guys so i have set up quite a few pins here other pins are not visible i'll quickly show you how it why it is how it looks like so if you see this is the big map we have and i have set pins even outside so that when you scroll in the map you also see the pins right let me just click content again so now you're only seeing three pins here okay let's quickly see the interaction so yeah the different pins stick together and it gives you this nice feeling of uh the map now what you want to add is we want that upon clicking on these pins we should also see the detail of these pins right we should see the detail of that location so to do that let's build that details page so i have really really quickly set up this small tooltip sort of a view where it's nothing it contains a background a rectangle where we gonna fill our image uh name of the location for example coffee roasters uh nearby the area and how much distance is there from your current location so it's a dummy uh pill that i have created and this will be invoked when we hit the small location circles okay uh let's quickly fill this with an image so we'll go to plugin uh click on unsplash and it will just open the unsplash one will search for coffee places so if you see unsplash gives you a really nice collection of coffee places um what i'll do is i'll just select and select maybe something like this let's copy yeah i'll select this image perfect so if you see uh with unsplash i just got this image and this tool tip is ready for us i have grouped everything together and called it location details now i also want to convert this into a component um so if you don't know what component is the thing i should leave with the documentation you can create a component and change properties of central component from sigma and you can create instance of those components where you can apply overrides and you can change properties around it so since we want like two three pins and all the pin the structure is going to be same just that image and the description is going to be different so uh what we're going to do is we're going to create pins along with it so we are just going to uh duplicate this and create instance of this component so you should definitely learn about components and the instances from figma documentation so now what we have done is we have our main component and we now have the instance we'll just quickly come and overwrite this so coffee roasters change to coffee writers [Music] [Music] okay you got it so we add this one image and we got first now let's duplicate it once more and we call it let's call it starbucks so we'll only simulate uh let's say three plugins okay just quickly change it to some other image maybe something like this okay great so now we have three pins with us one says coffee roasters one's a coffee riders and one's a starbucks structure-wise all these are all these three are same because they are the same component just that the other two are instances and we have changed the image overrides okay now what we want we want let's just bring them closer okay great so we have three pins visible here what we'll do is we'll first link when we click on this first pin we should see this first pop-up coming up right so i'll do we'll go to the prototype tab and we'll create interaction okay and we'll drag this to this now we want it on tap we don't want navigate to we want open overlay and i'll explain you in a bit how our layers work so hourly basically comes on top of the existing screens here it says center we don't want center we want manual so as soon as you do manual figma shows you a small overview of how the component gonna look like when you do manual and we want it just above our circle okay okay and we want the animation to be something like a dissolve so it's little bit smooth and ease out and yeah and we also want that when we click outside of this component the component should disappear again to the circle and we again when we click back to the circle it appears again so what we'll do is we'll select this option close when clicking outside okay so now let's quickly see if it works or not so here's our map if i click great it works right if you click anywhere outside it disappears and again also when you move it up or down let's say i moved it really down and i click it again it also maintains the scroll position so this is really nice uh we'll do the same thing for the three i'm going to speed this bit [Music] now let's quickly see how the interaction looks like for the three pins so here is our map if i click here i see the details i click here i see the details see here i see the details great so you can replicate this for all the other pins and now you can simulate the same experience so we are done with our tutorial uh like really really easy way with just one artboard and components we have created a map interaction in figma really easily what i have done is i have also added a splash screen to it so it becomes a really slightly more better touch to it so i've added small splash interaction uh i've not explained how i did this flash interaction in this video i'll do it in upcoming videos so do subscribe to my channel uh so that in future you can really get to know how to do those flash screens the idea going forward from here is that i'll do small small interaction in figma and in the end we're gonna build a really complex app when you know the basics of interactions in figma we try to exploit every other thing in figma and we use it only figure out no other software nothing else just sigma and we'll see how we can create a really high fidelity prototype in figma so guys this was the map interaction uh i'll link the video after this the interaction with splash screen uh do subscribe to my channel let me know if you liked it or not and yeah share it try it out and i'll see you in my next video bye [Music] you

Channel: Akash Yadav

Views: 15,152

Rating: 4.9649124 out of 5

Keywords: UI, UX, DESIGN, INTERACTION, ux design, User experience, figma, sketch, map, google map

Id: 8OfEgD2zQOg

Length: 15min 56sec (956 seconds)

Published: Tue Aug 25 2020