Adopting Core Components

We have added new React components to the Audi CI to ensure a uniform appearance on the web. All existing React components can be found in the Audi React Library. Audi will continue to develop and add to this library.

Loaders inform the user of loading or computing processes being carried out by the system. The progress can either be displayed with specific details or communicated as undefined by means of a repeated animation.

The size of the loader components depends on the basic type size used, which can adapt to the viewport width in question. As such, the size of the components is flexible. They are available in a dark and a light version. In order to make the loading process the user’s focus, the background can be dimmed to 90 % black.

Spinners

The spinner is used when the system’s loading progress can be determined.

HTML
<div class="aui-spinner aui-js-spinner aui-spinner--progress"></div>

Continuous Spinners

Continuous spinners are used when the loading progress cannot be determined. They indicate to the user by means of a continuous movement that the system is processing the entry.

HTML
<div class="aui-spinner aui-js-spinner aui-spinner--continuous"></div>

Progress Bar

The progress bar is used in individual cases when the content and the definable loading progress of the system are to be displayed in a view at the same time.

HTML
<div class="aui-progress aui-js-progress"></div>

Continuous Progress Bar

The continuous progress bar is used in individual cases when the content and the indefinable loading progress of the system are to be displayed in a view at the same time.

HTML
<div class="aui-progress aui-js-progress aui-progress--continuous"></div>

Audi UI Kit – Integration into Sketch library

(supported until 30.06.2023)

To ensure designers are using the most up-to-date components and icons in their products, the Audi UI Kit was created as a sketch library. Integrate these UI Kits to get the latest Audi Sketch Libraries. Updates will be made regularly and users will be informed when new versions of the Librarys are available.

 

The current Audi Sketch UI kit will only be supported until June 30, 2023. In order to enable the development of digital products in the future, we provide and update UI libraries for Figma.

Audi UI Kit for Figma

To enable as many designers as possible to work with the Audi user interface components the UI Kit and icons is also offered for Figma. Updates are made regularly and all changes are documented for users in the changelog.

We strongly recommend to join the Audi Figma Workspace for being always up-to-date and to collaborate with others.The Audi Design Kits are already included into the Figma teams in the Audi Workspace. To get access to a team or project please reach out to us here.

In case you are not working directly in the Audi Figma workspace you find the latest version as download below.

Audi Figma UI-Kit and Icons
Figma Files for UI-Komponents, Icon Library and a Readme-file to get started and how to proceed with updating the files.
ZIP
34.4 MB

Examples

Don’ts

Don’t use the continuous progress bar to visualise the loading process of a video. The spinner is suitable for this purpose.
A loader should not appear arbitrary. The spinner is not suitable for visualising page loads, for example.
Don't place the loader against a red background.