Updates

Updates

Visit Page

Icon Library  v4.1.0

 

**ADDITIONS**

Added new icons

- air-filter-inside

- battery-12v

- car-insurance

- delivery

- extended-warranty

- keyboard

- package

- power-solar

- power-water

- power-wind

- raw-materials

- service-package

- shopping-basket-selected

- special-circumstances

- stock-market

 

**EDITS/FIXES**

Categorical changes

- changed icon component variant order

 

Visually changed icons

- brake-fluid

- dashboard

- facebook

- grab

- list

- lock

- lock-unlock

- off-canvas

 

Find the latest version (4.1.0) for downloaded, on GitHub and for Figma.

The updated documentation how to use these is coming soon.

Visit Page

Icon Library  v4.0.0

With the latest library update, new icon variants (active status, XS size) were added.
Find the latest version (4.0.0) for downloaded, on GitHub and for Figma.

The updated documentation how to use these is coming soon.

Visit Page

Figma Library v3.3

 

**ADDITIONS**

Tag

- Introduce selectable tag
- Add optional icons to readonly state

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Figma Library v3.1

 

**ADDITIONS**

Toggle

- Adding position label left

Offer Tag

- Introducing component

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Figma Library v2.9.1

 

**ADDITIONS**

Skeleton

- Introducing Product Tile

Product Tile

- Introducing component

 

**EDITS/FIXES**

Skeleton 

- Fixing height of forms elements

Layer

- Deleting cancel-x on alert variant

- Fixing cancel-x styling in themes

Loader

- Progress state can be set manually of the train wrapper via auto layout of the progress bar

Tab

- Decreasing content padding

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Figma Library v2.7.1

 

**ADDITIONS**

Skeleton
- Introducing component

 

**EDITS/FIXES**

Skeleton 
- Fixing variants

Layer
- Fixing order of elements

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Icon Figma Library  v3.18.0

 

**ADDITIONS**

Added New Icons

- sync-off

- eco-friendly

- rotate-device

- special-offer

- tire

- damper

 

**EDITS/FIXES**

Changed Icons

- connect-key

- changed visual appearance of „favorite“ icon to a heart shaped symbol

- changed naming of the star-icons to „rating“ (formerly named „favorite“)

 

**REMOVALS**

Removed Icons

-  

Visit Page

Figma Library v2.6

 

**ADDITIONS**

Badge

- Badge configuration adjustments

- Badge prop naming adjustments

- Badge gets optional label

- Alert badge is introduced

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Icon Library  v3.18.0

 

**ADDITIONS**

Added New Icons

- sync-off

- eco-friendly

- rotate-device

- special-offer

- tire

- damper

 

**EDITS/FIXES**

Changed Icons

- connect-key

- changed visual appearance of „favorite“ icon to a heart shaped symbol

- changed naming of the star-icons to „rating“ (formerly named „favorite“)

 

**REMOVALS**

Removed Icons

-  

Visit Page

Figma Library v2.5

 

**ADDITIONS**

Noticication

- Set up componenet

 

Layer

- Set up componenet

 

Shader Token

- Introducting shader token
- Implementing token in card and popover component

 

Button
- Elevated state for icon buttons

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Figma Library v2.4

 

**ADDITIONS**

Button

- Adding icon button

- Adding mobile button group view

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Icon Figma Library v3.17.0

 

**ADDITIONS**

Added New Icons

- maintenance

- diagnostics

- privacy-mode

- air-filter

- brake-fluid

- drive-belt

- first-aid

- spark-plug

- split

- tire-sealant

- tire-battery

- favorite-filled-50

- favorite-filled

 

 

**EDITS/FIXES**

Changed Icons

- mobilephone

Visit Page

Icon Sketch Library v3.17.0

 

**ADDITIONS**

Added New Icons

- maintenance

- diagnostics

- privacy-mode

- air-filter

- brake-fluid

- drive-belt

- first-aid

- spark-plug

- split

- tire-sealant

- tire-battery

- favorite-filled-50

- favorite-filled

 

 

**EDITS/FIXES**

Changed Icons

- mobilephone

Visit Page

Icon Library v3.17.0

 

**ADDITIONS**

Added New Icons

- maintenance

- diagnostics

- privacy-mode

- air-filter

- brake-fluid

