Figma : concevoir des interfaces et prototypes collaboratifs

Les participants sont invités à venir avec leurs projets et les problématiques qu’ils rencontrent, afin d’adapter au mieux la formation à leurs besoins

Prendre en main Figma et structurer son espace de travail

• Usages et périmètres fonctionnels de Figma : wireframes, interface web et appli, maquette interactive, etc.
• Panorama de l’interface : Frames, Layers, Assets, Inspect
• Différence entre fichier, projet et équipe (Teams)
• Notions de Frames et de contraintes (constraints) pour le responsive
• Organisation d’un fichier de travail clair et réutilisable

Méthodologie de maquettage web

• Les étapes de conception, le design d’interface, l’interactivité.
• Bonnes pratiques avec Figma.

Créer ses premiers éléments graphiques

• Outils de dessin vectoriel : formes, tracés, Boolean operations
• Gestion des couleurs, typographies et styles (color styles, text styles)
• Utilisation des composants (components) et variantes
• Bonnes pratiques de nommage et de rangement des calques

Construire des design responsives avec Auto Layout

• Principe et logique de l’Auto Layout (mise en page automatique)
• Créer des boutons, cartes et listes adaptatifs
• Gérer l’espacement, l’alignement et la hiérarchie visuelle
• Adapter une interface à plusieurs formats d’écran (Responsive Design)

Création d’une bibliothèque de composants

• Présentation du concept d’Atomic Design
• Création des premiers composants UI (atomes, molécules et organismes)

Prototyper les interactions

• Créer des liens entre écrans (prototyping mode)
• Types de transitions, d’animations et de déclencheurs (triggers)
• Simuler des micro-interactions (survol, clic, overlay)
• Tester et ajuster le prototype en mode Present

Travailler en équipe : Méthodologie et collaboration

• Bibliothèques partagées (shared libraries) et Design Systems
• Droits d’accès et organisation multi-projets
• Bonnes pratiques de collaboration designer/chef de projet

Passer la main aux développeurs

• Utiliser le mode Inspect (specs, couleurs, espacements, export)
• Exporter des assets aux bons formats (SVG, PNG, PDF)

Accélérer sa conception avec l’IA de Figma

• Générer une première ébauche d’écran avec un prompt et First Draft / Agent Figma AI
• Nettoyer et enrichir un fichier avec les outils utilitaires (renommage de calques, remplissage de contenu)
• Connecter Figma aux agents de code (présentation)
• Intérêts et limites de la conception avec l’IA

Livrables / résultats concrets obtenus

À l’issue des 2 jours, chaque participant repart avec :

• Une maquette responsive complète, construite pas à pas pendant la formation
• Une bibliothèque de composants réutilisable (boutons, cartes, listes) structurée selon l’Atomic Design
• Un prototype interactif testé, prêt à être présenté ou soumis à validation
• Une méthode de travail transposable à ses prochains projets Figma, y compris l’usage raisonné des outils IA