Using Maps in Figma

tldr; you can start playing with maps here Note; you need to add an OpenAI, Claude or LLMStudio key in the settings in the right top.

Making maps is a cross disciplinary craft where data, design and craft come together to make sense of the world around us. Maps are a very dense source of information but nevertheless understood by many users.

I built this tool that helps designers to use ‘real’ maps in their designs. This tool consists of two parts; one is a prompt based search engine (a bit like Google Maps) that converts a human readable prompt into overpass Query Language. This will lead to data shown on the map; that can be styled and combined with other data. This data can than be exported to Figma (or any other vector software) where it is grouped by query and organized neatly to edit it.

The Overpass system looks within OpenStreetMap for certain features. In the image below I searched for buildings and roads. The background contains a simple; light gray raster image of OpenStreetMap the green block and blue roads represent the search result from these queries. The buildings that contain a name tag will have a label on top of them with that name. In Figma they will than show up as editable vector graphics. In this example I highlighted buildings in the Umeå Art Campus with colour; while others can be made more in the background. This is great for organizing events where you want the audience to know where to go.

On the left you see the overpass AI interface; where the user just looked for ‘Street’ this is translated to a Query that looks for ways nodes and relationships with ‘highway’ which in OpenStreetMap terms means any kind of road, street or path. The LLM is pre-prompted to search more generic than specific since it is better to narrow down later than to not get any results. The buildings are still saved from a previous search and can be combined to export.

In the style tab you can download the SVG or directly copy it to the clipboard (this might become big with big areas). You can set what map background you want to have and what detail level you need 0 is the default detail level; so text is readable, but you can make it 3 times more detailed; which makes the text smaller and the resolution higher.

Below is another example where labels are more use extensively. By default the engine tries to render the label to the right hand side of the node. But when there is multiple nodes it might move it to the left hand side; when that also does not work it tries top and bottom. In this example you can see some flaws where it creates labels for the bus stop in both directions. This can than be fixed manually in Figma.

On the left the original in overpass-ai, on the right a cleaned up version where stations on oppisite sides are just having one label and the central station one is made bigger to indicate it is more important and reaches a bigger area.

You could also select and thus highlight certain routes or bus stops based on extra metadata that is contained in OpenStreetMap. If you want to show all bus stops that have a bench in a different colour; or highlight route 405 you can through the CSV Fields tab.

Below is an animated example from bike storage locations in Amsterdam; where you can quickly explore what types of tags there are and how and where they are used. This will help you understand how messy or structured the data is.

When hovering over the tags you can instantly see where they occur on the map, an image from the OpenStreetMap wiki showing what this tag could look like in reality. This is inspired by Bret Victors Explainable programming where we need to explain “what do these words mean?” especially tagging real world items with language can differ accros countries and cultures.

Here just some random maps to close of with; one thing to take into account is that the overpass-api is used for free currently. This means it will block when you send too many requests or if the payload is too big. Start with small areas and more specific prompts for experimentation. Happy mapping!

Ortslagen (city districts) in Berlin, level 10

Or you can use the vector data for making something physical (like lasercutting the buildings in this case). Left Pohlstraße in Berlin, right Roosevelt Island, New York.

Please note that this tool is still work in progress and might break at any point. It is mostly vibe coded and relies on localstorage (which your browser can delete at any point in time), slightly abusing the overpass-api and using LLMs to guess queries. There are other tools like qGIS (OpenSource) and ArcGIS (Paid) when you would need this more professionally.

[embed]