Adding custom maps to Figma is easier than ever with the TomTom Maps Generator plugin
Editorial team·Apr 05, 2024

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

Editorial team
TomTom Blog
Apr 05, 2024 · 2 min read
Add custom maps to Figma easily with new TomTom plugin | TomTom Newsroom

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.

TomTom Map Generator plugin for FigmaWith 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.

Images of custom styled maps in TomTom applicationsThe 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.

Map Maker customize and style

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

For more information on how to use the plugin, check out the TomTom Developer Resources.

Start using the plugin for yourself. Explore its Figma Community page.

People also read

A 3D image of New York in TomTom Orbis Maps.
product focus

See how TomTom Orbis Maps is ready for the future you want to build

For years, achieving the amount of detail in TomTom Orbis Maps was a distant dream. But now, it’s a reality.
Feb 07, 2024·1 mins read
chatgpt, llm, ai, language, chatbot, artificial intelligence
product focus

'Location-informed' could be the next frontier for generative AI

Want a better way to get from A to B? Just ask OpenAI’s ChatGPT. Thanks to TomTom’s first-of-its-kind large language model (LLM) plugin, ChatGPT Plus subscribers can now use the AI to plan trips, discover new places and explore their world. We sat down with two of the developers behind this pioneering piece of tech to get the inside scoop on how TomTom is bringing its unique geolocation smarts to the ultra-popular AI chatbot.
Aug 07, 2023·4 mins read
The world as data
behind the map

Fresh, scalable, flexible and futureproof — TomTom Orbis Maps is the new standard in mapmaking

Standards are everything in business. They’re the rules that help our world work efficiently and cooperatively. Without them, individual countries could have tens of time zones, plug-and-play computer hardware wouldn’t exist and all our phones would have different charging connectors. So, it’s surprising to learn that some industries still lack crucial standardization to make everything work well together and promote interoperability and innovation. The commercial mapmaking and location tech industry is one such industry.
Feb 07, 2024·6 mins read
Asking "What's the weather like at my destination?" to TomTom's new in-car AI voice assistant
product focus

Up for a chat with your car? Meet TomTom’s in-car AI assistant

Since rising in popularity in recent years, Generative AI (GenAI) has been transforming the way we live our lives. Not only has this technology enabled better results in industries such as healthcare and manufacturing, it’s also helping the automotive industry transform the driving experience. TomTom’s own team of experts has been actively exploring the capabilities of GenAI and large language models (LLM) in this space. TomTom, in partnership with Microsoft, has developed a fully integrated, AI-powered conversational automotive assistant that will allow drivers to talk to their cars in a way that hasn’t been done before. We sat down for a conversation with TomTom’s new in-car assistant, as well as its creators.
Jan 09, 2024·6 mins read
Never miss a story
Get the latest news from TomTom in your inbox.

* Required field. By submitting your contact details to TomTom, you agree that we can contact you about marketing offers, newsletters, or to invite you to webinars and events. We could further personalize the content that you receive via cookies. You can unsubscribe at any time by the link included in our emails. Review our privacy policy.