Formation Maquette graphique Web et Figma
Figma est l’outil collaboratif de référence pour concevoir des interfaces web et mobiles.
Notre équipe vous conseille
Est-ce la bonne formation pour vous ?
Votre objectif, votre niveau, votre financement : notre équipe vérifie avec vous que cette formation vous correspond, ou vous oriente vers celle qui vous conviendra mieux.
- Pour qui
- Graphiste web, webdesigners, gestionnaires de site, webmasters, intégrateurs web, développeurs, responsables de communication,…
- Prérequis
Bonne connaissance de l'environnement Web et une pratique courante d'un logiciel de dessin vectoriel et bitmap.
- Durée
- 28 h · 4 jours
En bref
Ce que vous saurez faire
- Comprendre les contraintes des écrans et les principes du design responsive.
- Structurer une interface avec frames, grilles, auto layout et contraintes.
- Passer du zoning au wireframe puis à la maquette.
- Créer des composants, des variantes, des styles et des variables réutilisables.
- Réaliser des maquettes mobile et desktop et un prototype interactif.
- Partager, tester et transmettre ses maquettes aux développeurs.
Programme
Formation Figma | Design d'expérience utilisateur
01Découvrir Figma
- Atouts de Figma en environnement collaboratif
- Interface : fichiers, pages, barre d’outils, panneaux de propriétés
- Ressources de la communauté Figma
02Le design pour écrans
- Contraintes des périphériques et règles de design visuel
- Principes du responsive et nommage des zones
- Typographie adaptée aux écrans
03Grilles et mise en page
- Des grilles du print aux grilles web
- Grilles, repères, contraintes et auto layout
04Formes, textes, images et couleurs
- Formes et outil Plume ; création d’icônes
- Styles de texte et de couleur ; dégradés et palettes
- Images et masques
05Du zoning à la maquette
- Zoning, wireframe et maquette
- Moodboard, tendances et pistes graphiques
- Maquette mobile puis maquette desktop
06Composants et automatisation
- Composants, variantes et états d’interaction
- Variables (couleurs, espacements, modes clair et sombre)
- Kits d’interface : écrans de connexion et d’inscription
- Plug-ins utiles
07Prototypage
- Liens d’interaction, transitions, superpositions, animations intelligentes
- Parcours utilisateur et test sur mobile
08Partage et export
- Liens de partage et commentaires
- Mode Dev et spécifications pour les développeurs
- Export des éléments (SVG, PNG, JPEG, WebP) et optimisation
09Ouverture aux outils d’IA
- Fonctions d’IA de Figma : premier jet d’interface, prototypage rapide, aperçu de la publication de sites
- Garder la maîtrise de la conception et de l’accessibilité
Prochaines sessions
Les dates peuvent s'adapter : en individuel, la formation démarre quand vous êtes prêt(e).
- 16 décembre 2026 – 21 décembre 2026
- 21 avril 2027 – 26 avril 2027
- 4 août 2027 – 9 août 2027
- 21 décembre 2027 – 24 décembre 2027
Financer cette formation
Selon votre situation, tout ou partie de la formation peut être pris en charge. Notre équipe vérifie vos droits avec vous.
Votre employeur (OPCO), France Travail, la Région ou un financement personnel peuvent prendre en charge cette formation.
Notre équipe identifie la bonne solution et monte le dossier avec vous.
Informations pratiques
- Type de reconnaissance
- Attestation de fin de formation
- Accessibilité
- Locaux accessibles aux personnes à mobilité réduite (PMR) et aux personnes en situation de handicap (PSH).
Référent handicap : Bénédicte Guilloteau, benedicte@mandyben.com
Fiche mise à jour le 29 octobre 2026
En savoir plus sur cette formation
Figma est l’outil collaboratif de référence pour concevoir des interfaces web et mobiles. Cette formation couvre le design d’écran, les grilles, le zoning, les wireframes, les maquettes mobile et desktop, les composants et le prototypage, jusqu’au partage avec les développeurs, ainsi que les nouvelles fonctions d’IA de Figma. Prérequis : bonne connaissance du web et pratique d’un logiciel de dessin vectoriel ou bitmap.
Objectifs :
• Comprendre les contraintes des écrans et les principes du design responsive.
• Structurer une interface avec frames, grilles, auto layout et contraintes.
• Passer du zoning au wireframe puis à la maquette.
• Créer des composants, des variantes, des styles et des variables réutilisables.
• Réaliser des maquettes mobile et desktop et un prototype interactif.
• Partager, tester et transmettre ses maquettes aux développeurs.
Découvrir Figma
• Atouts de Figma en environnement collaboratif
• Interface : fichiers, pages, barre d’outils, panneaux de propriétés
• Ressources de la communauté Figma
Le design pour écrans
• Contraintes des périphériques et règles de design visuel
• Principes du responsive et nommage des zones
• Typographie adaptée aux écrans
Grilles et mise en page
• Des grilles du print aux grilles web
• Grilles, repères, contraintes et auto layout
Formes, textes, images et couleurs
• Formes et outil Plume ; création d’icônes
• Styles de texte et de couleur ; dégradés et palettes
• Images et masques
Du zoning à la maquette
• Zoning, wireframe et maquette
• Moodboard, tendances et pistes graphiques
• Maquette mobile puis maquette desktop
Composants et automatisation
• Composants, variantes et états d’interaction
• Variables (couleurs, espacements, modes clair et sombre)
• Kits d’interface : écrans de connexion et d’inscription
• Plug-ins utiles
Prototypage
• Liens d’interaction, transitions, superpositions, animations intelligentes
• Parcours utilisateur et test sur mobile
Partage et export
• Liens de partage et commentaires
• Mode Dev et spécifications pour les développeurs
• Export des éléments (SVG, PNG, JPEG, WebP) et optimisation
Ouverture aux outils d’IA
• Fonctions d’IA de Figma : premier jet d’interface, prototypage rapide, aperçu de la publication de sites
• Garder la maîtrise de la conception et de l’accessibilité
Avis
Ils sont passés par là. Des stagiaires.
J'ai pu créer ma boutique en ligne et réaliser des ventes en lançant ma marque :-)
Ce stage m'a permis de tester plusieurs appareils photo, et de me mettre en situation pour mieux comprendre les problématiques.
Les explications claires et bien ciblées ont permis à notre collaborateur à la fois de se former et de rectifier ses procédures. Objectif atteint donc et nous en remercions le formateur.
Je vous confirme que la formation s’est excellemment bien déroulée. Le contenu était très intéressant et devrait m’apporter beaucoup dans mon travail à venir. J’en profite pour vous féliciter sur le choix de vos formateurs, le formateur fait preuve d’une grande pédagogie et d’une extrême gentillesse.
Questions fréquentes
WordPress ou Wix : que choisir ?
WordPress offre plus de liberté et de fonctionnalités, Wix est plus simple pour démarrer. Nous vous conseillons selon votre projet et votre budget.
Faut-il savoir coder ?
Non pour WordPress, Wix, Webflow ou PrestaShop en tant qu'utilisateur. Pour le développement de thèmes, des bases en HTML et CSS sont utiles (voir le domaine Développement et informatique).
Peut-on travailler sur son propre site pendant la formation ?
Oui, en formation individuelle notamment, nous travaillons volontiers sur votre projet réel.
Qu'est-ce que l'UX/UI design ?
L'UX (expérience utilisateur) et l'UI (interface) consistent à concevoir des sites et applications simples et agréables à utiliser. Nos formations utilisent notamment Figma.
Où se déroulent les formations ?
Dans nos locaux au 146 rue Paradis, à Marseille (6e), dans vos locaux pour les formations intra-entreprise, ou à distance en visio, en direct avec le formateur. Les modalités possibles sont indiquées sur chaque fiche.
Pas sûr(e) d'être fait(e) pour ça ?
Chacun sa façon d'atteindre son objectif. Notre équipe vous rappelle pour trouver la formation et le financement adaptés à votre situation.
- QualiopiOrganisme certifié
- 1 780personnes formées en 2026
- 98 %de satisfaction
- Depuis 2006à Marseille, 146 rue Paradis