Comprendre le webdesign et introduction à Figma
Notions fondamentales du webdesign
Distinction entre l’UI (Interface Utilisateur) et l’UX (Expérience Utilisateur), et principes d’ergonomie.
Notions de responsive design et adaptation multi-écrans (mobile, tablette, desktop).
Tendances actuelles en design d’interface (flat design, Material Design, etc.) et bonnes pratiques visuelles.
Tour d’horizon de Figma
Présentation de Figma dans le paysage des outils de design (avantages collaboratifs, travail dans le navigateur).
Création d’un compte Figma et découverte de l’interface (barre d’outils, panneaux de calques et de propriétés).
Navigation dans un fichier Figma : pages multiples et utilisation de cadres (Frames) pour structurer une maquette.
Premiers pas avec les outils de base
Manipulation des formes vectorielles simples : rectangle, ellipse, ligne (dessin, redimensionnement, duplication).
Ajout de zones de texte et notions typographiques de base (choix de police, taille, couleur du texte).
Sélection, déplacement, alignement et groupement d’objets pour organiser les éléments d’une interface simple.
Prise en main des fonctionnalités essentielles de Figma
Mise en page et gestion des calques
Utilisation des Frames comme plans de travail (artboards) pour créer des écrans distincts.
Organisation des calques : ordres d’empilement, regroupement, verrouillage et nommage pour garder une maquette claire.
Guides, grilles et règles : aligner et distribuer les éléments de manière cohérente sur le canvas.
Dessin vectoriel et importation d’images
Utiliser l’outil Plume pour tracer des formes personnalisées et courbes (béziers).
Combiner des formes avec les opérations booléennes (union, soustraction, intersection, exclusion) pour créer des icônes ou éléments complexes.
Importer des images externes (formats PNG, JPEG, SVG) et les intégrer : ajustements, recadrage et utilisation de masques de forme.
Styles visuels et ressources réutilisables
Paramétrage des couleurs : utiliser la pipette, créer des nuanciers et appliquer des dégradés simples.
Gestion de la typographie : définir les styles de texte de base (titres, sous-titres, paragraphes) en cohérence avec une charte graphique.
Enregistrer et réutiliser des styles de texte et de couleur dans le document pour assurer la cohérence visuelle.
Exercice pratique
Réalisation d’une maquette simple (par exemple, page d’accueil d’un site web ou écran d’app mobile) en appliquant les notions vues.
Partage informel des maquettes entre participants pour une première critique constructive et adaptation en direct dans Figma.
Approfondissement – composants, prototypage et design system
Création de composants et instances
Convertir des éléments UI récurrents (boutons, en-têtes, barres de navigation) en composants pour les réutiliser facilement.
Utiliser des instances de composants : duplication d’éléments liés au composant principal et mise à jour globale lors de modifications.
Introduction aux variantes de composants pour gérer les états (par exemple, bouton normal / au survol / désactivé) au sein d’un même composant.
Prototypage interactif
Créer des liens entre les écrans (frames) pour définir la navigation d’une interface : interactions au clic, au survol, etc.
Paramétrer des transitions et animations simples (fondu, déplacement) entre les écrans pour simuler le comportement de l’application.
Tester le prototype interactif dans Figma (mode Présentation) et partage du prototype pour recueillir des feedbacks.
Auto-layout et conception responsive
Utiliser la fonctionnalité Auto-layout (disposition automatique) pour créer des listes et des layouts dynamiques qui s’adaptent au contenu.
Comprendre les contraintes de dimensionnement et de positionnement pour adapter un design lors du redimensionnement d’un cadre (responsive resize).
Adapter une maquette existante en différentes tailles d’écran (décliner une version mobile à partir d’une maquette desktop) en utilisant auto-layout et les contraintes.
Styles globaux et introduction au design system
Créer des styles globaux de couleur et de texte et découvrir la logique des variables de design (nouvelle fonctionnalité) pour gérer des thèmes (par ex. mode clair/sombre) et des valeurs globales.
Organiser les ressources dans Figma : nommage structuré des composants, styles et variables pour préparer un futur design system.
Aperçu des bibliothèques partagées : concept d’une bibliothèque d’équipe où composants et styles peuvent être publiés pour une réutilisation à l’échelle d’un projet ou d’une organisation.
Collaboration, plugins et flux de travail avancé
Collaboration en temps réel
Partage de fichiers Figma avec l’équipe : réglage des permissions (édition ou consultation) et invitations des collaborateurs.
Édition simultanée : travail à plusieurs designers sur une même page en temps réel (cursus multijoueurs, curseurs multiples visibles).
Commentaires et discussions : utiliser les commentaires intégrés pour le feedback et la résolution de problèmes directement sur la maquette.
Gestion avancée du projet dans Figma
Organisation des pages et frames pour les projets de grande taille (par sections de produit, versions, etc.).
Utilisation de l’historique des versions pour suivre les évolutions du design et restaurer des états antérieurs si nécessaire.
Introduction au système de branches (branchements) pour expérimenter des modifications majeures sans impacter la version principale du design.
Bibliothèques d’équipe et design system
Publication de composants et styles dans une bibliothèque d’équipe afin de les partager entre plusieurs fichiers et projets.
Mise à jour des composants partagés : gestion des modifications et synchronisation des instances à travers les fichiers du projet.
Documentation rapide du design system : annotations ou pages dédiées dans Figma pour expliquer l’utilisation des composants/styles aux autres membres.
Export et handoff aux développeurs
Préparation des assets graphiques pour l’export (icônes, images) dans les formats adéquats (SVG, PNG @2x pour Retina, PDF).
Utilisation du panneau Inspecter (ou mode développeur) de Figma pour récupérer les informations CSS, marges et dimensions nécessaires au développement.
Exportation d’un prototype ou de captures d’écrans pour présentation au client ou à l’équipe (PDF de présentation, slides).
Plugins utiles (hors IA)
Découverte de la communauté Figma et de son vaste catalogue de plugins.
Installation et utilisation de plugins facilitant le travail : par ex. outils d’icônes (Iconify), génération de contenu fictif (Content Reel), contrôle d’accessibilité, etc.
Intégration de ces plugins dans le flux de travail pour gagner du temps sur des tâches répétitives ou complexes.
Exploiter l’IA avec Figma et perspectives d’avenir
Introduction à l’IA dans le design
Tour d’horizon des apports de l’Intelligence Artificielle dans le domaine du design UI/UX (génération de texte, d’images, optimisation d’agencements).
Comprendre comment l’IA peut assister le concepteur sans remplacer la créativité humaine : exemples d’usages concrets et gains de temps potentiels.
Plugins Figma intégrant de l’IA
Présentation de quelques plugins populaires exploitant l’IA : par exemple, outils de génération de texte automatique (assistant de contenu), création d’illustrations ou d’icônes à partir de descriptions, etc.
Installation et démonstration d’un plugin d’IA sur une maquette Figma existante.
Exercice : utiliser l’IA pour générer un élément de design (texte d’accroche, image d’illustration) puis ajuster manuellement le résultat pour l’harmoniser avec la maquette.
Automatisation et fonctionnalités avancées
Introduction à l’API Figma et aux scripts permettant d’automatiser certaines tâches répétitives (notions pour aller plus loin, sans exercice de code approfondi).
Exemples d’automatisations possibles : alignement automatique d’éléments, génération de multiples variantes à partir de données, etc.
Discussion sur l’intégration d’outils tiers avec Figma (par ex. import de données depuis un tableur pour générer des écrans de façon dynamique).
Atelier de synthèse et conclusion
Projet final récapitulatif : chaque participant réalise une petite interface interactive en mobilisant l’ensemble des compétences acquises (composition visuelle, composants, prototype, éventuellement plugin IA).
Présentation des projets et feedback collectif, mise en avant des points d’amélioration et des réussites.
Conclusion de la formation : ressources pour continuer à progresser sur Figma (tutoriels avancés, communauté en ligne), et perspectives sur l’évolution de Figma et du design assisté par l’IA dans le futur.
