UI/UX Design d'application avec Figma et l'IA

Deux jours pour concevoir l'interface d'une application : parcours utilisateur, écrans mobiles, design system, prototype testé auprès d'utilisateurs et fichier prêt pour le développement.

14h (2 jours)
durée
1500
par participant
2800
intra / groupe
1 à 6
participants
4,4/5
Sommaire de la page

Ce que vous allez apprendre

Les compétences concrètes que vous maîtriserez à la fin de la formation.

🤖

Définir les utilisateurs d'une application, leurs tâches principales et le parcours qui y mène

📊

Organiser les écrans et la navigation d'une application en wireframes

🔍

Appliquer les règles d'ergonomie mobile : hiérarchie visuelle, zones tactiles, contrastes et accessibilité

✉️

Construire un design system dans Figma avec styles, composants, variantes et auto-layout

📊

Produire les maquettes haute fidélité des écrans clés, en mobile et en desktop

🎯

Prototyper un parcours cliquable et le tester auprès de vrais utilisateurs

🎓

Se servir de l'IA pour analyser la concurrence, rédiger les micro-textes et synthétiser les retours de test

💳

Transmettre les maquettes aux développeurs avec Dev Mode ou en tirer une première version avec Lovable

LE DÉROULÉ

Programme de la formation

Un parcours progressif et 100 % pratique, du cadrage de vos cas d'usage jusqu'au déploiement de vos premiers résultats.

Recevoir le programme

Cadrer l'application : utilisateurs et parcours

  • Qui utilise l'application et pour quoi faire : personas légers et tâches principales
  • Dessiner le parcours utilisateur, du premier lancement à la tâche accomplie
  • Analyser deux ou trois applications concurrentes avec l'aide de Claude
  • Atelier : le parcours principal de votre application, validé en groupe

Architecture de l'information et wireframes

  • Arborescence des écrans, barre d'onglets, menus et retours arrière
  • Wireframes basse fidélité sur papier, puis dans Figma
  • Prise en main de Figma : fichier, pages, frames mobiles et calques
  • Atelier : les cinq écrans clés de votre application en wireframe

Ergonomie et règles d'interface mobile

  • Hiérarchie visuelle, grilles, marges et espacements sur une base de 8 px
  • Taille des zones tactiles, lisibilité, contrastes et bases de l'accessibilité (WCAG)
  • Conventions iOS et Android : ce que l'utilisateur s'attend à trouver et où
  • Les états oubliés d'un écran : vide, chargement, erreur, confirmation

Design system et composants

  • Styles de couleurs, styles typographiques et variables
  • Composants, instances et variantes : boutons, champs, cartes, barre de navigation
  • Auto-layout : padding, gap, hug contents et fill container
  • Proposer des variantes et des micro-textes avec l'IA, puis trier à la main

Maquettes haute fidélité

  • Passer des wireframes aux écrans finaux avec votre kit UI
  • Décliner un écran mobile en version tablette ou desktop
  • Images, icônes et illustrations : où les trouver et comment les intégrer proprement
  • Revue croisée des maquettes entre participants

Prototyper et tester auprès des utilisateurs

  • Liens entre écrans, interactions, overlays et Smart Animate
  • Préparer un test utilisateur en cinq tâches avec trois à cinq testeurs
  • Synthétiser les retours avec Claude et classer les blocages par gravité
  • Corriger les écrans qui posent problème et relancer le test

Du design au développement

  • Dev Mode : mesures, styles et export des assets
  • Nommer et organiser le fichier pour l'équipe technique
  • Générer une première version fonctionnelle avec Lovable à partir des maquettes
  • Ce qu'une maquette promet et ce que le développement coûte : éviter les écrans impossibles à coder

Atelier final : présenter son application

  • Chaque participant présente son prototype : parcours, écrans clés et résultats du test
  • Retours du formateur et liste des améliorations à mener après la formation

Modalités pratiques

Pour qui ?

Product Owner, Chef de projet digital, Web designer, Développeur no-code, Entrepreneur

Prérequis

Être à l'aise avec un ordinateur et avoir créé un compte Figma (la version gratuite suffit). Aucune connaissance préalable de Figma ni du design n'est demandée. Venir avec un projet d'application, même au stade de l'idée, permet de travailler sur son propre cas pendant les deux jours.

Objectif visé

Deux jours pour concevoir l'interface d'une application : parcours utilisateur, écrans mobiles, design system, prototype testé auprès d'utilisateurs et fichier prêt pour le développement.

Durée & rythme

14h (2 jours)

Format

Distanciel / Présentiel

Délai d'accès

Formation accessible en présentiel chez notre partenaire Morning, 31 ter rue Vivienne, 75002 Paris, dans vos locaux partout en France, ou à distance en classe virtuelle. Réponse à votre demande d'inscription sous 48h ouvrées. Financement OPCO et plan de développement des compétences acceptés sur demande.

