1.
friends.figma.com/cotonou

2.
Steven Houessou-Adin
Product Designer
@steven

3.
Friends of Figma

4.
Region Name

5.
friends.figma.com

6.
Friends of Figma, Cotonou

7.
friends.figma.com/cotonou

8.
Bevy Twitter Telegram LinkedIn
110 229 75 373

9.
Annonces

10.
•Social media 🖼
•Battle Figma 🥊
•Workshop 📝

11.
Config ??

12.
•Dark Theme
•Spotlight
•Individual Strokes
•Auto Layout
•Component properties
•Variable fonts
•Outline mode
•Spring animation
•Localization & RTL
•API

13.
Dark

14.
Dark

15.
Spotlight

16.
Test Test Test Test

17.
Auto Layout
TITLE
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sit
ullamcorper urna sagittis duis
faucibus. Libero, nunc velit
dignissim sed venenatis luctus
ut faucibus. Vitae viverra
consequat a sem ipsum
pharetra arcu sit enim.
Egestas aliquam senectus
nibh sem faucibus at.
Submit

18.
Component properties
Text Text
Username
Please enter your username
Username
BonjourBonjourBonjour
Bonjouur
Username
Please enter your username

19.
Variable fonts
Inter

20.
Outline Mode
Text

21.
Spring animation

22.
Localization & RTL
‫ﺧ‬
‫ﻂ‬
‫ﻣ‬
‫ﺘ‬
‫ﻐ‬
+,

23.
API
Ex
•Pro Layout
•Automator
•Figma Tokens
Support du dark theme pour les plugins

24.
friends.figma.com/cotonou

25.
About me
• 33 years old
• 1st job a Criteo
•
• 8 years as a freelance
•
• 2 years spent in Argentina
•
• Musician
•
• Front-end developer
•
• Started design with
• macromedia Flash MX
•
• The Cacatoès Theory founder

26.
Nom masculin
Pattern
Modèle spécifique représentant d'une
façon schématique la structure d'un
comportement individuel ou collectif.
source: larousse.fr

27.
Qu’est ce qu’une pattern UI
Une succession d’étapes linéaires ou
non, qui permettent à l’utilisateur de
compléter une action définie (schema)

28.
Toute interface (SaaS) est une
succession de patterns
Celles-ci peuvent avoir plusieurs issues
“un comportement de l’interface connu et attendu
par le user”

29.
Le login
Objectif
Accéder à l’application et à ses données
(compte) de manière sécurisée
Méhodes
3 façons différentes de se login
•Email/Password
•Mobile + Verification code
•SSO - Single Sign On (Apple & Google)
3 user flow différents avec la même finalité
1 2
3
4

30.
Connais-tu d’autres
façons de se login sur
une platerforme SaaS
?

31.
Les 5 règles de la bonne pattern UI
➡ Une pattern n’existe que dans un contexte
➡ Laisser le choix à l’utilisateur (si possible) & le guider
➡ Rester cohérent et ne pas réinventer la roue
➡ Anticiper les éventuelles erreurs (sytème et user)
➡ Indiquer le début et la fin de la pattern

32.
RÈGLE 1
Une pattern
n’existe que dans
un contexte
exemple: le bulk (multiselect)

33.
O item selected - All email read

34.
1 (or more) item selected - All email read
Mark as unread

35.
All items selected - 1 or more unread email
Mark as Read

36.
Sur Figma
Si 2+ calques sélectionnés -> Bulk rename

37.
RÈGLE 2
Laisser le choix
au user (et le
guider)
exemple: Onboarding & Save as draft

38.
ONBOARDING
➡ Onfocus sur le premier input
➡ Error & colored inputs
➡ Navigation bullet
➡ Create account = sortie
➡ Browse assets = sortie

39.
SAVE AS DRAFT
intérompre un flow et le
sauver pour le reprendre plus
tard

40.
UNE PATTERN UI EST
DRIVÉE PAR LA TECH !

41.
ON NE DOIT JAMAIS
CONSTRUIRE UNE
FEATURE SUR LA BASE
D’UN EXCEPTION

42.
RÈGLE 3
Rester cohérent
et ne pas
réinventer la
roue
exemple: Navigation, messagerie ...

43.
NAVIGATION
MESSAGERIES
FORMULAIRES
NOTIFICATIONS
...

44.
Tout User flow est
une succession de
patterns
qui peuvent elles
mêmes être scindées en
plus petites patterns

45.
RÈGLE 4
Anticiper et
indiquer les
éventuelles
erreurs (sytème
et user)
exemple: Import csv, supression

