Figma en deux jours : les fondamentaux du design UI/UX appliqué À distance
Dernière mise à jour : 13/04/2026
Description
Module 1 : Introduction
- Évolution des logiciels de création d’interfaces web
- Figma Navigateur / Figma Logiciel / Figma Mirror
- L’interface Figma
- Les différents formats d’images pour le web (JPEG, PNG / PNG transparent, GIF) : comment choisir ?
- Le format SVG pour Figma
- Bien nommer ses fichiers pour le web et organiser ses plans de travail
- Design System & Atomic Design (initiation)
Module 2 : Outils les plus utiles
- Découverte de l’interface Figma et de ses principaux outils
- Utilisation des repères, des layouts/grids et règles
- Le zoom (votre meilleur allié dans Figma)
- Frames / Créer un espace de travail web efficace (12 colonnes)
- Layers : pages et calques
- Styles / Fill / Stroke / Shadows / Inner Shadows / Blurs
- Styles de texte
- Styles de couleurs et dégradés
- Composants, Auto-Layout, composants interactifs
- Différences entre Styles et Variables
- Formes vectorielles
- Figma Draw
- Alignements
- Les raccourcis clavier les plus utiles
- Dev Mode (initiation)
Module 3 : Les indispensables
- Créer un nouveau document
- Exporter pour le web – Export @1x, @2x, @3x / Preview
- Transform / Edit / Rotate
- Grouper / Dégrouper
- Alignement des artboards et des éléments graphiques
- Création de composants
- Assets – Design System
- Auto-Layout avancé
- Boolean
- Les contraintes
- Les variables (initiation)
- Library
- Les plugins utiles pour Figma : comment les installer, lesquels utiliser ?
- La communauté Figma
- L’IA dans Figma
- Initiation à Figma MCP et Claude Code via le terminal
- Figma et les Claude Skills
- La galaxie Figma : initiation à FigJam, Figma Slides, Figma Buzz, Figma Sites, Figma Make
Module 4 : Exercices pratiques
De nombreux exemples et exercices pratiques jalonnent l’ensemble de la formation.
1er projet – Création d’une landing page
- Version desktop et mobile
2e projet – Site web vitrine
Réalisation d’un projet complet intégrant l’ensemble des bonnes pratiques abordées en formation.
Conception d’un site web vitrine desktop et mobile (thème à définir).
- Wireframes
- Maquettes graphiques
- Prototypage Figma
3e projet – Site e-commerce
Réalisation d’un projet complet intégrant l’ensemble des bonnes pratiques abordées en formation.
Conception d’un site e-commerce desktop et mobile (thème à définir).
- Étude des différents gabarits de page e-commerce
- Analyse de sites e-commerce existants
- Wireframes
- Création des maquettes graphiques
- Prototypage Figma
4e projet – Figma Make
- Création d’un player audio
Objectifs de la formation
- Découverte de l’utilisation de FIGMA
- Utilisation de FIGMA, FigJam, Figma Slides, Figma IA et Dev Mode (ainsi que Zeplin au besoin).
- Mise en page Mobile, Tablettes et Desktop (Mobile First)
- Protypages
- Comment améliorer vos design UI à l’aide de Figma
- Comprendre les contraintes liées au web
- Savoir produire des fichiers pour l’écran
- Concevoir des interfaces web (UI) à destination des développeurs web, à l’aide de Zeplin.
Public visé
- Web designer
- Designer UI et UX
- Community manager
- Responsable de communication
- Chef de projet web
- Personnes intéressées par le design et la création d’interfaces web
Prérequis
- Le stagiaire est familiarisé avec l’utilisation du web
- Connaissance de Photoshop et XD serait un plus.
- Connaissance des principaux réseaux sociaux (Facebook, X, Linkedin, Instagram…)
- Un sensibilité avec la mise en page, la typographie et la photo serait également un plus.
Modalités pédagogiques
Riche en expérience et aux compétences complémentaires, L’équipe de Mill-Forma vous accompagne avec enthousiasme tout au long de vos projets de formation. Nous veillons au bon déroulement des formations en s’assurant de l’adéquation des formations avec les besoins des utilisateurs.
Moyens et supports pédagogiques
- Accueil des stagiaires dans une salle dédiée à la formation (si formation en présentiel)
- Documents supports de formation projetés
- Exposés théoriques et pratiques
- Étude de cas concrets
- Auto-positionnements
- Mise à disposition en ligne de documents supports à la suite de la formation
Modalités d'évaluation et de suivi
- Feuilles de présence
- Auto-positionnement en début et fin de formation par les stagiaires
- Questions orales ou écrites
- Mise en situation
- Formalisation à l’issue de la formation : Une attestation de fin de formation est délivrée à l’issue de la formation
Compétences acquises à l'issue de la formation
- Je maîtrise l'évolution des logiciels de création d'interfaces web, notamment Figma.
- Je navigue aisément entre Figma Navigateur, Figma Logiciel et Figma Mirror.
- Je comprends et utilise les notions de pixels, RVB, et les différents modes colorimétriques (RVB, CMJN).
- Je différencie les images pour le web et celles pour le print, en choisissant les formats adéquats (jpeg, png, gif, SVG).
- J’organise mes fichiers et plans de travail pour le web de manière efficace.
- J'utilise les repères, layouts, grids et règles dans Figma pour structurer mes designs.
- Je crée et gère des #Frames, layers, styles, et j'applique des effets comme fill, stroke, shadows et blurs.
- Je maîtrise la création de composants, l'organisation des assets et l'utilisation des plugins dans Figma.
- Je réalise des wireframes et des maquettes graphiques pour des sites web responsives (desktop, tablette, mobile).
- Je prépare des maquettes de sites e-commerce et les exporte via des outils comme Zeplin pour les développeurs.
Formateurs
Informations sur l'accessibilité
Modalité d’accès : Nous contacter : contact@mill-forma.fr
Accessibilité des personnes en situation de handicap : Nous contacter en cas de besoin d’accessibilité particulier pour un participant
