The navigation application is designed with customization in mind. TomTom offers powerful tools to tailor both the map and user interface to your brand. Through UI theming, you control visual properties such as colors, typography, shape, and iconography.

For more information, watch the Introduction to theming video:

Process overview

The theming workflow consists of four stages:

1. Create your custom map style — Define your custome map style theme by using the map customisation tool, TomTom Map Maker
2. Update the UI theme in Figma — Define your theme by adjusting token values in the UI Toolkit using Token Studio
3. Create RRO with new resources — Run the script to generate a Runtime Resource Overlay for your application
4. Verify RRO on hardware or emulator — Test your theme on target hardware or an emulator to ensure everything displays correctly

Note: the RRO script is currently in private review and can be shared on request.

Tools and resources

The theming workflow relies on the a couple of tools and resources.

To create a custom map theme, use:

• TomTom Map Maker - An online tool for easily creating your custom map style. Learn more
• TomTom Map Generator plugin - A Figma plugin that brings your new map style into the Automotive UI toolkit Learn more

To create a custom UI theme, use:

• Figma — The design platform where you create and preview your theme
  • Automotive UI Toolkit — A Figma file containing the complete design system with design token integration
  • Token Studio — A Figma plugin for managing and exporting design tokens
  • Visual Assets — A Figma file containing icons and other graphical assets for export
• RRO script — A build tool that transforms your exported theme files into a Runtime Resource Overlay, currently in private preview