Jannis Smesny aka Figmatelier nous parle de Motion & animation dans un Design system https://www.figma.com/community/file/1118543058662391321 ------------------ Retrouvez-nous sur https://friends.figma.com/cotonou/

1. friends.figma.com/cotonou

2. Thinking in motion:
Motion & animation
dans un design system

3. I.Présentation

4. Jannis Smesny
Freelance Product designer
Remote, FR Motion
experiments

5. Figmatelier

8. II.Le design system

9. C’est quoi un
design system?

10. Une bibliothèque de composants
ou un UI kit?

11. Une bibliothèque de composants
ou un UI kit?

12. Une documentation
collaborative et évolutive
qui définit l’ensemble
des règles
d’un projet digital

13. News!
Les design tokens (Couleurs, fonts, dégradés, les
espaces, les ombres, les radius, les bordures,
l’opacité...)
Les icones.
Les images.
Les illustrations.
Les layouts.
Les grilles de structure.
L’image de marque physique et digitale.
Le branding.
Le ton de la marque.
Les règles d’accessibilité.
Des explications sur les choix des composants.
Des exemples de code.
Les règles d'utilisation.
L’UI motion.
L’animation.
...

14. Design
tokens
Atomes Molécules Organismes Templates Pages

15. Design
tokens
Atomes Molécules Organismes Templates Pages
Couleurs
Dégradé
Radius
Bordures
Opacité
Ombres
Formes
Typographie
Logotypes
...
Icones
Images
Illustrations
Textures
Boutons
Outils
...
Composants
Cards
Sidebar
Menu
Modals
Tooltips
...
Transitions
Loading pages
Parallax scroll
...

16. III.Les types d’UI motion

17. 3 types d’UI motion

18. UI Motion fonctionnel
Permet d’améliorer l’utilisation d’un site
ou d’une application et améliorer
l’expérience utilisateur.
Micro-interactions et émerveillement
Exemple: Click et hover states
des boutons, Outils, Chargements.

19. UI Motion structurel
Composants qui rentrent ou
sortent de l’écran
Composants qui grossisent
pour montrer les détails
d’un produit.
Exemples:Modals, Dropdowns,
Tooltips, Cards, Parallax effect ...

20. UI Motion émotionel
Animation d’illustrations ou
de textes
Les statuts de validation ou
d’erreur
Moments d’émerveillement

21. 5 règles et questions
fondamentales pour l’UI Motion

22. Ui motion site vitrine
VS
Ui motion applicatif

23. 1
Faire simple
Est-ce que cela distrait
mon utilisateur d'accomplir
une tâche?
Mon Ui motion est-il trop
complexe?
2
Faire court
Est-ce que cela perturbe
ou ennui mon utilisateur
quand il se connecte
souvent à mon site ou
application?
Est-ce que c'est trop
long?
3
Donner du sens
Est-ce que cela sert
mon message ou ajoute
de la valeur à mon
interface?
Est-ce que mon Ui
motion et mon animation
aident dans mon
parcours utilisateur ou
est-ce juste un effet wow
dribbble?
4
Donner le contrôle à
l'utilisateur
Est-ce que mon
utilisateur peut mettre
l'animation en pause?
Est-ce que mon
utilisateur peut switch
entre ON/OFF?
5
Tester
Il faut tester sur
différents devices,
navigateurs, dans
différentes situations
(Réseau 3G/4G,
Fibre...), avec différents
types d'utilisateurs, voir
l'accessibilité.

24. IV.Outils pour partager
son UI motion à sa team

25. Sketchs et storyboards
pour reitérer rapidement
en début de projet

26. 1
Le déclencheur
Qu’est ce qui démarre l’action,
l’interaction?
Décrire en quelques mots
Hover, Click, Active, Double tap,
Pinch, Slide, Swipe, Scroll, Pull,
Drag, Loading page, Transitions,
Parallax effect...
2
L’action
Que se passe t’il?
Les éléments de l’interface
peuvent apparaître, disparaître,
grossir, rétrécir, changer de
position ou de forme...
Dessiner sur plusieurs frames.
3
Le comportement
Est-ce que l’animation est
rapide, lente, rebondie,
tremble...?
Quelles émotions veut on faire
ressentir à notre utilisateur?
Est ce que ce type d’animation
représente bien notre identité?
Décrire l’animation en quelques
mots
Animation rassurante, amicale,
minimaliste, exagérée,
énergique...

28. Vidéos et prototypes
pour expliquer en détail
les UI motion complexes

29. Home
Courses
Music & Podcast
Calendar Courses
Profile
Lifestyle
Instructors
Downloads
Settings
? FAQs
Log out

32. V.Documenter son UI motion
dans le design system

33. 1
Le but
Expliquer quand et pourquoi je dois
animer.
Décrire les émotions que je veux faire
ressentir à mon utilisateur.
Do and Don’t pour illustrer les différents
cas possibles.
2
Les types d’animation
Des UI motion courtes pour des
animations simples comme le
changement d’opacité ou de couleurs,
textes...
Des UI motion lentes pour des
animations plus complexes comme des
transitions de pages. les loading pages,
les drags and drops, l’arrivée d’un
contenu...
Animation des textures, lumières,
illustrations, vfx...pour les autres types
d’animation.
Temps de réponse après l’action
3
Easing
Définir la physique, la durée, la vitesse
de l’animation
(Linear, Ease in, Ease out, Elastic, Ease
both, custom...)

35. TYPE DURÉE
Boutons / Petits composants 100 - 200ms
Alertes / Réorganisation de cards 250 - 300ms
Panneaux / Modals 300 - 400ms
Transitions de pages 500 - 700ms

37. VI.Les avantages

38. Pour
la team
Pour
le projet
Pour
l’utilisateur

39. Pour la team:
Collaboration simplifiée
Meilleure communication
Gain de temps

40. Pour le projet:
Unification,Hiérarchisation,
Méthodologie de l’UI motion
Renforce l’identité de notre marque
Met en valeur le design
Se différencier des concurrents

41. Pour l’utilisateur:
Suscite émotion et émerveillement
Expérience utilisateur unique,
mémorable et immersive
Attire l’attention
Facilite la navigation

42. VII. Des questions

43. TWITTER:
@FIGMATELIER
YOUTUBE:
FIGMATELIER
FIGMA:
@FIGMATELIER
REDDIT:
@FIGMATELIER

44. Merci