Logo Laptop  MENU
Formations

UI Design

UI Design

Le processus complet d’un projet UI, de la création d’identité visuelle à la livraison d’interfaces cohérentes, accessibles et responsables avec les outils Figma Make, Motion, Weave.

En bref

En 5 jours, passez du brief au prototype en mobilisant les fondamentaux de l’UX et de l’UI : identité visuelle, design émotionnel, composants, responsive, accessibilité et éco-conception. Expérimentez le vibe coding avec les outils IA de Figma (Make, Weave, Motion) pour accélérer votre production. Apprenez à collaborer avec les développeurs et à défendre vos choix lors d’une soutenance devant un jury, comme face à un vrai client. Repartez avec un projet complet et les clés pour créer des produits différenciants.

Vibe-coding UI Design Eco-conception Branding Design produit Design System Figma Interfaces Cas pratique Ergonomie

Durée

5 jours (40h) / 9h à 18h

Participants

16 max

Lieu

Paris ou à distance

Proch. session

05 au 09 Octobre 2026

Financement

OPCO, France Travail

Financements

Prix

2 750 €HT 3 300 €TTC

Note de nos apprenants

5/5

Voir les avis
Prochaines sessions
Postuler

Programme

UI Design

Vibe-coding UI Design Eco-conception Branding Design produit Design System Figma Interfaces Cas pratique Ergonomie

Cette formation couvre le processus complet d’un projet UI — ancré dans les principes UX — du cadrage créatif à la soutenance finale.

Chaque journée alterne apports théoriques et ateliers pratiques sur Figma autour d’un projet fil rouge réaliste (site vitrine ou app mobile). Vous y construirez une identité visuelle, des maquettes HD, un système de composants et un prototype interactif. Vous découvrirez le vibe coding appliqué au design : générer des écrans par prompt avec Figma Make, puis itérer, critiquer et affiner le résultat.

Les principes UX (lois de la Gestalt, critères de Bastien & Scapin, design émotionnel de Don Norman) servent de socle à chaque décision d’interface. Les sujets transversaux — accessibilité (RGAA), éco-conception, tendances UI — sont intégrés à chaque étape plutôt que traités à part.

La formation se conclut par le handoff développeur et une soutenance orale du projet devant le groupe, simulant une présentation client : apprendre à donner du sens à ses choix et à convaincre ses commanditaires.

Une boîte à outils (plugins, ressources, comptes à suivre) est partagée pour continuer à progresser en autonomie.

