Figma - avancé et Design Systems

À l'issue de la formation, les participants seront capables de :
? Structurer un design system scalable en utilisant les variables (tokens) et des conventions de nommage adaptées
? Créer, organiser et maintenir des librairies Figma effi aces (mono vs multi-librairies, gouvernance, partage)
? Concevoir des composants avancés intégrant variants, propriétés et comportements interactifs
? Mettre en place des interfaces responsives via Auto Layout, Constraints et gestion des tailles
? Implémenter des logiques de theming (multi-marques, dark mode) à l'aide des variables
? Optimiser la collaboration avec les développeurs grâce au Dev Mode et aux bonnes pratiques de transmission
? Exploiter les capacités de prototypage assisté par IA avec Figma Make dans des cas d'usage pertinents
? Comprendre le fonctionnement du MCP et préparer un design system “MCP-ready” pour la génération de code
? Identifi er les usages des plugins, API et automatisations pour étendre les capacités de Figma
? Améliorer son workflow de conception grâce aux bonnes pratiques, outils et automatisations avancées
 

Jour 1 : Maîtriser les variables et créer une librairie
? Introduction aux variables
- Design tokens ou variables ?
- Gestion des tokens/variables sur Figma
- Différents types de variables
- Créer des variables 
- Variables typographiques
- Comprendre la complémentarité variables + styles pour la typographie composite
Sur un cas fi l rouge, créer les fondations de son UI Kit en utilisant des variables 
? Conventions de nommage : bonnes pratiques de structuration des variables - scoping des variables 
? Conception Responsive : maîtriser les Auto-layouts et des Constraints pour une conception responsive efficace
? Atelier : utiliser les variables pour gérer le Theming
? Tips : Scinder une librairie en 2 / Administrer une équipe dans Figma / Gestion des librairies / Optimisation du Workflow dans Figma 

Jour 2 : Conception des comportements, propriétés, logiques des composants
? Constraints et 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
? Interactive components : appliquer des comportements interactifs intégrés à ses variants
? Introduction au Dev Mode et bonne pratiques designers / devs 
? Tips : Collaboration et transmission du travail de Design - Optimisation du Workflow dans Figma 

Jour 3 : Prototypage IA & MCP
Figma Make : prototypage IA avancé
- État des lieux 
- 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 
Figma MCP Server : comprendre ce qui change vraiment
- Architecture MCP 
- Mettre en place un environnement fonctionnel entre Figma et Claude
- Ce que le MCP expose 
- Checklist « fichier MCP-ready » : bonnes pratiques
- Créer des éléments en étant assisté par l'IA
- Démonstration : un dev connecte Claude Code au MCP 
? Tips : Variables dans le MCP / Sécurité et gouvernance / Cartographie des outils /  Apprendre à prompter correctement pour modifier ou créer