Design Integrations
Mapbox is a platform for developers by developers. Designers are crucial partners in delivering the brand promise of custom location experiences.
Design Integrations were created to meet designers where they are—inside of today’s most popular design tools. Unlocking live location directly inside the modern designer’s workflow.
![]()
Design Integrations were created to meet designers where they are—inside of today’s most popular design tools. Unlocking live location directly inside the modern designer’s workflow.
Vacay Finder app prototype built with Framer X + MapboxTHE CHALLENGE
Custom location experiences distinguish brands and delight users for Mapbox’s top customer apps. But the tech ramp-up required to get quick “design wins” blocks many teams from leveraging the full Mapbox promise in the early stages of app design and ideation.
While our core tool Mapbox Studio is powerful for map design, many designers use standard design tools to invision full mobile and web app designs. Designers are rarely creating solo custom map styles; but designing harmony across app UIs and interactions alongside location. We needed to bridge these offerings in a frictionless way.
While our core tool Mapbox Studio is powerful for map design, many designers use standard design tools to invision full mobile and web app designs. Designers are rarely creating solo custom map styles; but designing harmony across app UIs and interactions alongside location. We needed to bridge these offerings in a frictionless way.
MY ROLE
I drove this initative from end to end. Collaborating with internal engineers, solution architects, marketing ops, documentation, and analytics, and worked with cross-company growth and marketing teams, and managed external engineering teams.
I now manage internal and external designers across product design and prototype work as we maintain and scale our offerings.
I now manage internal and external designers across product design and prototype work as we maintain and scale our offerings.
FRAMER X COMPONENT
The first design tool integration was with Framer X, interaction design prototyping toool. Framer X is built on React.js, as is Mapbox Studio. This as a started integration align with our audience perfectly as Framer aims to bring live data into the design production process.
Four months after launching the Framer X + Mapbox MVP, lead the update which expanded the Mapbox offering to:
Add a Mapbox map (with search)
Lets users embed any Mapbox map style into their Framer project, set the location, and add a functional search box with autocomplete and the choice of six search lanuages.
Animate a Mapbox map
Lets users move the camera to custom locations around the world. They can zoom, twist and tilt the map, while controlling the speed and duration with progression by click or autoplay.
Add points to your Mapbox map
Lets users upload custom locations directly in Framer X, set marker designs, and popup content. Search boxes strictly search uploaded data; allowing users to show or reveal data as needed.
Four months after launching the Framer X + Mapbox MVP, lead the update which expanded the Mapbox offering to:
Add a Mapbox map (with search)
Lets users embed any Mapbox map style into their Framer project, set the location, and add a functional search box with autocomplete and the choice of six search lanuages.
Animate a Mapbox map
Lets users move the camera to custom locations around the world. They can zoom, twist and tilt the map, while controlling the speed and duration with progression by click or autoplay.
Add points to your Mapbox map
Lets users upload custom locations directly in Framer X, set marker designs, and popup content. Search boxes strictly search uploaded data; allowing users to show or reveal data as needed.
FRAMER X: IMPACT
This update to the MVP grew engagment 3X for general usage and 4X for users that activated Mapbox access tokens into the Framer X projects. A deeper dive into the full product design process process available upon request.
Framer X + Mapbox components screens unlocking live location in power prototype design
FIGMA PLUG-IN
We recently Integrated the Mapbox platform into popular, in-browser design tool, Figma. This project was a direct collaboration with an external designer. The inital growth seen with this tool has proven the continued impact of these types of integrations.
We are also developing a more collaborative relationships with the builders and other companies in this space. Scaling external partners to continue our growth an impact in the design community.
We are also developing a more collaborative relationships with the builders and other companies in this space. Scaling external partners to continue our growth an impact in the design community.
Figma + Mapbox plug-in created by Product Designer, Chris Arvin.