Vibe-coding UI Design Eco-conception Branding Design produit Design System Figma Interfaces Cas pratique Ergonomie
  • Jour 1 Cadrer un projet : branding, identité visuelle et différenciation

    Les fondamentaux du branding et leur rôle en UI Design

    • Positionnement et différenciation de marque
    • Comprendre pourquoi le branding conditionne les décisions d’interface
    • Les briques de l’identité visuelle : logo, couleurs, typographies, formes et iconographie
    • Images, illustrations et vidéos au service de l’identité

    Prendre en main l’écosystème Figma

    • Découverte de Figma Design et FigJam
    • Collaboration, idéation et organisation des fichiers

    Lire et décoder un brief

    • Cerner le secteur et les enjeux à partir d’un brief
    • Enrichir sa recherche avec les bons mots-clés
    • Réaliser un benchmark ciblé du secteur

    Atelier fil rouge : Cadrage & direction créative

    • Choix du projet – site vitrine ou application mobile – à partir de deux briefs
    • Conception d’un moodboard et définition d’une première intention visuelle
    • Réalisation d’un benchmark ciblé
  • Jour 2 Poser les fondations : design émotionnel et conception d'interface

    Design émotionnel

    • Les trois niveaux du design émotionnel de Don Norman : viscéral, comportemental et réflexif
    • Psychologie des couleurs et des formes
    • Construire une hiérarchie émotionnelle dans une interface

    Construire les fondations d’un projet dans Figma

    • Styles de couleurs et hiérarchie typographique
    • Grilles, espacements et principes de mise en page
    • Poser des fondations graphiques cohérentes et réutilisables

    Accessibilité

    • Les règles essentielles du RGAA
    • Intégrer les principes d’accessibilité dès la conception visuelle

    Générer une première maquette avec Figma Make

    • De l’idée à une première maquette haute définition
    • Découverte d’un workflow de conception par vibe coding
    • Générer, affiner et critiquer une proposition par le prompt

    Atelier fil rouge : Fondations & première maquette

    • Mise en place des styles et fondations du projet
    • Génération de premiers écrans via Figma Make
    • Itérations et amélioration des propositions par le prompt
  • Jour 3 Structurer : mise en page, responsive et consistance visuelle

    Tendances actuelles en UI

    • Découverte et analyse des tendances contemporaines
    • Développer son regard critique et enrichir sa culture visuelle

    Mise en page dans Figma Design

    • Structurer et hiérarchiser ses écrans
    • Organiser efficacement ses éléments d’interface

    Atomic Design et composants

    • Comprendre la logique de l’Atomic Design
    • Créer, organiser et réutiliser des composants
    • Assurer la cohérence entre les différents écrans

    Design tactile et responsive

    • Concevoir pour différents supports
    • Adapter les interfaces aux usages web, mobile et tablette

    Produire ses assets UI

    • Trouver, créer et décliner des visuels
    • Utiliser Figma Weave pour assurer la cohérence entre les différents assets
    • Explorer Figma Community et les principales ressources utiles

    Atelier fil rouge : Écrans clés & système de composants

    • Amélioration et déclinaison des écrans principaux du projet
    • Création des composants et adaptation responsive
    • Production et mise en cohérence des assets avec Figma Weave
  • Jour 4 Donner vie et sens : micro-interactions, éco-conception et présentation

    Les micro-interactions comme vecteur émotionnel

    • Comprendre leur rôle dans l’expérience et la perception d’une interface
    • Donner du feedback, guider et engager l’utilisateur

    Prototyper au plus près du réel dans Figma Design

    • Créer des interactions et des parcours réalistes
    • Faciliter les tests utilisateurs et la projection dans l’expérience
    • Travailler le réalisme perçu d’un prototype

    Créer des animations avancées avec Figma Motion

    • Enrichir ses interfaces par le mouvement
    • Concevoir des animations cohérentes avec l’identité et l’expérience

    Éco-conception appliquée à la conception visuelle

    • Comprendre les principaux enjeux de sobriété numérique
    • Identifier les choix visuels ayant un impact sur la conception responsable
    • Effectuer une passe d’éco-conception sur une interface

    Présenter son travail en lui donnant du sens

    • Argumenter ses choix de conception
    • Construire un récit autour de son projet
    • Créer des slides de présentation efficaces

    Atelier fil rouge : Interactions & récit

    • Ajout de micro-interactions et d’animations sur les écrans clés
    • Passe d’éco-conception sur le projet
    • Construction du fil narratif de la présentation
  • Jour 5 Livrer et transmettre : collaboration dev, restitution et progression

    Prototypage interactif avancé

    • Finaliser les interactions et le parcours du prototype
    • Vérifier la cohérence globale de l’expérience

    Collaborer et transmettre aux développeurs

    • Les bonnes pratiques de handoff
    • Préparer et documenter ses fichiers
    • QA : accompagner l’intégration et contrôler la qualité de la réalisation

    Design System

    • Structuration d’un Design System
    • Adapter ses fondations et composants à différents univers de marque
    • Comprendre les enjeux du multi-branding

    Design-to-code

    • Comprendre et lire ce que Figma produit
    • Explorer le passage de la maquette au code
    • Travailler avec un LLM tel que Claude ou Cursor pour générer du code à partir d’une maquette et de données structurées / JSON

    Continuer à progresser

    • Comptes à suivre et sites de référence
    • Ressources et outils pour développer sa pratique
    • Ouverture et débat sur l’évolution du métier et des outils

    Atelier fil rouge : Restitution finale

    • Finalisation du prototype
    • Préparation du handoff
    • Finalisation des slides de présentation
    • Présentation du projet et restitution collective
  • +30j Suivi post formation : Webinar de 2h

    Suivi post formation : Webinar de 2h 

    Un mois après la conclusion de votre formation, nous vous proposons de vous rassembler en promotion avec votre intervenant pour un webinar de suivi. Cette session, de deux heures en visioconférence, sera l’occasion de réaliser un retour d’expérience (REX) approfondi, permettant à chacun de partager ses progrès, ses défis et ses réussites depuis la fin de la formation. Cela vous permettra de poser toutes les questions qui ont pu émerger lors de la mise en application des compétences acquises.

    Ce webinar devrait ainsi renforcer votre apprentissage, approfondir votre compréhension et vous aider à intégrer plus efficacement les connaissances et les compétences développées durant notre programme. 

    Nous sommes convaincus que cette session enrichira votre expérience d’apprentissage et consolidera les liens au sein de notre communauté de professionnels.

