beginner
No code
Prototype apps with Mapbox in Framer X

The Mapbox component for Framer X allows designers to prototype location-aware products and apps, without needing to write any code. In this tutorial, you will learn how to use the Mapbox component to add a functional, data-rich map to a prototype in Framer X.

Screenshot showing a prototype in Framer X that uses a Mapbox map

Get started

There are a few resources you’ll need before you get started:

  • A Mapbox account and access token. Sign up for a Mapbox account at mapbox.com/signup. Your access tokens are on your Account page.
  • A Framer account. You need to have Framer X installed on your computer. You should also have some familiarity with how to use Framer X.

Create a new style

The Framer X Mapbox component gives you access to many different core and designer Mapbox map styles. But for this tutorial, you will create a new style using Cartogram, Mapbox’s drag-and-drop map style creation tool.

  1. Select an image to use as the basis for your map style.
  2. Drag your image into Cartogram and drop it in the lower left panel.
  3. To adjust the colors that Cartogram chooses, you can select Colorful, Light, Dark, or Custom. If you choose Custom, you can move the color pickers in order to specify which colors the style should use. Gif that shows how to select custom map style colors using Mapbox Cartogram
  4. Cartogram will automatically save your new style to your Mapbox account. Next, open Framer X.

Add the Mapbox component

This section assumes that you have a working knowledge of how to navigate and use Framer X. If you need help with Framer X, check out the Framer documentation site.

  1. In Framer X, click on the Store icon.
  2. Search for Mapbox in the search bar.
  3. Select the Mapbox component, then click Install.
  4. Once the Mapbox component has installed, click on the Tools icon.
  5. Click the Frame button (or press the F key) to add a new frame to your project. The example in this tutorial uses the Apple iPhone 8 Plus preset size. You can choose any preset frame size you like from the dropdown menus on the right side of the screen, or you can click and drag to create a freestyle frame.
  6. Click on the Components icon.
  7. Under the Mapbox heading, there is a grey box — this is the Mapbox component. Click and drag this box into the frame you just created.
  8. A new Mapbox map will populate inside the frame. You can resize and position the map within the frame.

Gif that shows how to add the Mapbox component to a Framer X prototype

Change the map style

The Mapbox component gives you access to many Mapbox styles by default. For this tutorial, though, you will use the custom map style that you created using Cartogram.

  1. In Framer X, click on the Map Style dropdown menu and select Custom.
  2. Navigate to your Mapbox Studio page and find the style you created earlier.
  3. New styles are private by default, but a style needs to be public in order to be used in Framer X. Click on the Menu button next to your style and select Make public. Screenshot showing the Make public option in a map style menu
  4. Once the style has been made public, click on the Share & use button next to your style.
  5. Click on the Use tab. Screenshot showing where to get the Mapbox access token and map style ID from the style Use menu
  6. Scroll down and click on the clipboard icon to copy your access token.
  7. In Framer X, paste your Mapbox access token in the Access Token field.
  8. Go back to Mapbox and click on the clipboard icon to copy your style URL.
  9. In Framer X, paste the style URL in the field below the Map Style dropdown menu.

Screenshot showing where to paste the Mapbox access token and map style ID in Framer X

The map in your Framer X prototype will update to use your custom style. Next, you will update your prototype to use a custom location.

Update the map location

The Mapbox component comes pre-loaded with a list of default locations for you to use in your prototypes. For this tutorial, though, you will use a custom location.

  1. Click the Custom tab next to the Location field.
  2. Use the Mapbox Search Playground to find your desired coordinates. Type your desired location into the search bar. The result will display on the map as a red dot. Click on the dot, and your location’s latitude and longitude will show up in the search bar. This tutorial uses Barcelona as its view, with the coordinates 2.176466902110292,41.38267342902182. The first number in this coordinate pair is the location’s longitude. The second number in the coordinate pair is the location’s latitude. Screenshot showing how to get coordinates from the Mapbox Search Playground
  3. Paste the latitude of your chosen location into the Latitude field. This is the second number in the coordinate pair you got from the Search Playground.
  4. Paste the longitude of your chosen location into the Longitude field. This is the first number in the coordinate pair you got from the Search Playground.
  5. Use the Zoom slider to adjust the zoom level. The zoom level for this tutorial is set to 11.

Screenshot showing where to paste latitude and longitude in Framer X

Finished product

Congratulations! You have created a prototype using the Mapbox component for Framer X.

Screenshot showing a prototype in Framer X that uses a Mapbox map

Next steps

For more information on how to create your own custom map styles, check out the Mapbox Studio Manual. You can also browse the Mapbox style gallery to get inspiration!

Want to stay in the loop about what’s coming next in the Mapbox component for Framer X? Sign up on our Framer X component page.