- drive-belt

- first-aid

- spark-plug

- split

- tire-sealant

- tire-battery

- favorite-filled-50

- favorite-filled

 

 

**EDITS/FIXES**

Changed Icons

- mobilephone

Visit Page

Figma Library v2.3

 

**ADDITIONS**

Tokens

- Adding shadow token for modals e.g.

 

**EDITS/FIXES**

Accordion

- Fixing auto layout

 

Button

- Adding inline Button

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Icon Sketch Library v3.16.0

 

**ADDITIONS**

Added New Icons

- copy

- display

- eco-cycle

- energy-green

- factory

- flashlight

- handshake

- laptop

- microphone-on

- microphone-off

- network

- smartwatch

- smiley-happy

- smiley-neutral

- smiley-unhappy

- training

- video-call

 

**EDITS/FIXES**

Changed Category Naming

- simplified icon naming path

 

**REMOVALS**

Removed Icons

- arrow-narrow-down

- arrow-narrow-up

- oculus

Visit Page

Icon Figma Library v3.16.0

 

**ADDITIONS**

Added New Icons

- copy

- display

- eco-cycle

- energy-green

- factory

- flashlight

- handshake

- laptop

- microphone-on

- microphone-off

- network

- smartwatch

- smiley-happy

- smiley-neutral

- smiley-unhappy

- training

- video-call

 

**REMOVALS**

Removed Icons

- arrow-narrow-down

- arrow-narrow-up

- oculus

Visit Page

Icon Library v3.16.0

 

**ADDITIONS**

Added New Icons

- copy

- display

- eco-cycle

- energy-green

- factory

- flashlight

- handshake

- laptop

- microphone-on

- microphone-off

- network

- smartwatch

- smiley-happy

- smiley-neutral

- smiley-unhappy

- training

- video-call

 

**REMOVALS**

Removed Icons

- arrow-narrow-down

- arrow-narrow-up

- oculus

Visit Page

Bugfixing

The software now allows the use of the TVC ending for all formats again.

Visit Page

Icon Library v3.15.0

 

**ADDITIONS**

Added New Icons

- battery

- city

- collapsed-tabs

- compass

- country

- logout

- motorway

- options

- order-reverse

- over-the-air-car

- plan-route

- restaurant

- restroom

- send

- signal

- slider

- thumbs-down

- thumbs-up

 

 

**EDITS/FIXES**

Visually changed Icons

- catalogue

- co2-emission

- feature-on-demand

- geofence

- gift

- idea

- line

- parking

- social-reader

- work



Fixed artwork-size

- nfc-inactive

- recommended-destination

- pre-heating

 

 

**REMOVALS**

Removed Icon duplicates

- rss-feed (similar icon to "feed")

Visit Page

Icon Figma Library v3.15.0

 

**ADDITIONS**

Added New Icons

- battery

- city

- collapsed-tabs

- compass

- country

- logout

- motorway

- options

- order-reverse

- over-the-air-car

- plan-route

- restaurant

- restroom

- send

- signal

- slider

- thumbs-down

- thumbs-up

 

 

**EDITS/FIXES**

Visually changed Icons

- business-customer

- catalogue

- co2-emission

- feature-on-demand

- geofence

- gift

- idea

- line

- parking

- poi

- poi-calendar

- social-reader

- work



Fixed artwork-size

- nfc-inactive

- recommended-destination

- pre-heating

 

 

**REMOVALS**

Removed Icon duplicates

- rss-feed (similar icon to "feed")

Visit Page

Icon Sketch Library v3.15.0

 

**ADDITIONS**

Added New Icons

- battery

- city

- collapsed-tabs

- compass

- country

- logout

- motorway

- options

- order-reverse

- over-the-air-car

- plan-route

- restaurant

- restroom

- send

- signal

- slider

- thumbs-down

- thumbs-up

 

 

**EDITS/FIXES**

Visually changed Icons

- catalogue

- co2-emission

- feature-on-demand

- geofence

- gift

- idea

- line

- parking

- social-reader

- work



Fixed artwork-size

- nfc-inactive

- recommended-destination

- pre-heating

 

 

**REMOVALS**

Removed Icon duplicates

- rss-feed (similar icon to "feed")

Visit Page

