AI Discipline | Ajouter une fonctionnalité à votre app à partir d'un proto Figma
JULES BOITEUX
Fondateur de Vibe Coding Academy
RÉMI GUYOT
Fondateur AI Discipline
Transformez un prototype Figma en fonctionnalité sans l'aide d’un développeur.
Les équipes Produit souffrent d'un goulot d'étranglement : trop de fonctionnalités restent dans Figma, faute de temps ou de ressources. L'IA change la donne en accélérant le passage du design au code.
Dans ce cours, vous apprendrez à utiliser le serveur MCP Figma dans Cursor pour transformer vos écrans Figma en code prêt à être intégré. Vous verrez aussi comment générer des fonctionnalités à partir d'un user flow FigJam ou d'un prototype Figma Make. Nous utiliserons des écrans de démo, mais tout s'applique à vos designs existants, professionnels ou personnels.
Que ce soit pour prototyper, amorcer un produit ou ajouter une fonctionnalité, vous découvrirez comment le serveur MCP Figma fluidifie le workflow design → code. Aucune compétence technique n'est requise. Vous maîtriserez Cursor et produirez un frontend professionnel sans être développeur.
À la fin de ce cours, vous saurez :
– Installer et configurer le serveur MCP Figma
– Maîtriser les fonctionnalités principales de Cursor
– Transformer un design (UI, FigJam, Make) en code fonctionnel
– Itérer rapidement sur une fonctionnalité à partir de vos maquettes
– Rebrander une application à partir d'un nouveau design system
What you’ll learn
Du design au code avec Figma et Cursor. Exploitez le MCP Figma pour coder depuis vos écrans, user flows FigJam ou prototypes Make
Comprenez l'intérêt, et les cas d'usage d'un workflow consistant à convertir des designs dans Figma en du code dans un IDE comme Cursor
Comprenez le fonctionnement et les fonctionnalités du server MCP Figma
Découvrez les bonnes pratiques pour structurer votre app afin que l’agent IA de Cursor génère du frontend aligné avec votre Design System
Maîtrisez la notion de serveur MCP, et apprenez à configurer le serveur MCP Figma
Générez votre premier prototype avec Figma Make
Transformez un prototype Figma Make et un user flow Figjam en fonctionnalités sur votre application
Prenez en main les fonctionnalités essentielles de Cursor
Apprenez à lancer une application de démonstration en local
Découvrez l’agent IA de Cursor et apprenez à créer des skills pour lui enseigner les meilleures pratiques de design.
Who this course is for
Product Designer
Product Manager / Product Owner
Software Engineer
✅ Livrez vos écrans Figma sans attendre
✅ Transformer vos écrans Figma en code
✅ Développer une app fidèle à votre DS
❌ Apprendre uniquement par la théorie
❌ Vous refusez d'utiliser l'IA de Figma
❌ Vous refusez d'utiliser Cursor
Prerequisites
Vous avez déjà créée des écrans dans Figma
"Pas besoin d'une connaissance poussée de Figma, mais vous devriez avoir déjà appréhendé l'outil Figma pour designer des écrans"
Vous devez avoir créée un compte sur Figma
Le serveur MCP de Figma est disponible sur tous les plans, y compris le gratuit. Le plan Pro est recommandé pour lever les limites d’usage.
Vous devez disposer d'un IDE type Cursor
Vous devez avoir installé un IDE type Cursor, VS Code,... Version payante recommandée (~20€) pour utiliser les derniers modèles de LLM
What's included
Live sessions
Learn directly from JULES BOITEUX & RÉMI GUYOT in a real-time, interactive format.
Corrections personnalisées
Chaque participant reçoit des corrections individualisées sur ses exercices par le formateur.
Accès aux enregistrements
Les sessions lives sont enregistrées et disponibles en replay tout au long de la formation
Canal Slack privé
Accès à un espace de partage exclusif au sein de AI Discipline.
Certificat de formation
Atteste de vos nouvelles compétences en IA appliquée au Product.
Une application de démo disponible dans un fichier Figma
Mettez en pratique les éléments de la Session 1 grâce à ce fichier Figma public. Les élèves disposeront d'un exemple concret d'application complète dans Figma, prête à l'emploi, servant de base pour être convertie en application fonctionnelle via le workflow design → code
Une méthode complète
Pour l'appliquer directement dans votre entreprise: installation du serveur MCP, utilisation de Figma Make, Transformation en écran Figma, Transformation de ces écrans en code dans Cursor
Des exemples de prototypes dans Figma Make et Figjam
Ces fichiers publics permettent de mettre en pratique immédiatement les apprentissages de la Session 2. Il est vivement recommandé d'appliquer le cours à votre propre cas d'usage, mais ces ressources vous garantissent une prise en main rapide des concepts enseignés.
Des prompts prêts à l'emploi
Les démonstrations utilisent des prompts génériques et prêts à l'emploi qui sont mis à disposition des élèves. Attention il n'est pas nécessaire d'appliquer ces prompts en particulier pour réaliser avec succès un workflow design to code
Maven Guarantee
This course is backed by the Maven Guarantee. Students are eligible for a full refund up until the halfway point of the course.
Course syllabus
3 live sessions • 15 lessons
Week 1
May
6
Formation AI Discipline | Transformer vos écrans Figma en application - Module 1
Introduction au workflow design → code avec Figma et Cursor
Documentation
Week 2
May
13
Formation AI Discipline | Transformer vos écrans Figma en application - Module 2
Développez des fonctionnalités avancées depuis Figma et FigJam
Documentation
Schedule
Live sessions
1 hr / week
Wed, May 6
10:30 AM—11:30 AM (UTC)
Wed, May 13
10:30 AM—11:30 AM (UTC)
Wed, May 20
10:30 AM—11:30 AM (UTC)
Un espace Slack unique pour échanger et apprendre ensemble
Frequently asked questions
€249
EUR