Mapbox Figma MCP Server
現在のバージョン：v0.1.0
- Place real maps in your designs
- Show routes, areas, and points on them
- Build map apps in Figma Make
- Get map design guidance
The Mapbox connector puts real maps inside Figma. Instead of screenshotting a map and pasting it into a frame, you describe the map you want and it appears — the right place, the right zoom, the right style, at the size your frame needs.
It works anywhere the Figma agent does — Design, Make, FigJam, and Slides.
You do not need to be a developer to use it, and you do not need to know any of the tool names on this page. You describe what you want in the chat box, and the connector picks the right tools.
Behind the scenes it is a Model Context Protocol server — an open standard that lets AI tools connect to outside services. Figma talks to it at https://mcp-figma.mapbox.com/mcp.
Installation
Requirements:
- A Figma paid plan.
- A full seat to use the connector in any file. View, Dev, and Collab seats can use it in Drafts only.
- Edit access to the file you are working in.
- A Mapbox account. Signing up is free, and normal design and prototyping usage typically stays well within the free tier.
If Connectors is missing from the menu, an admin may have turned the feature off for your organization.
Add the connector
- Open a Figma Design or Figma Make file.
- In the chat box, select + (Add context), hover over Connectors, and select Manage.
- Find Mapbox in the list and select Connect.
- Sign in to Mapbox in the browser window that opens and approve the request.
- Select + again — Mapbox now appears under Connectors.
That is the whole setup. The connector is now available in every file.
Choose what it is allowed to do
To see what the connector is allowed to do, select + in the chat box, hover over Connectors, and choose Manage. Select Manage next to Mapbox.
Figma lists every tool the connector offers, split into Read tools and Write tools.
Read tools — 18 of the 19 — only look things up. They render maps, search for places, calculate routes, and return design advice. Nothing they do changes anything on your Mapbox account, so leaving them on Always run is safe and keeps the connector from interrupting you.
Write tool — there is exactly one, manage_style_tool. It creates, changes, and deletes map styles on your Mapbox account. Figma keeps write tools off by default. Turn it on only if you want Figma to save styles to your account; everything else on this page works without it.
Each tool has three settings: always run, ask first, or never run. If you want to save styles but stay in control, set manage_style_tool to ask first.
Tools
The connector selects the tools it needs on its own. The list below documents the full set.
There are 19 tools: 18 read tools and 1 write tool.
Putting maps on the page
| Tool | What it does |
|---|---|
static_map_tool | Renders a map as an image — any place, zoom, style, time-of-day lighting, tilt, and rotation. This is the one behind most "show me a map of…" requests. |
static_overlay_tool | Renders a map and works out where each route, pin, or area sits on it, returning those positions separately instead of drawing them into the image. |
preview_style_tool | Gives you a link that opens a style as a live, pannable map in the browser, for checking a design in motion. |
Finding places and working out routes
| Tool | What it does |
|---|---|
geocode_tool | Turns an address or place name into a location on the map, and back again. |
category_search_tool | Finds a handful of specific named places near a point — "the best coffee downtown". Returns a sample, not everything. |
directions_tool | Works out the route between two or more stops, and returns its exact shape so it can be drawn. |
isochrone_tool | Draws the area you can reach within a given travel time — the "15 minutes from here" shape. |
matrix_tool | Works out travel times and distances between many points at once, for comparing options. Up to 25 locations. |
Working with your Mapbox account
| Tool | What it does |
|---|---|
manage_style_tool | Lists, opens, saves, and deletes map styles on your account. This is the write tool, off by default. Edits merge into a style, so layers you did not mention are kept. |
get_public_token_tool | Fetches the public access token that generated map code needs in order to display a map, so apps built in Figma Make work without you pasting anything in. |
Map design guidance
These draw on Mapbox's cartographic guidance and never touch your account:
| Tool | What it does |
|---|---|
get_design_guidance_tool | Explains how to design a map for a purpose — a driver's map, a property search, a data visualization — and what to avoid. |
segment_preset_tool | Hands over ready-made settings for a use case, so a real-estate map or a night-time car map starts from sensible defaults. |
map_palette_suggest_tool | Suggests map colors that stay legible, checks them for contrast, and keeps your brand color where it belongs instead of on the roads. |
design_audit_tool | Reviews a finished map for the things that go wrong most often: unreadable labels, routes hidden under other layers, brand color everywhere, dark-mode roads. Scores it and says how to fix it. |
For maps that become code
Mostly used in Figma Make, where the output is a working application:
| Tool | What it does |
|---|---|
get_dev_patterns_tool | Supplies the working patterns for building a Mapbox map in code, including the usual reasons a map comes out blank. |
get_reference_tool | Looks up how a particular map style setting works, with an example. |
validate_expression_tool | Checks a styling rule for mistakes before it is used, and explains what is wrong. |
tileset_layer_tool | Used when you ask for all of something — every building, all the roads, all the parks. Returns a layer that draws every single one, at any zoom. |
osm_query_tool | Reaches beyond Mapbox data for things it does not track — benches, drinking fountains, bike racks — by preparing an OpenStreetMap query. OpenStreetMap data requires attribution when you publish. |
Use the connector
Type @ in the chat box and pick Mapbox, or just describe what you want — Figma usually picks the connector on its own. Before it calls a tool, Figma shows you which one it is about to run, so you can approve it.
In Figma Design, ask for a map and it lands in your frame. Ask for a route, an area, or a set of pins, and they come back positioned on top of it:
@Mapbox a map of central Copenhagen, dark theme@Mapbox add the driving route from the airport to Nyhavn@Mapbox show everywhere within a 15-minute walk of Nyhavn
In Figma Make, describe an app and it builds a working one with live data:
@Mapbox build a store locator for our 12 Berlin stores@Mapbox an apartment search map for Lisbon, filtered by price
You can also ask for design help directly:
@Mapbox what colors work for a night-time driving map?@Mapbox check this style — are the labels readable?