Visual and textual updates have been made on the following pages:

  • UI Introduction
  • UX Paradigms
  • Functional Animation 
  • Transitions
  • Buttons
  • Card
  • Input Fields
  • Loader
  • Navigation
  • Notifications
  • Overlays
  • Pagination
  • Selection controls
  • Slider
  • Text Styles

Visit Page

Sketch Library v2.1

 

**EDITS/FIXES**

Accordion

- Adding badges/hints as optional element

 

Toggle

- Adding hints

 

Radiobutton

- fixing color tokens and resizing

 

Checkbox

- fixing color tokens and resizing

 

**ADDITIONS**


Extended Selection

- Setting up component

 

Page indicator

- Setting up component

 

Content Card

- Setting up component

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Figma Library v2.2

 

**EDITS/FIXES**

Accordion

- Adding badges/hints as optional element

 

Toggle

- Adding hints

- Fixing auto layout

 

Extended Selection

- Setting up component

 

Page indicator

- Setting up component

 

Content Card

- Setting up component

 

Styles and missing libraries

- Fixing library links

 

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Figma Library v2.1

 

**ADDITIONS**

Value with Unit

- Initial set-up

 

Table

- Initial set-up

 

 

**EDITS/FIXES**

Figma Update 10/05/22

- Updating Component Properties

 

Badges

- Adding status properties

 

Loaders

- Adding optional labels

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Icon Figma Library v3.14.1

 

**EDITS/FIXES**

Missing Icons

- caution

Visit Page

Icon Figma Library v3.14.0

 

**ADDITIONS**

- Upload (as content icon)

- Refresh/Reload

- History

- Wallbox

- Map Layer

- Brush

- Send

- Over the Air

- Plug ccs1

- Plug chademo dc

- Plug ccs dc

- Plug type1 ac

- Plug type2 ac

- Plug schuko

- Plug cee3

- Plug cee5

 

**EDITS/FIXES**

Added Missing Icons

- Oculus

Visit Page

Icon Sketch Library v3.14.0

 

**ADDITIONS**

- Upload (as content icon)

- Refresh/Reload

- History

- Wallbox

- Map Layer

- Brush

- Send

- Over the Air

- Plug ccs1

- Plug chademo dc

- Plug ccs dc

- Plug type1 ac

- Plug type2 ac

- Plug schuko

- Plug cee3

- Plug cee5

 

**EDITS/FIXES**

Added Missing Icons

- Commute

- Poi-on-Map

 

**REMOVALS**

Icon duplicates

- Removed icon duplicates:

connect-key (visual double), range/fuel-range (naming double, removed the „range“ one)

Visit Page

Icon Library v3.14.0

 

**ADDITIONS**

- Oculus

- Upload (as content icon)

- Refresh/Reload

- History

- Wallbox

- Map Layer

- Brush

- Send

- Over the Air

- Plug ccs1

- Plug chademo dc

- Plug ccs dc

- Plug type1 ac

- Plug type2 ac

- Plug schuko

- Plug cee3

- Plug cee5

Visit Page

Sketch Library v2.1

 

**ADDITIONS**

All components

- Overrides

 

Loader

- Optional labeling

 

Badges

- Signal states

 

Slider

- Optional hash marks

 

Tables

 

Value With Unit

 

**EDITS/FIXES**

Lists

- Smart layout multiple lines

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

There is now a guide for Audi implementations in social media.

The guide contains the following chapters:

 

  1. Introduction
  2. Facebook
  3. Instagram
  4. LinkedIn
  5. Twitter
  6. Youtube

Visit Page

The current UI kit and icon library that was previously provided for Sketch is now also available for Figma.

The Figma UI kit is initially provided in version 2.0, as is the current Sketch UI kit.

The Icon Library corresponds to the current Icon Library version 3.13.

Visit Page

Sketch Library v2.0

 

**REMOVALS**

Icons

- All icon symbol masters removed from UI Kit

 

Modals

- Web Starter Kit with oneLayer instead

Dropzones
 

Indicators
 

Native Dropdown
 

Button

- not developed states

Notification
 

Tooltips
 

Tag

- Labels

 

**EDITS/FIXES**

All components

- Update to new tokens

- Update to „Normal Wide“ Font

- Structure

 

Icons

- Removing the first level nesting in Icon library

 

