JOUR 2 — Figma, Wireframes & Cinématique (User-flow)

Objectifs pédagogiques

• Prendre en main Figma même en étant débutant total.
• Comprendre les bases de l’UI structurelle (wireframing).
• Concevoir des écrans low-fidelity (wireframes).
• Créer un user-flow simple (cinématique).
• Apprendre à organiser un fichier professionnel dans Figma.
• Débuter le prototypage simple.

Pour les wireframe, je vous conseille d’utiliser Balsamiq

---

1. Introduction à Figma

Figma est un outil collaboratif de design d’interfaces, accessible dans un navigateur.

À faire

• Interface générale.
• La notion de Frame (équivalent d’un artboard).
• Outils de base :
  • Sélection (V)
  • Rectangle (R)
  • Texte (T)
  • Auto-layout
  • Couleurs
  • Bordures
  • Alignements
• Zoom (Ctrl + scroll).

---

1.1. Créer son premier projet Figma

Étapes :

1. Aller sur https://figma.com
2. « New Design File »
3. Renommer le fichier : UX-UI-Cours-Jour2
4. Créer une frame mobile (iPhone 13)
5. Créer une frame desktop (Desktop 1440px)

---

2. Organisation professionnelle d’un fichier

Un fichier Figma doit être structuré comme un vrai fichier de designer.

Structure recommandée

00 - Cover
01 - Research
02 - Personas
03 - User Journey
04 - Wireframes
05 - UI Kit (styles + composants)
06 - Maquettes HD
07 - Prototypes

À faire

• Ajouter une page : clic sur « + » en bas.
• Renommer une page.
• Ajouter un visuel de couverture.
• Ranger les frames à gauche dans des sections.

---

3. Wireframes Low-Fidelity

Un wireframe n’est pas joli. C’est un squelette fonctionnel !

Règles

• Gris uniquement.
• Une seule police.
• Aucun embellissement.
• Pas d’images réelles.
• Rectangles, lignes, textes simples.

---

3.1. Éléments de base d’un wireframe

Dans Figma, un wireframe basse résolution utilise :

Élément	Représentation
Bouton	Rectangle + texte
Image	Rectangle avec croix
Input	Rectangle + texte grisé
Titre	Texte en bold
Menu	Groupe de textes
Carte	Rectangle + 3 lignes de texte

---

3.2. TP : Créer trois écrans (45 min)

Objectif

Créer 3 écrans d’une application mobile simple :

1. Accueil
2. Liste d’articles / produits
3. Fiche détaillée

Consignes

• Utiliser uniquement rectangles + textes.
• Ajouter au moins un auto-layout (vertical ou horizontal).
• Respecter la hiérarchie visuelle.
• Bien nommer les frames.

---

4. Auto-layout

Pourquoi l’utiliser ?

• Alignements automatiques
• Marges cohérentes
• Facilité de modification
• Reproductibilité

À faire

• Sélectionner 3 éléments → Shift + A
• Changer le padding
• Changer l’espacement interne
• Tester orientation horizontal/vertical

---

5. La cinématique : créer un User Flow

Le User Flow est la carte du chemin que suit l’utilisateur dans l’interface.

À faire

• Symboles :
  • Rectangles = écrans
  • Losanges = décisions
  • Flèches = navigation
• Bonne pratique : un objectif = un flow.

---

5.1. TP User Flow : Réserver un billet de cinéma

Écrans attendus

• Accueil
• Liste des films
• Sélection d’un film
• Horaire
• Paiement
• Confirmation

Livrable

Un flow propre, connecté par des flèches, avec décisions.

---

Proposition de couleurs :

• bleu = écrans
• vert = succès
• orange = pages optionnelles
• rouge = erreurs / annulation

Le flow sera plus lisible : meilleure compréhension du concept.

---

6. Initiation au prototypage

Figma permet de simuler de la navigation.

Faire

1. Sélectionner un bouton → onglet Prototype
2. Faire glisser la flèche vers l’écran suivant
3. Définir :
   • On Click
   • Navigate To
   • Smart Animate (optionnel)

---

TP

Créer un mini-prototype entre :

• l’accueil
• la liste
• la fiche détaillée

---

7. Challenge Wireframe Speedrun

Règle

Créer 3 écrans en 10 minutes, le plus propre possible.

Objectif : apprendre la rapidité + simplification des idées.

---

8. Travail à rendre (pour demain)

Chaque étudiant doit fournir :

• 3 wireframes basse résolution
• 1 user flow
• 1 mini prototype (2–3 écrans)
• Un fichier Figma bien organisé

---

Demain, on verra un écran moche et non accessible à transformer