Logo Laptop  MENU
Formations

Figma Avancé & Design systems

Figma Avancé & Design systems

Faire évoluer ses pratiques Figma : prototypage intelligent, variables, design systems scalables et nouveaux usages IA

En bref

Dans cette formation vous apprendrez à maîtriser les usages avancés de Figma pour concevoir, structurer et faire évoluer des interfaces à l’échelle d’un design system.

Nouveauté mars 2026 – Un jour entier dédié à l’IA et au MCP : vous explorez Figma Make pour le prototypage génératif, découvrez comment connecter votre design system au MCP Server, et créez vos premiers plugins sur mesure pour étendre Figma selon vos besoins.

Vibe-coding Workflows IA PromptEngineering Design tokens Prototypage avancé Variables Composants Complexes Librairies Design System

Durée

3 jours (24h) / 9h à 18h

Participants

12 max

Lieu

Paris ou à distance

Proch. session

04 au 06 Novembre 2026

Financement

OPCO, France Travail

Financements

Prix

2 000 €HT 2 400 €TTC

Note de nos apprenants

4.8/5

Voir les avis
Prochaines sessions
Postuler

Programme

Figma Avancé & Design systems

Vibe-coding Workflows IA PromptEngineering Design tokens Prototypage avancé Variables Composants Complexes Librairies Design System

À travers un cas fil rouge, vous construisez les fondations d’un UI Kit robuste en s’appuyant sur les variables (tokens), les composants avancés et les logiques de structuration (primitives, sémantiques, spécifiques). Vous apprendrez à gérer des systèmes complexes (theming, multi-marques, dark mode) tout en garantissant cohérence, maintenabilité et performance.

La formation approfondit également la conception de composants dynamiques et interactifs (variants, properties, comportements) ainsi que les principes de responsive design via Auto Layout et Constraints.

Une attention particulière est portée à la collaboration avec les développeurs (Dev Mode, transmission, bonnes pratiques Design ↔ Dev) et à l’optimisation des workflows (librairies, organisation, gouvernance).

Enfin, vous découvrirez les nouvelles capacités de Figma liées à l’intelligence artificielle (Figma Make) et au MCP (Model Context Protocol), afin d’anticiper les évolutions du design system vers des environnements pilotés par la donnée et génératifs. Ils explorent également les bases de création de plugins pour étendre Figma selon leurs besoins.

