📘 Chapitre 4 : S’initier à Figma

🎯 Objectif pédagogique

Prendre en main Figma pour créer des wireframes simples, organiser ses calques et utiliser les composants de base.

📚 Concepts abordés

• Interface et outils principaux de Figma
• Gestion des calques et des frames
• Composants, alignement et grilles
• Collaboration en temps réel

🧠 Explication théorique

Figma est un outil de maquettage et de design en ligne, fonctionnant directement dans le navigateur.
Il se distingue par :

• La collaboration en temps réel : plusieurs utilisateurs peuvent éditer un même fichier,
• Une interface intuitive avec des outils de dessin et de mise en page,
• Des composants réutilisables (boutons, cartes, sections),
• La possibilité d’exporter ou de partager facilement les maquettes via un lien public.

Terminologie importante :

• Frame : conteneur principal, équivalent d’une page ou section.
• Layer (Calque) : chaque élément (texte, image, bouton) est un calque.
• Component : élément réutilisable qui peut être dupliqué et modifié.

🛠 Travail pratique

Étape 1 : Créer un compte Figma

• Inscrivez-vous gratuitement sur https://figma.com.
• Connectez-vous à votre tableau de bord.

Étape 2 : Découverte de l’interface

• Explorez les outils : Frame (F), Rectangle (R), Text (T).
• Créez une nouvelle page vierge.

Étape 3 : Réaliser un wireframe simple

• Ajoutez un header (rectangle + texte),
• Placez des zones pour images (rectangles) et contenu,
• Utilisez la grille pour aligner les éléments.

🧾 Résumé et points-clés

• Figma est un outil collaboratif puissant et accessible.
• Les frames et calques permettent d’organiser une maquette proprement.
• Les composants facilitent la réutilisation et la cohérence du design.