Évaluation

Évaluations continues pendant les deux jours (cas pratiques et mises en situation), puis présentation du prototype final avec les résultats du test utilisateur. Les supports de cours et le fichier Figma de votre application restent à votre disposition. Attestation de fin de formation remise à l'issue.

Accessibilité & handicap

Adaptations possibles sur demande (à formuler 15j ouvrables avant le début de la formation) : supports en version accessible (police adaptée, contraste élevé), aménagement du rythme… Référent : Terence Acher hello@nodeit.fr

Résultats

En cours de collecte

Calculés sur nos sessions terminées, mis à jour après chaque session. Avis Trustpilot : 4,4/5 sur 11 avis.

Les outils utilisés dans cette formation

Vous apprenez directement sur les outils du marché, ceux que vous retrouverez en poste dès le lendemain de la formation.

Une pédagogie pensée pour construire des compétences concrètes.

Pas de théorie hors-sol : vous progressez par la pratique, guidé par des formateurs en activité.

Programme sur-mesure

Chaque parcours est adapté à votre métier et à votre niveau, après un échange avec un conseiller pédagogique.

Vous travaillez sur vos cas réels, pas des exemples génériques.

Formateurs en poste

Vos formateurs sont consultants, growth ou product builders en activité. Ils transmettent des méthodes réellement utilisées.

Des pratiques du marché, pas des slides théoriques.

Projet concret

Vous repartez avec un livrable utilisable : un workflow automatisé, une campagne pilotée ou un produit en ligne.

Un résultat tangible à présenter dès la fin.

Support accessible à vie

Replays, supports écrits et ressources restent accessibles après la formation, pour réviser et approfondir à votre rythme.

Vous progressez sans jamais rester bloqué.

Vous repartez avec…

Tout ce que vous conservez après la formation, pour continuer à progresser en autonomie.

Des cas concrets appliqués en formation

Vous travaillez sur vos propres cas d'usage, pas sur des exemples génériques.

Cas pratiques corrigés

Vos exercices corrigés et commentés par le formateur.

Templates & prompts prêts à l'emploi

Les modèles utilisés en formation, réutilisables dès le lendemain.

Attestation de fin de formation

Remise à l'issue du parcours, avec le détail des compétences travaillées.

Ce que disent nos apprenants

Avis vérifiés Trustpilot
Étoiles de note des avis clients

L'expertise et le professionnalisme de Terence m'ont permis de repenser l'utilisation du marketing digital au service du business.

FD
Frederic D
Lead Media Buyer
Avis vérifié
Étoiles de note des avis clients

Cette formation était très bien adaptée à nos besoins. Terence a été très à l'écoute de nos attentes et a su enrichir les échanges par ses conseils, son expertise et de nombreux exemples concrets. Une expérience très enrichissante que je recommande !

CB
Coline B
Cheffe de projet marketing
Avis vérifié
Étoiles de note des avis clients

Le formateur est vraiment attentif : il prend le temps d'expliquer chaque notion, s'adapte au niveau de chacun et reste disponible pour répondre aux questions tout au long de la formation. Le contenu est clair, concret et bien structuré, ce qui permet de vraiment progresser sur ces sujets même en partant de zéro. Je recommande cette formation à toute personne qui souhaite se former sérieusement à l'automatisation et aux agents IA.

FA
Farida
Consultante IT
Avis vérifié

Questions fréquentes

Cette formation est-elle finçable ?

Selon votre statut, elle peut être prise en charge par votre OPCO ou par le plan de développement des compétences de votre entreprise. Un conseiller monte le dossier avec vous et vous répond sous 24 h ouvrées.

Faut-il des prérequis techniques ?

Les prérequis exacts sont indiqués dans la section Modalités pratiques de cette page. La plupart de nos formations s'adressent à des profils non techniques : il suffit d'être à l'aise avec un ordinateur et le web.

Le contenu s'adapte-t-il à mon métier ?

Oui. Vous travaillez sur vos propres cas d'usage pendant toute la formation, et le programme est ajusté à votre secteur après un échange préalable avec un conseiller pédagogique.

Puis-je former plusieurs personnes de mon équipe ?

Oui. Cette formation existe en format intra-entreprise, dans vos locaux ou à distance, avec un programme adapté à vos enjeux. Le tarif intra est indiqué en haut de cette page ; contactez-nous pour un devis personnalisé.

Que reste-t-il après la formation ?

Vous conservez l'accès aux supports, aux replays et aux ressources pédagogiques. Une attestation de fin de formation vous est remise, ainsi que le certificat lorsque la formation est certifiante.

Financement

Faites financer votre formation

OPCO, plan de développement des compétences, France Travail : selon votre situation, votre formation peut être prise en charge. Un conseiller monte votre dossier avec vous.

Nous contacter ↗