Figma & FigJam : outils indispensables

---

1. Qu’est-ce que Figma ?

Figma est un logiciel de design collaboratif en ligne (comme Google Docs, mais pour le design).

Il permet de :

• Créer des wireframes (maquettes basse fidélité)
• Concevoir des UI haute fidélité (design pixel perfect)
• Faire du prototypage interactif (maquette cliquable)
• Travailler en équipe en temps réel

Avantage : Il fonctionne depuis un navigateur (pas besoin d’installation), sauf si vous souhaitez installer une version sur votre machine.

---

2. Qu’est-ce que FigJam ?

FigJam est l’outil de whiteboard collaboratif de Figma.

Il sert pour :

• Faire du brainstorming
• Créer de cartes dites d’empathie
• Définir des parcours utilisateurs
• Mettre en place des ateliers de Design Thinking !

C’est l’outil idéal pour l’UX Research et les ateliers en groupe.

---

3. Est-ce gratuit ?

Et Oui !

Il y a 2 plans :

• Gratuit : Illimité en fichiers, fonctions principales (suffisant pour apprendre et pour nos projets).
• Pro : Payant (collaboration avancée, gestion d’équipes, analyses).

Donc, un simple compte gratuit suffit pour suivre la formation !

---

4. Comment installer et accéder à Figma ?

Option 1 : Version web

• Aller sur https://figma.com.
• Créer un compte avec Google, Microsoft ou saisissez votre email.
• Ensuite, vous travaillez directement dans votre navigateur.

Option 2 : Application desktop

• Télécharger l’application pour Windows ou Mac : Lien de téléchargement du logiciel Figma.
• L’application se synchronisera avec votre compte web.

---

5. Un premier projet avec Figma

Étapes pratiques

1. Créer un nouveau fichier : File -> New Design File.
2. Ajouter une Frame (cadre) = équivalent d’un écran (mobile, desktop, tablette).
3. Dessiner des formes (rectangles = boutons, cercles = icônes).
4. Ajouter du texte (ex. “Se connecter”).
5. Appliquer une couleur ou un style via le panneau de droite.

En 10 minutes, créez un écran d’accueil d’application.

Illustration à venir…

---

6. Premier projet avec FigJam

1. Ouvrir FigJam : File -> New FigJam File.
2. Ajouter des Post-it pour noter idées (“Besoin : trouver une salle rapidement”).
3. Utiliser des connecteurs pour lier les idées.
4. Créer une User Journey Map en 5 étapes.

Exercice : Dessiner le le parcours “Réserver une salle de sport”.

---

7. Collaboration en temps réel

• Inviter d’autres utilisateurs avec le bouton Share.
• Comme Google Docs, tout le monde voit les curseurs en live.
• Possibilité de commenter, de valider un écran, d’ajouter des sticky notes.

---

8. Export et récupération des CSS

Figma génère automatiquement les propriétés CSS (bien pratique) :

1. Sélectionner un élément (ex. un bouton).
2. Dans l’onglet Inspect (à droite), vous voyez :

   .button {
       width: 200px;
       height: 50px;
       background: #4CAF50;
       border-radius: 8px;
       font-family: 'Roboto';
       font-size: 16px;
   }

1. Copier-coller directement dans votre code.

Il est possible d’exporter en formats SVG, PNG et PDF.

---

9. Exercices pratiques

Exercice 1 – Figma

Crée un écran Connexion avec :

• Logo, champs email + mot de passe, bouton Se connecter.

Exercice 2 – FigJam

Faites une carte d’empathie pour “Marie, 35 ans, qui veut réserver une salle de sport rapidement”.

---

10. Résumé

• Figma = design UI + prototypage.
• FigJam = collaboration UX + ateliers.
• Gratuit et collaboratif.
• Génère automatiquement du CSS : gain de temps si vous n’êtes pas un.e expert.e en CSS !
• ça permet de tester rapidement votre CSS.

---