Logo Laptop  MENU
Formations

Figma Avancé

Figma Avancé

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

07 au 09 Avril 2026

Financement

OPCO, France Travail

Financements

Prix

1 650 €HT 1 980 €TTC

Note de nos apprenants

4,4/5

Voir les avis
Prochaines sessions
Postuler

Programme

Figma Avancé

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

07 au 09 Avril 2026

Postuler
Paris

01 au 03 Juillet 2026

Postuler
à distance

04 au 06 Novembre 2026

Postuler
Paris

Les intervenants

Voir tous les intervenants du laptop

Modalités de la formation

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

Heures portes ouvertes

Parler avec l'équipe pédagogique

S'inscrire

FAQ

Les questions fréquentes

Parcourir la FAQ
Dernière modification de cette page : 25-01-2026 à 14:15:28

Devenir membre du Laptop club

Rejoindre la communauté

carte membre

👉Découvrez notre nouvelle formation Agentic Experience Design : concevoir avec l'IA tout en maintenant l’humain au centre du processus créatif ✨

En savoir plus