Vibe-coding Workflows IA PromptEngineering Design tokens Prototypage avancé Variables Composants Complexes Librairies Design System
  • Jour 1 Maîtriser les variables et créer une librairie

    • Introduction aux variables
      • Design tokens ou variables ?
      • Les outils de gestion des tokens / variables sur Figma
      • Les différents types de variables (colors, string, number)
      • Variables Primitives / Semantic / Component specific
      • Créer des variables (spacing, size, colors, radius, shadows)
      • Variables typographiques : créer et scoper ses variables de typo (font family, font size, line height, font weight) ; comprendre la complémentarité variables + styles pour la typographie composite
    • Sur un cas fil rouge, créer les fondations de son UI Kit en utilisant des variables : couleurs, tailles, espaces, typographies, organiser ses variables (primitives, semantic, component specific)
    • Conventions de nommage :
      • Bonnes pratiques de structuration des variables
      • Scoping des variables : limiter la portée d’une variable à des propriétés précises pour éviter les erreurs d’application et améliorer la lisibilité dans les panneaux
    • Conception Responsive : maîtriser les Auto-layouts et des Constraints pour une conception responsive efficace.
    • Atelier : utiliser les variables pour gérer le Theming (multibrand, dark mode…)
    • Tips :
      • Scinder une librairie en 2 : Déplacer des éléments d’une librairie à une autre sans casser les liens dans ses fichiers design
      • Administration d’une équipe dans Figma : gestion des droits, partage et autorisations, identification des points de vigilance.
      • Gestion des librairies: Comprendre les avantages et les inconvénients de One library vs Split libraries.
      • Optimisation du Workflow dans Figma : astuces, raccourcis et plug-ins pour optimiser le workflow dans Figma.
  • Jour 2 Conception des comportements, propriétés, logiques des composants

    • Constraints et de Autolayout : mise en application directions, wrap, min & max sizes…)
    • Variants : maîtriser les bonnes pratiques lors de la création de ses variants
    • Components properties : définir des propriétés à ses composants (text, boolean,swap)
    • Interactive components : appliquer des comportements interactifs intégrés à ses variants (ex : boutons qui passent de l’état « hover » à l’état « pressed »)
    • Introduction au Dev Mode et bonne pratiques designers / devs : S’initier aux meilleures pratiques pour une collaboration efficace entre designers et développeurs.
    • Tips : 
      • Collaboration et Transmission du Travail de Design : Apprendre à collaborer efficacement à travers le feedback et les Design Critique, ainsi que les intégrations dans Figma.
      • Optimisation du Workflow dans Figma : Maîtriser des astuces, raccourcis et plug-ins pour optimiser le workflow dans Figma.
  • Jour 3 Prototypage IA & MCP

    • Figma Make : prototypage IA avancé
      • État des lieux : ce que Make sait faire aujourd’hui et ses limites réelles avec un DS existant
      • Cas d’usage pertinents : exploration rapide d’idées, validation de concepts, communication auprès des parties prenantes
      • Connecter le contexte de styles de sa librairie pour maintenir la cohérence visuelle
      • Coller une frame existante dans Make pour la rendre interactive
      • Prompt engineering : structurer ses instructions pour cadrer les générations
      • Make kits : ce qui arrive prochainement et comment préparer son DS dès maintenant (nommage machine-readable, descriptions sur les variants)
    • Le Figma MCP Server : comprendre ce qui change vraiment
      • Architecture MCP : pourquoi l’IA reçoit des données structurées et non des pixels
      • Mettre en place un environnement fonctionnel entre Figma et Claude
      • Ce que le MCP expose : variables, composants, layout, tokens, annotations, Code Connect
      • Checklist « fichier MCP-ready » : bonnes pratiques à adopter immédiatement
      • Créer des éléments en étant assisté par l’IA : tokens, composants, layouts
      • Démonstration : un dev connecte Cursor ou Claude Code au MCP et génère du code à partir d’une frame 
    • Tips : 
      • Variables dans le MCP : pourquoi aligner les noms de variables Figma et code est critique pour la qualité du code généré
      • Sécurité et gouvernance : ce que le catalogue MCP de Figma implique en termes de contrôle des accès pour les admins
      • Cartographie des outils : Make / MCP / Plugin / API, comment choisir selon la situation
      • Apprendre à prompter correctement pour modifier ou créer : des tokens, des composants, des layouts.
  • ✔︎ Validation des acquis

    Les acquis de la formation seront validés au moyen :

    • Exercices évalués tout au long des 3 jours
Photo d'Ugo Jauffret intervenant formation Figma niveau 2
Photo de groupe de travail en formation UI
Image prise lors d'un workshop sur l'IA

Prochaines sessions

04 au 06 Novembre 2026

Postuler
Paris 🔒 Complète

16 au 18 Décembre 2026

Postuler
à distance

01 au 03 Mars 2027

Postuler
Paris

14 au 16 Juin 2027

Postuler
à distance

Les intervenants

Voir tous les intervenants du laptop

Modalités de la formation

Toute la FAQ

La qualité de la formation était excellente. Kévin Mercier a su créer un climat agréable et bienveillant tout au long des trois jours. Ses explications étaient très claires, avec un très bon niveau technique, et il a fait preuve de beaucoup de pédagogie

Cécile Fabre

L’intervenant, Kévin, était pédagogue, dévoué, investi et engagé tout au long de la formation. C’était un véritable plaisir d’apprendre et d’échanger avec lui

Gregory CHEVALLIER

Les exercices pratiques sont un véritable plus : c’est, selon moi, la meilleure manière d’apprendre.

Morgane PHILIPPEAU

Expérience très enrichissante. 3 jours de formation qui me donnent l’impression d’avoir acquis une méthode de travail et de nouvelles compétences qui vont me permettre d’être beaucoup plus performante dans mon travail très vite.

Agathe JARNOUX

Communauté

Rejoignez la communauté Le 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