TomTom Maps Generator

About this plugin

Welcome to the official TomTom Maps Generator for Figma!

With the TomTom Maps Generator Plugin, you can easily integrate TomTom maps into your Figma designs.

From the TomTom styles gallery, you can choose a map style that best fits your style or you can customize a map to your specific requirements using the TomTom Map Maker and integrate it via this plugin into your Figma designs.

You’ll find a set of default map styles tailored for various use cases:

1. Street - Light: Ideal for browsing scenarios during the day or in light mode.
2. Street - Dark: Best suited for browsing scenarios at night or in dark mode.
3. Street Satellite: Use this aerial imagery map for browse or navigation use cases.
4. Street Driving - Light: Perfect for navigation during the day or in light mode.
5. Street Driving - Dark: Optimal for navigation at night or in dark mode.
6. Mono - Light: Great for showcasing data, such as heat-maps or clusters.
7. Mono - Dark: Optimised to show data on top of a dark monochromatic map.
8. Wireframe: The map style to use by interaction designers working on UX/UI concepts.

Each style allows you to enable additional information via layers, like traffic flow, traffic incidents, points of interest (POIs), but also the base layers like water and roads.

Need a unique map style? No problem! Visit the TomTom Map Maker tool to customize the look and feel of your map. Generate a style URL in the Share view, and seamlessly use the map in your Figma designs within this plugin.

How to use the plugin?

To use the plugin, select a shape, layer, or frame and run the TomTom Maps Generator plugin. Within the plugin interface, choose the location, camera view, map style, select the layers and click Generate map. The map is now visible in your designs.

The state of the map is saved to the shape, enabling you to update the map by selecting of the shape and rerunning the plugin.

Copyright attribution

You must attribute Open Street Map in derived work that features a visible map.

For more details, see the OSM license text. Specific examples can be found in the Attribution Guidelines.

© 2024 TomTom. All rights reserved.