Web Design » Figma » How can I add Google map in Figma?

How can I add Google map in Figma?

Last updated on December 30, 2022 @ 2:50 pm

Adding Google Maps in Figma is as easy as adding a new map widget to your project.

In Figma, open the Resources section and select the “Plugins” tab.

In the Plugins tab, search for the “Mapsicle” plugin and click on the “Run” button beside it.

In the Mapsicle plugin’s window, you can adjust the Position, Size, Style, and Camera settings of your Map. Once done, just click on the “Create map” button.

NOTE: The Mapsicle plugin allows you to add a map that is as accurate and detailed as Google Maps.

The map will then be automatically added to your frame and you’re done!

NOTE: If you want to update the map, just run the Mapsicle plugin again, adjust your settings, and hit Update.

PRO TIP: Adding Google Maps or a similar one in Figma is not recommended as it can lead to decreased performance and potential data breaches.

You can also do a lot with the map you added just like in the usual map application. To zoom in or out on your map, use the mouse wheel or the +/- buttons on your keyboard, respectively. To rotate your map, use the mouse wheel or the +/- buttons on your keyboard, respectively. To pan your map, use the mouse to drag it. Lastly, to save your map, just go to Main Menu > File > Save a local copy.


Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.