Photographie d'un apprenant aidé par l'intervenant en formation UI Design : Kevin Mercier
Photographie de 3 apprenants s'entraidant pendant la formation UI Design : Kevin Mercier
Photographie de 2 apprenantes concentrées sur l'intervenant en formation UI Design : Kevin Mercier
Photographie de 2 apprenantes concentrées pendant l'atelier sur figma avec l'intervenant en formation UI Design : Kevin Mercier

Prochaines sessions

05 au 09 Octobre 2026

Postuler
À distance

23 au 27 Novembre 2026

Postuler
Paris

01 au 05 Février 2027

Postuler
Paris

Les intervenants

Voir tous les intervenants du laptop

Modalités

Toute la FAQ

« Formation complète, avec de la théorie et de la pratique, des formateurs très pédagogues et sympathiques. Je recommande ! »

Camille Delabre

Camille Delabre

Ui designer & artistic director

« J’ai beaucoup apprécié la qualité de l’animation et les thématiques abordées afin de bien saisir les bases mais aussi pour pouvoir voir plus loin dans sa réflexion et pratique »

Julia Gualdi

Julia Gualdi

UI designer

« Très satisfait à la fois du formateur et du contenu de la formation »

 

Michaël Mérignargues

Michaël Mérignargues

Graphic Designer / Illustrator

« La formation correspond tout à fait à l’idée que je m’en faisais. Interactive, dynamique et avec des modules permettant d’être dans l’opérationnel. »

Rémi Peyre

Rémi Peyre

Directeur UX & design

« Claire, nette, concise, pas trop longue ni trop courte, les formateurs sont top, le lieu et tout ce qui va avec est top aussi, la possibilité de faire en distanciel.»

Laurie CHONAVEL

Laurie CHONAVEL

UX/UI Designer - Session Janvier 2025

« Le formateur est très compétent (pédagogue et expert de son sujet) et le contenu est très complet »

Morgane MASSIMI

Morgane MASSIMI

Product Designer - Session Janvier 2025

« Formation géniale, intervenant de qualité, vraiment je suis super contente. J’ai appris énormément de choses.»

Julie POUPAT

Julie POUPAT

Product Designer - Session Janvier 2025

« La qualité des explications et le sujet UI abordé en profondeur.»

Elise TRUONG

Product Owner - Session Juin 2025

« Très réticente au début de faire une formation en visio pendant une semaine mais le fait d’être en petit groupe permet une bonne interaction avec l’animateur et de suivre un planning rythmé m’a permis de progresser en UI design L’avantage du Laptop est de rencontré des animateurs qui n’hésitent pas à partager leurs expériences, la manière dont il travaille sur leur projet »

Virginia DELANSAY

Virginia DELANSAY

UX/UI Designer - Session Février 2026

Communauté

Rejoignez les Designers de Laptop

Connectez-vous

FAQ

Les questions fréquentes

Parcourir la FAQ
Dernière modification de cette page : 09-09-2026 à 16:32:33

Devenir membre du Laptop club

Rejoindre la communauté

carte membre

👉 Découvrez nos formations IA mises à jour tous les mois : concevoir avec l'IA tout en maintenant l’humain au centre du processus créatif ✨

En savoir plus