Introducing maps.to.design - Bring real maps into your Figma designs

Our latest Figma plugin is the tool you’re missing for location-based design work!

maps.to.design is the easiest way to import maps into Figma. Drop in any location—cities, neighborhoods, custom routes—and the plugin places it in your Figma designs in seconds 🗺️ 

What is maps.to.design?

maps.to.design is our new Figma plugin that turns real-world locations into design-ready map components. Search for any place, customize the style to match your brand, and add a realistic map view to your Figma design.

You can customize the address, map type (including roadmap, 3D, light and dark), zoom level, whether to show a marker and whether to show the address.

This is the best way to avoid the tedious, screenshot-and-crop approach that designers have been putting up with for years. Whether you need a location card for a travel app, a store finder UI for a client presentation, or a route visualization for an onboarding flow, maps.to.design does it for you.

How does maps.to.design work?

Add real maps to your Figma designs, right where you need them! Here’s how:

Step 1: Run maps.to.design

Open any Figma file and launch maps.to.design from the plugins menu or quick actions.

Step 2: Search for your location

Type any address, city, landmark, or coordinates into the search bar. The plugin previews the map in real time so you always know exactly what you’re dropping onto the canvas.

Step 3: Customize your map

Adjust zoom level, map layers, markers, map type (including roadmap, 3D, light and dark) and pick the exact crop you want before exporting.

Step 4: Insert and iterate

Hit “Export to Figma”. The plugin places the map onto your canvas as an image or fills any frame you’ve selected.

Need to update the address, or change the zoom level after making your map? With your map selected, simply run maps.to.design again. The plugin saves all your customization to your layer, so you can change the style, update the location, or re-export at any size without ever leaving Figma.

💡 Bonus: Edit the pin marker content after importing your map into Figma!

Why use maps.to.design?

📍 Real maps, zero friction

No more switching between Google Maps, taking screenshots, and manually masking them into your mockups. maps.to.design brings the map to you, inside Figma, right where you’re working.

⚡ Speed up location-heavy projects

Real estate platforms, delivery apps, travel products, event pages—any project with a geographic component benefits from rapid map iteration. Drop in a city overview, zoom to a neighborhood, swap to a dark theme: all without leaving your canvas.

Start designing with real maps

maps.to.design is the easiest way to import real maps into Figma. Search for a location, edit the view, and watch it land on your canvas, ready to use.

Try it on your next project! maps.to.design is already available on Figma Community. If you work with other specialized formats, check out anything.to.design for our full suite of import tools that bring over 40 different file formats into Figma.