Tags

- Fix auto layout

 

Color Styles

- Link of UI Kit to new UI styles library

 

Checkboxes / Radio Buttons

- Fix Auto layout

 

Accordion

- Add content area to open state

 

Colors

- Update signal + charing colors + interaction value + ui.primary/secondary/tertiary

 

Forms & option controls (toggle, select, input field, input area)

- Fix new tokens

 

Pagination

- Fix gaps

 

Tokens

- Dark theme base text value + interaction values

 

Lists

- Spacings

- Missing x on Popover bottom light theme

 

- Adding dark theme for external-link icon

 

**ADDITIONS**

New separate icon library

- Reattached all icon instances in UI Kit to new file "Audi_Icons.sketch"

 

Tokens

- Decision tokens

 

Badges

- Dark Theme

 

Avatar

 

Date picker

- Desktop year/month select

 

List

- multiple list items

 

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Extension of the POI icons with the badges to indicate the availability of charging stations.

Visit Page

There is now a guide for the implementation of touchpoints in Audi's three-dimensional space.

The guide contains the following chapters:

 

  1. Introduction
  2. Form
  3. Atmosphere
  4. Communication
  5. Cases

Visit Page

To improve the user experience, a guide on the use of light and dark themes was developed to enhance the visual brand appearance in the digital environment.

Visit Page

The Audi Signal and Charging Colours are adjusted and extended for light and dark theme.

Visit Page

Sketch Library v1.6



**REMOVALS**

Icons
- Charging states



**EDITS/FIXES**

Spacers

- Added transparency so overlap is visible

 

Signal Colors

- Light theme

 

Accordion

- Fixed a bug where the minimum height was set to 68px instead of 56px

 

Buttons

- Fixed a bug where stretched buttons with an icon wouldn’t center content

- Removed top and bottom padding in text buttons

 

Slider

- Fixed Slider bug where “min” and “max” labels didn’t scale with input value

- Fixed Slider bug where fill didn’t scale properly with width changes

 

 

**ADDITIONS**

Icons

- eye

- eye crossed

- light crossed

- whatsapp

- system-whatsapp

- external-link

 

Signal Colors

- Dark theme

 

Badges

 

Tags

- Input and Label variants

- Small and large sizing options

 

Layout System

- Page Margins

- Layout guidelines + examples

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Addition of a logo variant

The following variant was added:

  • Negative 1C (eps and pdf)

Visit Page

Updating the Audi Type Variable

  1. Reduction of the file size
  2. Subsets for Latin, Greek and Cyrillic added

Visit Page

New Icons:

  • external-link

 

The Audi Icon Library with all SVG files and the icon font are also available on GitHub.

Visit Page

New Icons:

  • eye
  • eye-crossed
  • lights-crossed
  • whatsapp
  • system-whatsapp

 

The Audi Icon Library with all SVG files and the icon font are also available on GitHub.

Visit Page

Sketch Library v1.5
 

**EDITS/FIXES**



Links


