Adding custom maps to Figma is easier than ever with the TomTom Maps Generator plugin

Figma is one of the most used and best loved tools for designers all over the world. And now, it’s adding another string to its bow with a dedicated maps plugin from TomTom.

The TomTom Maps Generator plugin for Figma debuted last week and is bringing app designers much greater flexibility and ease when integrating maps into their Figma designs and workflows.

At its core, the plugin allows designers on Figma to add up-to-date, customized or pre-styled maps to the wireframes on their Figma boards — a boon for any organization that builds map or location-based apps and needs to see how maps will appear and work in their products.

With just a URL, it’s possible to import custom map styles with a predefined zoom level and location into Figma designs and iterate product improvements faster, all in a no-code fashion.

With the TomTom Map Generator plugin for Figma designers can style maps however they want and import them easily to their Figma wireframes.

As a result, designers no longer have to use static images of maps to represent where they appear on their apps as part of their users’ journey. Now, designers can use accurate maps that represent their brand and show details important to their users. What’s more, when they update the map’s style it updates all instances of it in Figma, saving laborious coding or the manual copying and pasting of map images.

Off the shelf, the Maps Generator plugin comes with seven pre-made map styles for some of the most popular use cases and map applications. In the plugin you’ll find light and dark styles of basic street maps, useful for map browsing applications; a satellite image-based street map; light and dark map styles for driving use cases; and light and dark monochromatic style maps, which are great for data overlays.

Each of these styles easily allows users to overlay things like traffic information, points of interest and base level detail like water and roads, on to their map style in Figma.

The TomTom Maps Generator plugin for Figma lets designers add custom styled maps to their Fima wireframes and see exactly what their apps will look like.

For those that seek something more bespoke, it’s worth noting that the TomTom Maps Generator Figma plugin can work as an extension of another piece of TomTom tech that was demonstrated at CES2024 — TomTom Map Maker.

TomTom Map Maker is the go-to tool for customizing and styling TomTom-based maps. With it, users can style maps to their heart’s content, changing the colors of roads, water, land. They can customize and filter map features based on zoom level and choose what features are most important for their users to see.

For more on TomTom Map Maker, click here, or watch the video below.

The best bit, though, is that because Map Maker stores styles in the cloud, users can create a dedicated URL for their style and use it in the Figma plugin to show their brand’s map style in their Figma development designs. All without the need for lengthy coding or complex development work.

Important resources