If you're designing a web or mobile app that involves location-based services, adding map functionality to your Figma prototype is a must. Until recently, building prototypes with map functionality was a significant challenge for UX designers. Fortunately, today there are several easy ways to do so. In this blog post, we'll explore three different approaches to add map functionality to a Figma prototype. This includes using an image, using Figma plugins, and using advanced prototyping tools.
Adding Maps with an Image
The simplest way to mock map functionality in a Figma prototype is by adding a map image. This approach is not suitable for all cases, but can be useful for static designs that don't require interactivity or real-time data.
You can simply upload the map screenshot to your Figma project and add it to your prototype screens as a static element. That’s it.
Although it's the easiest approach, obviously it poses multiple limitations. Firstly, the map image won't include much interactivity like zooming or panning. Secondly, it won’t be possible to add data overlays to the map. Finally, using map markers will require slightly more effort if you’re designing them from scratch using vectors. Well, in the end it’s only a screenshot.
Using Figma Plugins
What we all love about Figma is that you're not restrained to its built-in functionalities. You can use various third-party plugins for a wide range of design, accessibility, prototyping and other needs.
So, if you want more than just a map screenshot in your prototype, for that purpose Figma offers several plugins, such as Mapsicle. FigMap or Map Maker.
Mapsicle
With Mapsicle, you can add map components to your Figma designs, customise the map style and add markers to the map.
Mapsicle integrates with Mapbox's API. First, you'll need to sign up with Mapbox and access a token that is required to start using the plugin. Don't worry, it's a really straightforward process.
Once all set, you can search for any location in the world. You can easily zoom in and zoom out, as well as tweak the styles of your map. For instance, like streets, outdoors or satellite views, and light or dark styles. Now add map markers, animate the prototype with Figma's built-in interaction functionality. Voilà, a scrollable interactive map prototype is ready!
FigMap
Similarly to Mapsicle, you get a map image via Mapbox. After choosing the location you need, you can alter map attributes such as latitude, longitude, zoom, bearing, and pitch. You can also choose from Mapbox's preset styles or your own personalised map style designed using Mapbox Studio. In addition, the plugin allows you to customise the dimensions of the image, including width, height, and retina readiness.
There are several options for the markers. You can use a default marker provided in the plugin or you can load a GPX file with markers. The other option is to add them manually linked to your existing Figma components.
Map Maker
This plugin integrates with Google Maps. For the rest, it is mostly identical to Mapsicle and FigMap in terms of functionality and easiness of use.
You can customise your map according to the location, zoom level, and map types, such as roadmap, satellite, hybrid and terrain. Map marker customisation is not possible within the plugin, but you can add a default one just in one click. In addition, it is possible to customise the style of the map by pasting your JSON using Google Maps API's Styling Wizard or Snazzy Maps.
However, although Map Maker is a really simple and cool plugin, some users reported experiencing technical problems when loading maps.
Using Advanced Prototyping Tools
The third approach to adding map functionality to your Figma prototype is to use an advanced prototyping tool. You typically turn to this method when building complex interactive prototypes that require live user input.
For example, you are testing a prototype which should display data markers on a map. Typically, the user is able to tailor these kinds of maps to their needs by filtering and searching data. When user testing such prototypes its essential to provide an experience which comes as close as possible to the final product (i.e. the prototype must feature an interactive map).
In order to integrate a map with live location into a prototype, there is no other option but coding... or using a no-code prototyping tool!
So, what platforms to use?
Weave.ly
Weave.ly is an advanced prototyping tool, which is also a plugin for Figma. This allows you to always stay inside the Figma environment, as your prototype will automatically update when your design in Figma changes.
One of the plugin's features is to add maps, markers and locations. Basically, with weave.ly any rectangle in Figma can be tagged with the map functionality. At the same time, any vector can be tagged with the custom map marker functionality.
By configuring blocks in the weave.ly editor, you can show the user's live location. Besides showing live locations you can also plot markers that showcase searchable dynamic data!
Check the video above to see how to create a map prototype with live user location in less than one minute!
Or you can also watch our tutorial on creating maps and showing locations in Figma.
Bravo
Bravo Studio is not exactly a prototyping tool. It is a no-code platform that mostly focuses on building production-ready apps. What's great about Bravo is its extensive integration with Figma, which is normally not typical for app-building tools.
Bravo's map with markers component enables apps to present a map containing a place or a list of places. Essentially, this component allows apps to display real locations on a map.
To create maps with live location using Bravo, you will need to use tags to add an interactive map in the design file. Then, specify the centre and zoom using latitude and longitude. You can also add markers by binding the map to a list of items with latitude, longitude and name properties. To enable live location, add the location tag and bind the latitude and longitude features to the user's location data.
You can read more detailed instructions in the Bravo Help Centre.
Conclusion
That's a wrap! Now you know 3 different ways to add map functionality to your prototype and have quite a few tools to choose from.
Whether you choose to use a plugin, add an image, or use an advanced prototyping tool, the most important thing is to make sure your map is easy to use and provides the functionality you need to properly conduct your user tests.
Go for the easiest option if you don't need to overdo it, but at the same time give your users the best functionality if you're building a proper high-fidelity prototype.
