Du wireframe au prototype

• Wireframe : structure et hiérarchie en gris, zéro style
• Mockup : maquette statique haute fidélité (couleurs, typo, composants finaux)
• Prototype : maquette cliquable qui simule le comportement

Le prototype ajoute la dimension temporelle : navigation, états, transitions, feedback utilisateur. C'est ce qui te permet de tester un parcours avant de coder.

• Low-fi (papier, Balsamiq, Excalidraw) : valider un parcours global, itérer vite
• Mid-fi (Figma en gris) : structure et logique d'interaction
• High-fi (Figma, Penpot, Framer) : composants finaux et données réalistes

Les 3 axes de fidélité

• Visuel : du noir et blanc aux couleurs finales
• Contenu : Lorem ipsum vs vrai contenu réaliste
• Comportement : statique vs navigation vs animations complètes

Les étapes

1. Sélectionne l'onglet Prototype dans le panneau de droite
2. Sélectionne l'élément déclencheur (un bouton, un lien)
3. Tire la poignée bleue ronde vers l'écran cible
4. Choisis le trigger et l'action
5. Définis un Starting frame, puis lance Present

Les triggers utiles

• On click : déclic à la souris ou au tap
• While hovering : tant que la souris reste sur l'élément
• On drag : pour les interactions glissées (carrousels, switches)
• After delay : utile pour les transitions automatiques
• Mouse enter / Mouse leave : pour gérer un tooltip

Les actions principales

• Navigate to : aller à un autre écran
• Open overlay : ouvrir une modale par-dessus
• Swap with : remplacer le contenu d'un composant
• Set variable : modifier une variable Figma (logué / non logué)
• Back / Close overlay : retour ou fermeture

Smart Animate

Figma détecte automatiquement les propriétés communes entre deux frames (position, taille, opacité) et interpole entre les deux. Indispensable pour les transitions élégantes sans tout animer à la main.

Types de transitions

• Instant : pas de transition, switch direct
• Dissolve : fondu
• Move in / out : glisse depuis un côté
• Push : pousse l'ancien écran vers le côté
• Slide in / out : glisse par-dessus

Durée et easing

• Durée typique : 150 à 300 ms
• Au-delà de 500 ms, ça paraît lent
• Easing recommandé : Ease in and out, Spring pour un rendu plus naturel
• Toujours offrir une option de reduced motion dans le produit final (préférence OS)

Micro-interactions à prévoir

• Loading : skeleton ou spinner pendant un appel API
• Succès : feedback visuel après une action (toast, check vert)
• Erreur : message clair, possibilité de réessayer
• État vide : pas de résultat, suggestion d'action
• Hover et focus : feedback sur les interactifs

Les 3 niveaux à couvrir

• Happy path : le scénario nominal, du début à la fin sans friction
• Chemins d'erreur : champ vide, identifiant inconnu, erreur réseau, timeout
• États système : loading, vide, partiel, succès, échec

Convention de nommage

Nomme tes écrans pour t'y retrouver : 01-login-default, 02-login-error, 03-dashboard-empty. Un préfixe numérique te donne l'ordre. Un suffixe sémantique précise l'état.

Variables Figma pour les états logiques

Tu veux gérer un état logué / non logué sans dupliquer tous les écrans ? Crée une variable booléenne Figma isLoggedIn. Les écrans s'adaptent via des Conditional Set Variable en réponse aux actions.

Préparer le test

• Recrute 5 profils proches de la cible (pas tes collègues)
• Prépare un script avec 3 à 5 tâches précises
• Formule les tâches en objectif, pas en action (« retrouve la commande de mars », pas « clique sur l'onglet Historique »)
• Prépare un canal pour la session (Zoom, Meet, ou présentiel)

Pendant le test

• Reste silencieuse, observe, n'aide pas
• Demande de penser à voix haute
• Note les hésitations, les phrases prononcées, les zones cliquées par erreur
• Mesure : succès / échec, temps, nombre d'erreurs, score de satisfaction (SUS)

Itère vite

Après chaque test, corrige les frictions les plus graves avant le test suivant. Tu apprends plus en 5 itérations qu'en 5 tests sur le même proto.

Dev Mode dans Figma

• Active Dev Mode sur ton fichier
• Tokens (couleurs, espacements, typo) accessibles côté droit
• Mesures et CSS générés automatiquement
• Variables exportables en CSS, Tailwind, iOS, Android

Documenter au-delà du visuel

• États interactifs : que fait chaque bouton, dans quel ordre
• Conditions de transition : quand passer d'un état à l'autre
• Accessibilité : focus visible, ordre de tabulation, contrastes vérifiés
• Responsive : que devient chaque bloc en mobile
• Lien vers le ticket Jira, Linear ou GitHub Issue de la feature

Versionner les livrables

Fige une release v1.0-handoff dans Figma (Branching ou simple duplication). Quand le design évolue, tu peux toujours revenir à la version qui a servi de spec, ou comparer ce qui a bougé.