Building Interactive Maps in Figma with Variable's

hard as I think it is my name is Matthew Sear and today we're going to be building a map inside of figma using figma's variable system we're also going to be able to zoom in and out and we'll be able to select between three different Maps well as being able to pan around our Maps so if something like this interests you then sit back relax and let's jump into the video all right here we are inside of figma so what I had done is I have got myself a map for Liverpool Melbourne and New York just grab those from Google just taking some screenshots so what I have also done is make sure that these are quite big so they're quite a large size I don't really mind exactly what size it is but they need to be relatively large so you can zoom in and out without having too much pixelation beyond that I will call them some names so we'll start by just saying that this will be my new York and this will be my Melbourne won and this will be Liverpool all right now I will create some of my local variables we need to have our Maps so we have basically a collection for them so let's [Music] get my collection for maps will be of course as we know I have a string I will have Liverpool I'm gonna have my New York one and my brother there we go and I'll also make sure that I keep the same names done that's my three Maps there's my three names almost there what I'll do is I'm going to clear a lot of this away don't need that don't need that but what I have created is a couple of little items just for some quick UI you can feel free to make your own UI elements but what I have is a little drop down field I have a plus and minus and they and I have my little drop down box so these are my items and this will be what I'm going to use so I have the maps but I will always have a singular map selected so in maps I have the list of maps but I will have for example map view which will be my map View in my map view I will have a selected map so I'll go to a text I'll say selected map and this I will go to this right click and go create alignment and I will pick one of my actual Maps what this does is basically defines which map will be selected [Music] I'll select my maps no turn them into components individual components all of my maps are now individual components I use the batch component and they're all called those names great I'm going to combine them together because they're all have those names they once combined together they will be called for example little Paul Melbourne and New York and I will call these my maps and I'll call the main component Maps on that [Music] let's call it so this is how we can combine fireworks drag out my map I can actually now over here combine and assign my selected map selected and as you say as soon as I did that it actually changed my map to Melbourne so let's for example change it to New York let's change it to Liverpool we'll change it back to Melbourne this is how we can actually select different types of states that we put onto our component so there's my map done awesome it changes that's fantastic let's actually make this change based on my selection from my drop down so I have my little drop down component what I will need to do is go I'll close that down go to open interactions I'm going to remove the existing interaction from it [Music] as long as you have of course buttons you need a couple of buttons give them some names we'll need to have a drop down so we will open this up by simply clicking on a drop down going to interactions we'll go to click and then in Click I am going to open an overlay and the overlay that I'll be opening I can select my drop down I'm going to make sure that this is manual and then I'm just going to drag it down there we go so if I press play I'll play in this I'll be able to do that dropped actually what we'll might need to do just grab this let's Chuck it in a frame for that drop it in that press play bam there we go get my drop down now inside my drop down I want to assign the items these basically it'll be the items that I click on I will assign them basically the variables that are inside of my collection I will select the first one where I have the text and I'm going to assign the text a variable and I've got to call the first one Melbourne I'm going to do the same for New York and same four the Liverpool One and now that I know those all that I'm going to do is when I click on this I want to close the drop down so what's going to happen is I'm going to go to prototype I go to interaction so drag up I can actually do close the overlay which is click and close the overlay but I can add other interactions here so I'm going to add that what I'll do is before I close the overlay I'm going to set and I'm going to set the selected map to and I can choose Melbourne and I'll grab that and drag it above my close overlay I'll click here and I'll do the same I will select this on click close overlay but before I close the overlay I'm going to set my selected map which will be now New York to New York and I'll drag that above and I'll close that down I'll grab this I will close overlay Press A Plus set the variable I will set it to Liverpool now and I'll drag that above so now it will set the map basically to those layers so let's go to design let's grab this map and open this Frame Up and I'm going to expand it out grabbing my map chucking it into here and let's make my map a little bit smaller because it is pretty big and now I can go to prototype like play that frame I can do the drop down and I can select New York and I can select Liverpool that one's not working all right sorry it's set the selected map to there we go this is why we test now I can select the Liverpool and I can go to New York I'll link it to Melbourne awesome good stuff now we have a drop down that does this now as you can see the text here does not change so to do that we will go to the drop down and we select the text inside the drop down and I am going to go to design and then set it to be the selected map so now that I change it it will say Liverpool and now I change it it will say Melbourne and New York so so that's how we can actually set up our drop down to switch between our Maps and now we can create some of that zooming in and zooming out functionality [Music] let's close that down I'm gonna grab this Frame over here let's get it adding why not to make it scroll around and pan around I actually need this map to be bigger than this container this view so I'm going to actually reset this view now it is much much bigger but as you can see it fills up my entire viewport and it doesn't work for me what I'll do is I'm going to go shift a making a frame I'm going to Center the content inside the auto layout frame remove the padding don't really need any of that but I will make sure it has clipping because it has clipping I can post it away to a smaller View I can for example give it some little bit of padding around there make it look a little bit nicer we can stick it up in the corner I'm not going to go too much with making it look pretty and light lining everything up perfectly I'm just going to put it in as it is I'll add a bit of a border to it and we'll set that to be outside there we go so I have the drop down we have this and I am ready to start my zooming but before I start the zooming let's just make sure that we can pan around so I'm going to call this I'll call this view I want to at some point just decided to flip yep I'm going to call my map The View so that this will be my view window and in my view window I will go to prototype I will go to my overflow and where overflow is I'm going to say both directions it means that when content inside the container overflows the container then I want you to move in both directions I could set it if I only want it to be vertical or horizontal there we go so I can press play and now I can scroll inside my container and I can now go and change to for example let's let's make sure that we have the variable so the variable needs to be set the set needs to be selected map and now I can change my map to New York and I can scroll around New York and I can change it to Liverpool and I can scroll around Liverpool there we go now currently I'm going to consider these Maps uh already completely and fully zoomed in so for me to be able to zoom out and then Zoom back in once again I will need to be able to control for this map sorry I'll need some variables so to do I will go to local variable and I'm going to need one for my minimum sorry my maximum view Zoom so the maximum Zoom the minimum Zoom and we're zooming them out so let's put those numbers together so we're going to go Max Zoom and then I will put another number this will be Min Zoom and then I will have my Zoom amount I'm gonna go grab my little Zoom buttons I will just drop those over there stick them out and I might just check them I might even Chuck them in oh no I'll just Chuck it oh I will just grab my frame I'll drag my frame down I'll Chuck them over there just underneath there we go all right there's my zoom and it's inside my frame all I need to do is basically tell them to do the zooming so what I'll start with is just to add some numbers in here so at the moment my map or my maps are over here I have these Maps basically at this size overall but my frame itself is a lot smaller obviously my minimum of my frame would be my height of this Frame you can do this in many different ways but what I'm going to do is I'm going to select my map inside my frame and I'm going to actually just make a basically a square so basically frame it again actually I'll need to frame my view so let's actually and I will frame them out I'll frame the map and we will call this Zoom for my map in underneath I will need to make sure that this will scale [Music] so now when I grab the zoom I can do this and what I will do is I'm actually going to make sure that this will be whatever size of my frame is so I'm going to actually just do this so it'll be a square so now I have a good complete Square and my minimum will be this size and actually this will be my maximum this is zoomed Max zoom in and then I will have a minimum Zoom so I want my minimum Zoom would be is right about there which is around 82 so I'm going to say my minimum Zoom will be this will of course apply to whatever map you have so just bear that in mind if you have bigger Maps obviously it's going to be bigger if you have smaller Maps it's going to be smaller so now that I've zoomed it into that small amount which is perfectly fine I'm going to leave it as that I will make sure it sits there and now it's just about basically the increment that you want to put in here so this will be the amount that I'm going to be clicking and then I'll be incrementing it up or down now you can use some maths and basically divide this basically into 100 so you would multiply it by 100 then divide and then you'll get like a percentage if you want but for this I'm just going to keep it simple I want the actual person to be able to let's say zoom in about five times so I can simply just open up my piece let's go to calculator [Music] we've gone grab our calculator like so I can uh grab that maximum amount which is the 270 by 40 and I can divide that let's say I want to let's say I have eight times there we go so a time zoom my value is 340 and now I can increment by 3 40. so what's going to take place is that I need to adjust the zoom frame by that amount so I will need to have a current Zoom so whoopsie we'll get rid of that and current Zoom will track the actual Map size Zoom it's a number and I'll say Zoom now I have my current Zoom my current Zoom I'm going to start at my minimum right down there right actually let's just start it and just set it to men actually now I yeah we'll leave it as sorry just detach we can now grab my frame my zoom frame and actually apply a variable so I'm going to apply the current Zoom both to the height and the width of this Frame [Music] and now when I click on my Plus I'm going to actually go into my prototype mode I'm going to go to interactions when I click on it I am going to set the current Zoom to the iron Zoom Plus I'm going to use the zoom and mount so that's for the adding to the zoom [Music] and then for subtracting I will click on it I will then go to set variable and I am going to go and set the current Zoom to the current Zoom minus the zoom amount [Music] so if I press play let's say just drag that down a little more so I can zoom in and I can zoom out now I'm extending beyond my maximum minimum because I have not set that up just of yet and I can select basically the different places which is great but I still haven't set the max admit but all of this works I can pan around I can zoom in zoom out switch between my maps when I switch between my maps it will jump to the and keep the same Zoom which is fantastic so let's create and make sure that we set our Maxim in so when I press my plus I'm not going to do this if it is more than my Max or it will be more so I'm going to say if the current [Music] basically if we gotta go current Zoom is basically less than because we're adding here is going to be less than the Max Zoom then we can do the set variable else we don't we'll go over here we click on here and if we could get plus and then we can go to our condition and we'll do the same thing but in Reverse so if the current Zoom is greater than our minimum Zoom not Max sorry Min Pin we will allow an increment so if I press play I can not zoom out anymore because I'm at my minimum and I can zoom in but eventually I can't zoom in any more because I'm at my maximum and that is how we can create a zooming in and zooming out panning around and switching between different Maps inside our design so I hope this has been helpful please let me know in the comment section below and until next time design thinkers keep thinking keep building and keep creating amazing things I'll see you all in the next video bye

Channel: Pixellink

Views: 1,741

Keywords:

Id: H-es3X16C70

Length: 25min 2sec (1502 seconds)

Published: Sun Aug 27 2023