- Light theme idle underline color changed from Grey 30 (#b3b3b3) to Grey 60 (#666666) to meet contrast requirements.



 

Buttons


- Allowed for multiline entry on stretched buttons without an icon



 

Lists


- Fixed a bug where the list component wouldn’t allow a multiline entry

 


**ADDITIONS**



Divider



 

Datepicker


- Mobile and desktop view


- Single day selector


- Year selector

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Sketch Library v1.4.1 - includes edits from 1.2/1.3/1.4 releases



**REMOVALS**

 

Toast



**EDITS/FIXES**

 

Tabs

- Edge spacing changed to 1.5rem

- Font changed to Wide Normal for large size - *consistent with small size*

- Vertical height changed to match buttons

- Grey 50 changed to Grey 60 on "Default" state for accessibility

- Adjusted "Active" background color from Grey 10 to Grey 5 for light theme and Grey 80 to Grey 90 for dark theme.

 

Navigation Bar

- Font changed to Wide Normal for large size - consistent with small size

- Fixed minor spacing/positioning issues

- Adjusted sizing on “Scrollable Bar” to match tab heights

- Renamed to “Navigation Bar”

 

Toggle

- Complete redesign

 

Pagination

- Spacing adjustments

- Grey 50 changed to Grey 60 for accessibility

- Edited override settings for "Minimal" variant

 

Datepicker

- Complete redesign

 

Notifications

- Adapted proper shadow specifications based on elevation system

- Added outline to light theme to further distinguish container from its shadow

- Changed background color from Grey 80 to Grey 70 in dark theme

 

Icons

- Resize icons updated to current version

- Spacing issue with forward and back arrows updated

 

Radio/Checkbox

- Adjusted the spacing between items in groups from S (12px) to L (24px)

- Fixed symbol responsivity

 

Tooltips/Popovers

- Placed all non-center aligned carots to 12px from the edge to improve mobile usability

- Changed background color on dark theme from Grey 70 to Grey 80

 

Loaders

- Changed Signal Red to Progressive Red

- Changed track width from fixed 1px to a dynamic width always equal to spinner

 

Dropzones

- Aligned with CI

 

Toast

- Flipped styling for light and dark modes

- Changed Grey 70 background to Black



**REMOVALS**

 

Toggle

- Two options variant

 

Tags

 

Logos

- Audi Sport and e-tron logos

 

Cards

 

Modal w/ icon

 

Navigation Bar

- Removed shadow from “Scrollable Bar” arrow separator

 

**ADDITIONS**

 

Toggle

- Disabled states

 

Icons

- Discover card

 

Animation

- Bezier specifications for multiple platforms

 

Tabs

- Scrollable Bar

 

Loaders

- Monochrome variant and small size variant for both ”Continuous” and “Progress” spinners

 

Badges

- Additional colors and variants

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Figma Library v2.4

 

**ADDITIONS**

Button

- Adding icon button

- Adding mobile button group view

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Icon Figma Library v3.17.0

 

**ADDITIONS**

Added New Icons

- maintenance

- diagnostics

- privacy-mode

- air-filter

- brake-fluid

- drive-belt

- first-aid

- spark-plug

- split

- tire-sealant

- tire-battery

- favorite-filled-50

- favorite-filled

 

 

**EDITS/FIXES**

Changed Icons

- mobilephone

Visit Page

Icon Sketch Library v3.17.0

 

**ADDITIONS**

Added New Icons

- maintenance

- diagnostics

- privacy-mode

- air-filter

- brake-fluid

- drive-belt

- first-aid

- spark-plug

- split

- tire-sealant

- tire-battery

- favorite-filled-50

- favorite-filled

 

 

**EDITS/FIXES**

Changed Icons

- mobilephone

Visit Page

Icon Library v3.17.0

 

**ADDITIONS**

Added New Icons

- maintenance

- diagnostics

- privacy-mode

- air-filter

- brake-fluid

- drive-belt

- first-aid

- spark-plug

- split

- tire-sealant

- tire-battery

- favorite-filled-50

- favorite-filled

 

 

**EDITS/FIXES**

Changed Icons

- mobilephone

Visit Page

Figma Library v2.3

 

**ADDITIONS**

Tokens

- Adding shadow token for modals e.g.

 

**EDITS/FIXES**

Accordion

- Fixing auto layout

 

Button

- Adding inline Button

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Icon Sketch Library v3.16.0

 

**ADDITIONS**

Added New Icons

- copy

- display

- eco-cycle

- energy-green

- factory

- flashlight

- handshake

- laptop

- microphone-on

- microphone-off

- network

- smartwatch

- smiley-happy

- smiley-neutral

- smiley-unhappy

- training

- video-call

 

**EDITS/FIXES**

Changed Category Naming

- simplified icon naming path

 

**REMOVALS**

Removed Icons

- arrow-narrow-down

- arrow-narrow-up

- oculus

Visit Page

Icon Figma Library v3.16.0

 

**ADDITIONS**

Added New Icons

- copy

- display

- eco-cycle

- energy-green

- factory

- flashlight

- handshake

- laptop

- microphone-on

- microphone-off

- network

- smartwatch

- smiley-happy

- smiley-neutral

- smiley-unhappy

- training

- video-call

 

**REMOVALS**

Removed Icons

- arrow-narrow-down

- arrow-narrow-up

- oculus

Visit Page

Icon Library v3.16.0

 

**ADDITIONS**

Added New Icons

- copy

- display

- eco-cycle

- energy-green

- factory

- flashlight

- handshake

- laptop

- microphone-on

- microphone-off

- network

- smartwatch

- smiley-happy

- smiley-neutral

- smiley-unhappy

- training

- video-call

 

**REMOVALS**

Removed Icons

- arrow-narrow-down

- arrow-narrow-up

- oculus

Visit Page

Bugfixing

The software now allows the use of the TVC ending for all formats again.

Visit Page

Icon Library v3.15.0

 

**ADDITIONS**

Added New Icons

- battery

- city

- collapsed-tabs

- compass

- country

- logout

- motorway

- options

- order-reverse

- over-the-air-car

- plan-route

- restaurant

- restroom

- send

- signal

- slider

- thumbs-down

- thumbs-up

 

 

**EDITS/FIXES**

Visually changed Icons

- catalogue

- co2-emission

- feature-on-demand

- geofence

- gift

- idea

- line

- parking

- social-reader

- work



Fixed artwork-size

- nfc-inactive

- recommended-destination

- pre-heating

 

 

**REMOVALS**

Removed Icon duplicates

- rss-feed (similar icon to "feed")

Visit Page

Icon Figma Library v3.15.0

 

**ADDITIONS**

Added New Icons

- battery

- city

- collapsed-tabs

- compass

- country

- logout

- motorway

- options

- order-reverse

- over-the-air-car

- plan-route

- restaurant

- restroom

- send

- signal

- slider

- thumbs-down

- thumbs-up

 

 

**EDITS/FIXES**

Visually changed Icons

- business-customer

- catalogue

- co2-emission

- feature-on-demand

- geofence

- gift

- idea

- line

- parking

- poi

- poi-calendar

- social-reader

- work



Fixed artwork-size

- nfc-inactive

- recommended-destination

- pre-heating

 

 

**REMOVALS**

Removed Icon duplicates

- rss-feed (similar icon to "feed")

Visit Page

Icon Sketch Library v3.15.0

 

**ADDITIONS**

Added New Icons

- battery

- city

- collapsed-tabs

- compass

- country

- logout

- motorway

- options

- order-reverse

- over-the-air-car

- plan-route

- restaurant

- restroom

- send

- signal

- slider

- thumbs-down

- thumbs-up

 

 

**EDITS/FIXES**

Visually changed Icons

- catalogue

- co2-emission

- feature-on-demand

- geofence

- gift

- idea

- line

- parking

- social-reader

- work



Fixed artwork-size

- nfc-inactive

- recommended-destination

- pre-heating

 

 

**REMOVALS**

Removed Icon duplicates

- rss-feed (similar icon to "feed")

Visit Page

Visual and textual updates have been made on the following pages:

  • UI Introduction
  • UX Paradigms
  • Functional Animation 
  • Transitions
  • Buttons
  • Card
  • Input Fields
  • Loader
  • Navigation
  • Notifications
  • Overlays
  • Pagination
  • Selection controls
  • Slider
  • Text Styles

Visit Page

Sketch Library v2.1

 

**EDITS/FIXES**

Accordion

- Adding badges/hints as optional element

 

Toggle

- Adding hints

 

Radiobutton

- fixing color tokens and resizing

 

Checkbox

- fixing color tokens and resizing

 

**ADDITIONS**


Extended Selection

- Setting up component

 

Page indicator

- Setting up component

 

Content Card

- Setting up component

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Figma Library v2.2

 

**EDITS/FIXES**

Accordion

- Adding badges/hints as optional element

 

Toggle

- Adding hints

- Fixing auto layout

 

Extended Selection

- Setting up component

 

Page indicator

- Setting up component

 

Content Card

- Setting up component

 

Styles and missing libraries

- Fixing library links

 

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Figma Library v2.1

 

**ADDITIONS**

Value with Unit

- Initial set-up

 

Table

- Initial set-up

 

 

**EDITS/FIXES**

Figma Update 10/05/22

- Updating Component Properties

 

Badges

- Adding status properties

 

Loaders

- Adding optional labels

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Icon Figma Library v3.14.1

 

**EDITS/FIXES**

Missing Icons

- caution

Visit Page

Icon Figma Library v3.14.0

 

**ADDITIONS**

- Upload (as content icon)

- Refresh/Reload

- History

- Wallbox

- Map Layer

- Brush

- Send

- Over the Air

- Plug ccs1

- Plug chademo dc

- Plug ccs dc

- Plug type1 ac

- Plug type2 ac

- Plug schuko

- Plug cee3

- Plug cee5

 

**EDITS/FIXES**

Added Missing Icons

- Oculus

Visit Page

Icon Sketch Library v3.14.0

 

**ADDITIONS**

- Upload (as content icon)

- Refresh/Reload

- History

- Wallbox

- Map Layer

- Brush

- Send

- Over the Air

- Plug ccs1

- Plug chademo dc

- Plug ccs dc

- Plug type1 ac

- Plug type2 ac

- Plug schuko

- Plug cee3

- Plug cee5

 

**EDITS/FIXES**

Added Missing Icons

- Commute

- Poi-on-Map

 

**REMOVALS**

Icon duplicates

- Removed icon duplicates:

connect-key (visual double), range/fuel-range (naming double, removed the „range“ one)

Visit Page

Icon Library v3.14.0

 

**ADDITIONS**

- Oculus

- Upload (as content icon)

- Refresh/Reload

- History

- Wallbox

- Map Layer

- Brush

- Send

- Over the Air

- Plug ccs1

- Plug chademo dc

- Plug ccs dc

- Plug type1 ac

- Plug type2 ac

- Plug schuko

- Plug cee3

- Plug cee5

Visit Page

Sketch Library v2.1

 

**ADDITIONS**

All components

- Overrides

 

Loader

- Optional labeling

 

Badges

- Signal states

 

Slider

- Optional hash marks

 

Tables

 

Value With Unit

 

**EDITS/FIXES**

Lists

- Smart layout multiple lines

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

There is now a guide for Audi implementations in social media.

The guide contains the following chapters:

 

  1. Introduction
  2. Facebook
  3. Instagram
  4. LinkedIn
  5. Twitter
  6. Youtube

Visit Page

The current UI kit and icon library that was previously provided for Sketch is now also available for Figma.

The Figma UI kit is initially provided in version 2.0, as is the current Sketch UI kit.

The Icon Library corresponds to the current Icon Library version 3.13.

Visit Page

Sketch Library v2.0

 

**REMOVALS**

Icons

- All icon symbol masters removed from UI Kit

 

Modals

- Web Starter Kit with oneLayer instead

Dropzones
 

Indicators
 

Native Dropdown
 

Button

- not developed states

Notification
 

Tooltips
 

Tag

- Labels

 

**EDITS/FIXES**

All components

- Update to new tokens

- Update to „Normal Wide“ Font

- Structure

 

Icons

- Removing the first level nesting in Icon library

 

Tags

- Fix auto layout

 

Color Styles

- Link of UI Kit to new UI styles library

 

Checkboxes / Radio Buttons

- Fix Auto layout

 

Accordion

- Add content area to open state

 

Colors

- Update signal + charing colors + interaction value + ui.primary/secondary/tertiary

 

Forms & option controls (toggle, select, input field, input area)

- Fix new tokens

 

Pagination

- Fix gaps

 

Tokens

- Dark theme base text value + interaction values

 

Lists

- Spacings

- Missing x on Popover bottom light theme

 

- Adding dark theme for external-link icon

 

**ADDITIONS**

New separate icon library

- Reattached all icon instances in UI Kit to new file "Audi_Icons.sketch"

 

Tokens

- Decision tokens

 

Badges

- Dark Theme

 

Avatar

 

Date picker

- Desktop year/month select

 

List

- multiple list items

 

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Extension of the POI icons with the badges to indicate the availability of charging stations.

Visit Page

There is now a guide for the implementation of touchpoints in Audi's three-dimensional space.

The guide contains the following chapters:

 

  1. Introduction
  2. Form
  3. Atmosphere
  4. Communication
  5. Cases

Visit Page

To improve the user experience, a guide on the use of light and dark themes was developed to enhance the visual brand appearance in the digital environment.

Visit Page

The Audi Signal and Charging Colours are adjusted and extended for light and dark theme.

Visit Page

Sketch Library v1.6



**REMOVALS**

Icons
- Charging states



**EDITS/FIXES**

Spacers

- Added transparency so overlap is visible

 

Signal Colors

- Light theme

 

Accordion

- Fixed a bug where the minimum height was set to 68px instead of 56px

 

Buttons

- Fixed a bug where stretched buttons with an icon wouldn’t center content

- Removed top and bottom padding in text buttons

 

Slider

- Fixed Slider bug where “min” and “max” labels didn’t scale with input value

- Fixed Slider bug where fill didn’t scale properly with width changes

 

 

**ADDITIONS**

Icons

- eye

- eye crossed

- light crossed

- whatsapp

- system-whatsapp

- external-link

 

Signal Colors

- Dark theme

 

Badges

 

Tags

- Input and Label variants

- Small and large sizing options

 

Layout System

- Page Margins

- Layout guidelines + examples

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Addition of a logo variant

The following variant was added:

  • Negative 1C (eps and pdf)

Visit Page

Updating the Audi Type Variable

  1. Reduction of the file size
  2. Subsets for Latin, Greek and Cyrillic added

Visit Page

New Icons:

  • external-link

 

The Audi Icon Library with all SVG files and the icon font are also available on GitHub.

Visit Page

New Icons:

  • eye
  • eye-crossed
  • lights-crossed
  • whatsapp
  • system-whatsapp

 

The Audi Icon Library with all SVG files and the icon font are also available on GitHub.

Visit Page

Sketch Library v1.5
 

**EDITS/FIXES**



Links


- Light theme idle underline color changed from Grey 30 (#b3b3b3) to Grey 60 (#666666) to meet contrast requirements.



 

Buttons


- Allowed for multiline entry on stretched buttons without an icon



 

Lists


- Fixed a bug where the list component wouldn’t allow a multiline entry

 


**ADDITIONS**



Divider



 

Datepicker


- Mobile and desktop view


- Single day selector


- Year selector

 

Latest releases of the React components can be found in the Audi React Library.

Visit Page

Sketch Library v1.4.1 - includes edits from 1.2/1.3/1.4 releases



**REMOVALS**

 

Toast



**EDITS/FIXES**

 

Tabs

- Edge spacing changed to 1.5rem

- Font changed to Wide Normal for large size - *consistent with small size*

- Vertical height changed to match buttons

- Grey 50 changed to Grey 60 on "Default" state for accessibility

- Adjusted "Active" background color from Grey 10 to Grey 5 for light theme and Grey 80 to Grey 90 for dark theme.

 

Navigation Bar

- Font changed to Wide Normal for large size - consistent with small size

- Fixed minor spacing/positioning issues

- Adjusted sizing on “Scrollable Bar” to match tab heights

- Renamed to “Navigation Bar”

 

Toggle

- Complete redesign

 

Pagination

- Spacing adjustments

- Grey 50 changed to Grey 60 for accessibility

- Edited override settings for "Minimal" variant

 

Datepicker

- Complete redesign

 

Notifications

- Adapted proper shadow specifications based on elevation system

- Added outline to light theme to further distinguish container from its shadow

- Changed background color from Grey 80 to Grey 70 in dark theme

 

Icons

- Resize icons updated to current version

- Spacing issue with forward and back arrows updated

 

Radio/Checkbox

- Adjusted the spacing between items in groups from S (12px) to L (24px)

- Fixed symbol responsivity

 

Tooltips/Popovers

- Placed all non-center aligned carots to 12px from the edge to improve mobile usability

- Changed background color on dark theme from Grey 70 to Grey 80

 

Loaders

- Changed Signal Red to Progressive Red

- Changed track width from fixed 1px to a dynamic width always equal to spinner

 

Dropzones

- Aligned with CI

 

Toast

- Flipped styling for light and dark modes

- Changed Grey 70 background to Black



**REMOVALS**

 

Toggle

- Two options variant

 

Tags

 

Logos

- Audi Sport and e-tron logos

 

Cards

 

Modal w/ icon

 

Navigation Bar

- Removed shadow from “Scrollable Bar” arrow separator

 

**ADDITIONS**

 

Toggle

- Disabled states

 

Icons

- Discover card

 

Animation

- Bezier specifications for multiple platforms

 

Tabs

- Scrollable Bar

 

Loaders

- Monochrome variant and small size variant for both ”Continuous” and “Progress” spinners

 

Badges

- Additional colors and variants

 

Latest releases of the React components can be found in the Audi React Library.

Your CI-Support
May we help you?