46.
Import de .csv
Import de data dans une base de donnés
1 - Préparer la donnée et la formater
2 - Importer le fichier dans l’interface
3 - Matcher la data
4 - Valider et importer
5 - Success ou Error
6 - Si Error où ?

47.
Columns matching

48.
Upload document
Success
Error

49.
Match columns
Avec preview des
datas

50.
Columns validation
• Indiquer les columns
validées
• Refresh la
data

51.
RÈGLE 5
Indiquer le
début et la fin
de la pattern
exemple: Stepper, Empty states

52.
Aider le user à se projetter dans la flow

53.
Empty States

54.
MERCI !

55.
friends.figma.com/cotonou

56.
C’est quoi?

57.
Ethique c’est quoi
pour vous ?

58.
Designer de manière éthique
revient à réfléchir à l’impact
qu’un design aura sur
l’utilisateur et le concevoir au
mieux pour qu’il soit positif.

59.
Les principes du
design éthique

60.
La pyramide éthique des besoins créée par Aral Balkan et Laura Kalbag illustre bien les principes fondamentaux du
design éthique, et comment chaque couche de la pyramide repose et dépend de la couche précédente.

61.
La Frugalité,
L’ inclusivité et
Le respect des individus
Les principaux piliers

62.
Le design éthique est un travail
constant d’amélioration et de réflexion
pour construire un numérique plus
respectueux.

63.
(Le manque d'inspiration,
vous n'êtes pas seuls)

64.
Faire du sport Se connecter à
la nature
Brassage
interculturel

65.
Quelques sites
d’inspiration

66.
https://www.bluevertigo.com.ar/
https://eagle.cool/

67.
MERCI !

68.
friends.figma.com/cotonou

69.
Toute la vérité, rien
que la vérité
COMMUNICATION
ENTRE DESIGNERS ET
FRONT-END DEVS

70.
Avoir une source qui sert de
référence aux designers et dev
front-end est important.
Pourquoi?
Ecriture Ecriture
Lecture Lecture
Single
Source
of Truth
</>

71.
Pour qui ceci est important?
Designer
Front-end dev
Product Manager
Product Owner

72.
Couleur
Typographie
Spacing
Border-radius
Border width
Opacity
Sizing
Box Shadow
La boite magique pour
les éléments UI
Couleur
Typographie
Heading 1
Heading 2
Heading 3
Heading 4

73.
Une partie plus
pratique
</>
1.Pull du repo dans Vs-code
2.Configuration de l’espace de travail
3.Création des variables réutilisable
4.Push vers Github
5.Mise à jour dans figma
1.Mise en place du Design System
2.Importation des style dans figma token
3.Configuration de Github et création de token
4.Push vers Github

74.
Merci

75.
Liens utiles
docs.tokens.studio/getting-started
docs.tokens.studio/sync/github
docs.tokens.studio/styles
docs.tokens.studio/handoff
www.figma.com/community/plugin/843461159747178978/Figma-Tokens
https://medium.com/push-design-tokens-to-developers....

76.
friends.figma.com/cotonou

77.
I.Présentation

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

79.
Figmatelier

80.
II.Le design system

81.
C’est quoi un
design system?

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

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

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

85.
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.
...

86.
Design
tokens
Atomes Molécules Organismes Templates Pages

87.
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
...

88.
III.Les types d’UI motion

89.
3 types d’UI moEon

90.
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.

91.
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 ...

92.
UI MoSon émoSonel
AnimaSon d’illustraSons ou
de textes
Les statuts de validaSon ou
d’erreur
Moments d’émerveillement

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

94.
Ui motion site vitrine
VS
Ui motion applicatif

95.
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 moBon
et mon animaBon aident
dans mon parcours
uBlisateur 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é.

96.
IV.OuEls pour partager
son UI moEon à sa team

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

98.
1
Le déclencheur
Qu’est ce qui démarre l’acBon,
l’interacBon?
Décrire en quelques mots
Hover, Click, AcBve, Double tap,
Pinch, Slide, Swipe, Scroll, Pull,
Drag, Loading page, TransiBons,
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...

99.
Vidéos et prototypes
pour expliquer en détail
les UI moEon complexes

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

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

102.
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’animaBon
(Linear, Ease in, Ease out, ElasBc, Ease both,
custom...)

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

104.
VI.Les avantages

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

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

107.
Pour le projet:
Unifica;on,Hiérarchisa;on,
Méthodologie de l’UI mo;on
Renforce l’iden;té de notre marque
Met en valeur le design
Se différencier des concurrents

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

109.
VII. Des questions

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

111.
Merci