UI kit for Figma

What is it?

The Michelin UI Kit is a comprehensive tool for designers, facilitating quick and reliable design work while promoting collaboration through platforms like Figma.

It includes a range of components consistent with Michelin's standards and aesthetics.

This kit not only streamlines the design process but also helps in maintaining a consistent brand identity across various projects and departments.

Pre-requisite

Font package

Michelin :

Figma & Michelin UI Kit access

  • You need to have a Figma Licence to access to Michelin Workspace and benefit to access on the different UI Kit : Contact us and follow the rules details here

How to access to the UI KIT?

How to connect to the Michelin UI Kit?

Accessing the UI Kit: To effectively use the Michelin UI Kit in your design projects, follow these simple steps:

1/ Selecting the UI Kit from the menu:

  • In Figma, look at the left-hand column of your screen.

  • Click on “UI Kit” to access a range of asset libraries and detailed documentation. Here you will find all the resources necessary for your design project.

2/ Using the Michelin UI Kit components in design files:

  • When creating a new design file or opening an existing one, you can easily access the Michelin UI Kit components.

  • Simply go to the “Assets” tab, also located in the left-hand column. Here, the Michelin UI Kit components will be visible and ready for use.

3/ Contents of the libraries: The Michelin UI Kit includes several libraries tailored to different platforms and design needs:

  • Web Library: This library is optimized for web design projects. It includes components and layouts specifically designed for creating websites, ensuring they are responsive and visually aligned with the Michelin brand.

  • iOS Library: Designed for iOS app design, this library contains components and interfaces that comply with Apple's design guidelines, ensuring your designs are both aesthetically pleasing and functionally efficient.

  • Android Library: This library is intended for Android app design. It includes elements that adhere to Google's Material Design principles, ensuring compatibility and a smooth user experience on Android devices.

  • Custom Icons: In addition to standard components, the Michelin UI Kit offers a collection of custom icons. These unique icons to Michelin can be used to give a distinctive look to your designs, aligning them with the company's brand identity.

Which library I should use ?

Here you will find all the Design System libraries available into Design Michelin Group.  

Today, these libraries are accessible to defined populations, some of which are shared by all. 
These restricted access libraries can be shared for specific needs by making a request to the owner.

Some libraries are activated by default, for the others, we invite you to fill a request on our contact form.

Brand 

Lirary name 

Default setting 

Michelin 

HMI DS – Component Library 

 -

Michelin 

Iconography 

By Default 

Michelin 

Material Design Icons Library 

By Default 

Michelin 

Michelin Commercial 

 -

Michelin 

Michelin Corporate 

 -

Michelin 

Michelin Internal UI Kit 

 -

Michelin 

Power BI UI Kit 

By Default 

Michelin 

DS Microsoft Power Apps Michelin 

 -

Michelin 

Michelin Mobile 

 -

BF Goodrich 

BFG 

 -

Kleber 

Kleber 

 -

Watea 

Watea - Web UI Kit

 -

Uniroyal 

Uniroyal 

 -

Michelin Connected Fleet 

MCF – Mobile UI Kit 

 -

Michelin Connected Fleet 

MCF – Web UI Kit 

 -

 

Log in

Log in with Michelin ID

To connect to the Design System, I will need:

  • A Michelin ID (e.g. F012345)
  • Double authentification (with the NetIQ application or by SMS)
  • A password associated with your Michelin ID

I don’t have a Michelin ID and/or email

In order to connect to the Design System, I need:

  • A user ID or an email
  • A password

If you have never accessed the Design System, you can request access via this link.