Formation Création de maquette multi-plateformes
Concevez des maquettes d'interfaces web et mobiles avec Figma : principes UX et UI, composants, auto layout et prototypes interactifs.
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
- Graphistes web, webdesigners, webmasters, responsables de communication digitale, chefs de projet, développeurs...
- Prérequis
Bonnes notions en HTML/CSS et connaître les principes de bases de la conception d’un site web
- Durée
- 14 h · 2 jours
En bref
Ce que vous saurez faire
- Appliquer les principes clés de l’UX et de l’UI.
- Suivre les étapes de conception d’une interface, du cahier des charges au prototype.
- Maîtriser Figma : frames, auto layout, composants, variables et styles.
- Concevoir des maquettes responsives pour ordinateur, tablette et mobile.
- Créer un prototype interactif et le présenter au client.
- Intégrer l’accessibilité et transmettre la maquette aux développeurs.
Programme
Formation Logiciel Figma - Maquettes interactives
01UX et UI
- Définitions et principes de base
- Analyse d’interfaces existantes
02Étapes de conception
- Cahier des charges et besoins utilisateurs
- Arborescence et maillage interne
- Zoning, wireframe, maquette, prototype
03Prendre en main Figma
- Interface, fichiers, pages et frames
- Formes, texte, images ; auto layout
- Composants, variantes, styles et variables
- Bibliothèques partagées et kits d’interface
04Concevoir en responsive
- Grilles et contraintes ; points de rupture
- Déclinaison ordinateur, tablette et mobile
- Approche mobile first
05Prototyper et présenter
- Liens, interactions, animations intelligentes
- Parcours utilisateur testable
- Partage, commentaires et validation client
- Transmission aux développeurs avec le mode Dev
06Méthode Scrum
- Piliers : transparence, inspection, adaptation
- Rôles et cérémonies ; place du designer dans l’équipe agile
07Ergonomie et accessibilité
- Tailles de texte, zones cliquables, contrastes (RGAA, WCAG)
- Organisation de l’information et cohérence visuelle
- Résolution et poids des images
08Ouverture aux outils d’IA
- Fonctions d’IA de Figma : générer un premier jet d’écran, renommer les calques, prototyper rapidement
- Bonnes pratiques : garder la maîtrise des choix de conception et vérifier l’accessibilité
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
Cette formation couvre tout le processus de conception d’une interface web et mobile avec Figma : analyse du besoin, zoning, wireframes, maquettes responsives, composants et prototype interactif livré au client, dans une démarche agile et accessible. Prérequis : bonnes notions en HTML/CSS et en conception de site web.
Objectifs :
• Appliquer les principes clés de l’UX et de l’UI.
• Suivre les étapes de conception d’une interface, du cahier des charges au prototype.
• Maîtriser Figma : frames, auto layout, composants, variables et styles.
• Concevoir des maquettes responsives pour ordinateur, tablette et mobile.
• Créer un prototype interactif et le présenter au client.
• Intégrer l’accessibilité et transmettre la maquette aux développeurs.
UX et UI
• Définitions et principes de base
• Analyse d’interfaces existantes
Étapes de conception
• Cahier des charges et besoins utilisateurs
• Arborescence et maillage interne
• Zoning, wireframe, maquette, prototype
Prendre en main Figma
• Interface, fichiers, pages et frames
• Formes, texte, images ; auto layout
• Composants, variantes, styles et variables
• Bibliothèques partagées et kits d’interface
Concevoir en responsive
• Grilles et contraintes ; points de rupture
• Déclinaison ordinateur, tablette et mobile
• Approche mobile first
Prototyper et présenter
• Liens, interactions, animations intelligentes
• Parcours utilisateur testable
• Partage, commentaires et validation client
• Transmission aux développeurs avec le mode Dev
Méthode Scrum
• Piliers : transparence, inspection, adaptation
• Rôles et cérémonies ; place du designer dans l’équipe agile
Ergonomie et accessibilité
• Tailles de texte, zones cliquables, contrastes (RGAA, WCAG)
• Organisation de l’information et cohérence visuelle
• Résolution et poids des images
Ouverture aux outils d’IA
• Fonctions d’IA de Figma : générer un premier jet d’écran, renommer les calques, prototyper rapidement
• Bonnes pratiques : garder la maîtrise des choix de conception et vérifier 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