Mapbox ❤️ Designers

As a visual designer, product designer, or interaction designer, how users experience every facet of your application matters.

The most engaging applications built with Mapbox are custom integrations of our customers' brand and experiences designed around our location platform. Whether you’re creating a custom map for your brand, designing multiple screens with map interactions, or building a location-based prototype — Mapbox provides the location pieces to make your designs shine.

If you’re ready to dive into map design, sign-up below to receive a FREE copy of The Guide to Map Design, our 128-page manual on creating custom map designs with Mapbox Studio.

Download guide

Product design

When designing apps with location, you often need to capture location in context. This can be a specific city, place of interest, or zoom level like street-level or nation-level detail. The Figma plugin, Mapsicle, allows you to do just that.

Mapbox Navigation design mockups

Mapbox Navigation design mocks in progress

Mapbox Navigation design mockups

Instead of taking a screenshot of a generic map and adding it to your project for placement only, add a custom map that matches your brand’s colors, typography, and style that demonstrate various views of this map based on the contextual of that screen.

With Mapsicle, you can move around the map interactively to find the perfect spot on your map or use search in the UI to find the exact location and add it directly to your design project in Figma.

Once you’ve placed a map in your designs, making changes is seamless. Just re-open your map in Mapsicle to adjust the location or style. Quickly iterate on different map styles, or save time by mocking up different steps in a user flow that involves different zoom levels. Need to design for a larger breakpoint and need more map? Extend the area of your map in one click.

Mapsicle Figma Mapbox plugin

Mapscile plug-in in Figma

Interactive design

Bring your prototypes to life with live maps and data in the Mapbox Framer X component. Drag and drop interactive map styles, add a working search box, upload custom markers, or just fly your map from location to location.

Framer X + Mapbox components allow you to:

  • Embed a fully interactive Mapbox map
    Choose a Mapbox core style, a Mapbox Designer style, or your own custom map style from Mapbox Studio. You set the location for your map and can even turn on a functioning search box to your prototype with a click.
  • Fly users to any location
    Around the world, zoom in and out of the map, or turn and tilt the map as much as your vision requires. Control animation by click or by setting autoplay.
  • Add custom locations
    Complete with pop-up content. Add a search box to search from only your custom data. Design a custom for your map.

The Guide to Map Design

Maps visualize our current location, the destination, and everything in between. The goal of your mapping app is to align your brand and experience with each user — so why use the default map style to tell your brand story?

Get your FREE digital copy

The Guide to Map Design is Mapbox’s 128-page guide that explores the best approaches to map design as a product design challenge, created alongside the product interface and navigation. Learn to create a custom map style to match your brand and delight your users.

Sign-up below to receive a copy of the Guide to Map Design in your email. You’ll also be able to stay up-to-date with the latest and greatest Mapbox design integrations and resources!

The Guide to Map Design