The Design Tokens Book
Analyser le système

Nommer les tokens

Commencer à expérimenter : Créer vos premiers tokens de références

Couleurs

Plugins et outils d’organisation des palettes de couleurs.

www.figma.com
www.figma.com favicon https://www.figma.com/community/plugin/1024452006068794933/Foundation%3A-Color-Generator
www.figma.com
www.figma.com favicon https://www.figma.com/community/plugin/1103648664059257410/Supa-Palette
www.figma.com
www.figma.com favicon https://www.figma.com/community/plugin/1063959496693642315
Open Color
Color scheme for UI design
Open Color favicon https://yeun.github.io/open-color
Open Color

Typographies

Plugin de gestion des tailles de typographie.

www.figma.com
www.figma.com favicon https://www.figma.com/community/plugin/739825414752646970

Slides Design Tokens - Thibault Mahe

Utiliser les Design Tokens pour promouvoir collaboration et maintenabilité d’un Design System

Design tokens
Design tokens favicon https://thibault.mahe.io/talks/design-tokens

Exemple d’usage dans les styles CSS

Open Props: sub-atomic styles
Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.
Open Props: sub-atomic styles favicon https://open-props.style
Open Props: sub-atomic styles

Atelier Brand Asset Commando

www.figma.com
www.figma.com favicon https://www.figma.com/community/file/1372138561557862760