Automotive UI toolkit

Introduction

The TomTom Automotive UI Toolkit is a Figma file that contains all the core UI components and experience stacks used in our navigation applications. It helps clients explore how the navigation UI works and provides a starting point for theming it to match their brand and product needs. The toolkit comes with a companion Visual Assets file, which includes the icons, graphics, and signage used across both the map and UI.

Managing UI designs and visual assets

At TomTom, we design user interfaces in Figma and manage design tokens and styles with Token Studio. These tools work seamlessly together: Figma is used to create and organize designs, while Token Studio ensures that styles and tokens remain structured and easy to maintain.

The Visual Assets file serves as the single source of truth for all icons, graphics, and signage in the TomTom navigation application. ensuring a consistent and intuitive visual language across UI and map environments.

You can replace any visual element—icons, graphics, or signage—to suit their specific needs. By updating assets in this file, all necessary exports for both the map and UI can be generated. Once changes are published, the new assets can be previewed directly in the UI Toolkit.

By connecting design and code through these tools, we ensure visual and functional consistency. This approach also makes it easy to apply different themes, allowing designs to be adapted for multiple brands or products without starting from scratch.

Access design files and assets

The Automotive UI Toolkit also includes step-by-step guidance to help you set up your working file and start theming.