Vous avez peut-être appris à utiliser Figma avec nos formateurs, à l’agence ou confortablement installés chez vous. Vous maîtrisez la création de composants, les variantes et les auto layout, vos bibliothèques sont partagées et vos fichiers sont propres.
Pourtant, depuis quelques mois, vous voyez apparaître sur vos réseaux sociaux pléthore d’exemples de développeurs ou de designers. Ils se targuent d’avoir généré des interfaces graphiques et des pages web avec Claude Code ou Lovable, sans être passés par la case Figma. Alors vous vous demandez quel sera l’avenir de Figma dans vos projets. Figurez-vous que cette question a fait l’objet de vifs débats à l’agence, puis nous avons tranché.
À la rentrée 2026, nous avons retiré les formations Figma de notre catalogue, après plus de six ans et plus de 80 sessions de formation dispensées. Alors attention, Figma reste un très bon outil, mais nous décidons aujourd’hui de confier une partie de la conception d’interface à l’IA. Elle s’appuie pour cela sur des fichiers qu’elle sait lire : des tokens au format W3C et des composants décrits en JSON.
2016 : quitter Photoshop et Axure pour passer sur Figma
Au début des années 2010, une maquette d’interface se dessinait encore dans Photoshop. Nous détournions tous un logiciel de retouche photo pour habiller nos wireframes, et c’était le standard. Moi-même, j’ai passé d’innombrables heures à découper et exporter les « assets » de Photoshop pour les fournir aux développeurs.
Sketch, lancé en 2010, a popularisé un outil vectoriel dédié à l’interface. La chaîne restait éclatée : on dessinait dans Sketch, on recueillait les commentaires dans InVision et on construisait les prototypes dynamiques ailleurs.
Chez Usabilis, cet « ailleurs » s’appelait Axure. En 2010, notre comparatif des outils de prototypage le présentait comme le meilleur compromis entre prototypage fonctionnel et architecture de l’information. Sur les logiciels métiers chargés de règles de gestion, nous l’utilisions pour simuler des conditions et des états.
Pour résumer, les UX designers et les ergonomes travaillaient sur Axure, les UI designers sur Photoshop.
Figma sort en version 1.0 en 2016, après une préversion sur invitation fin 2015. Nous l’avons adopté dès cette année-là. L’espace de travail était directement accessible dans un navigateur, sans rien à installer. Et puis le client pouvait commenter un écran pendant que le designer le modifiait. Plus besoin d’échanger par mail des exports et des versions « finale_v3 ». C’était le rêve.
En novembre 2018, notre guide sur le design system le recommandait déjà : pour construire une bibliothèque de composants, « rien de mieux qu’un outil dédié tel que Figma ». Sketch et InVision y occupaient pourtant encore la plupart des pages.
Figma avait une faiblesse que nous signalions en 2021. Il restait en deçà dès qu’il fallait un prototype réellement testable, avec ses micro-interactions et ses champs de saisie. Nous conseillions alors le combo Figma et Axure ou Protopie pour les prototypes destinés aux tests utilisateurs.
2019-2021 : la formation Figma, puis la formation design system
Nous avons ouvert notre première formation Figma en 2019. À l’automne 2020, quand le confinement nous a obligés à basculer tout le catalogue à distance, elle a fait partie des deux formations outils conçues d’emblée pour le distanciel.
Son programme de l’époque tenait en deux jours, avec 80 % de pratique. Il s’adressait aux designers, mais aussi aux développeurs, aux chefs de projet et aux responsables marketing. On y apprenait à créer des styles de couleur et de texte, des composants maîtres et leurs instances, l’auto layout, puis un prototype interactif.
Deux modules annonçaient déjà la suite : l’un portait sur les règles de nommage des composants, l’autre sur la préparation des fichiers pour le développeur, avec l’inspection du code dans Figma.
En mars 2021, Asma Lazreg, qui animait la formation, racontait que la création d’une librairie de composants était le moment préféré des participants. Elle évaluait surtout leur façon de construire : composants, gestion de l’auto layout, respect des conventions de nommage. Grâce aux fichiers partagés, elle repérait en direct les stagiaires qui hésitaient.
La même année, nous publiions « Figma, un outil d’excellence pour vos design systems » et lancions une formation design system de trois jours construite sur Figma. Son formateur, Geoffrey Rebillou, avait mené auparavant, sur Sketch, Abstract et Confluence, un design system automobile qui couvrait plus de 1 000 écrans. En 2022, il constatait que les participants découvraient d’abord tout ce dont Figma était capable.
Dans le Design Tools Survey 2024 d’UX Tools, qui a interrogé 2 220 professionnels, Figma atteint 82,3 % de part d’usage en design d’interface. Sketch, qui dominait le marché cinq ans plus tôt, est devenu marginal.
Figma a appris à nos équipes, et à nos stagiaires, la rigueur dans la construction des maquettes et des composants. Un composant Figma bien conçu oblige à penser ses variantes, ses propriétés et ses états, et son comportement quand le contenu s’allonge. L’auto layout reproduit la logique des boîtes CSS, et les instances héritent des modifications du composant maître.
Notre article de 2024 « Pourquoi se former à Figma ? » mettait en avant la collaboration en temps réel, la communauté et les composants partagés, sans mentionner l’IA.
2023-2025 : l’arrivée des design tokens
En 2023, Figma lance les variables et le Dev Mode. Les variables reprennent la logique des design tokens. Une couleur, un espacement ou un rayon deviennent des décisions nommées, réutilisées et déclinées par modes : clair, sombre, marque A, marque B.
Pendant deux ans, ces tokens sont restés liés à des formats propriétaires. Chaque outil exportait son propre JSON, et il fallait des plugins comme Tokens Studio ou des scripts maison pour les faire passer dans le code. Les équipes qui gèrent plusieurs marques dans un même design system devaient refaire cette conversion à chaque synchronisation.
Le 28 octobre 2025, le Design Tokens Community Group du W3C publie la première version stable de sa spécification, le Design Tokens Format Module 2025.10. Adobe, Google, Microsoft, Meta, Shopify, Salesforce et Figma participent à ses travaux. Un token au format W3C ressemble à ceci :
json
{
"color": {
"action-primary": {
"$type": "color",
"$value": "#0055CC",
"$description": "Fond du bouton d'action principal"
}
}
}
Ce fichier ne dépend d’aucun logiciel. Style Dictionary le transforme en variables CSS, en thème Tailwind ou en constantes iOS. Un assistant IA le lit sans avoir à interpréter une image.
La spécification distingue aussi les tokens primitifs, qui portent une valeur brute (blue-600), des tokens sémantiques, qui portent une intention (action-primary). Un token sémantique référence un primitif par un alias, noté {color.blue-600}. Quand la marque change de bleu, on modifie une seule ligne, et tous les boutons d’action suivent, dans le code comme dans les écrans générés.
À partir de là, la source de vérité d’un design system pouvait quitter l’outil de maquette pour un dépôt de fichiers texte. Nous décrivions déjà cette organisation dans notre méthode pour documenter un design system en docs-as-code.
Figma a annoncé à sa conférence Schema, en octobre 2025, l’import et l’export des variables au format W3C, aujourd’hui documentés dans son aide officielle. Le support reste partiel. Couleurs, dimensions, durées, nombres, familles de police et chaînes passent, les booléens via une extension propre à Figma. Les tokens composites (typographie, ombres) ne figurent pas dans la liste.
Nos premiers tests avec les LLM et le serveur MCP de Figma
En juin 2025, Figma lance un serveur MCP (Model Context Protocol), qui permet à un assistant IA de lire les données d’une application. L’agent lit la maquette et génère le code correspondant. Nos premiers essais avec ce serveur MCP ont été peu concluants.
Le principe du serveur MCP de Figma : l’assistant de code lit la sélection dans le fichier Figma pour générer l’interface. Source : Figma, « Introducing our MCP server » (juin 2025).
Pour obtenir un code fidèle, la documentation de Figma recommande :
des composants pour tout élément répété ;
des variables pour les couleurs et les espacements ;
des calques nommés de façon sémantique, jamais « Frame1268 » ;
de l’auto layout plutôt que du positionnement absolu ;
Code Connect, qui relie chaque composant Figma au composant réel du code, présenté comme le premier levier de qualité.
Avec Code Connect, l’agent ne redessine pas la carte à partir de la maquette : il importe le composant Card qui existe déjà dans le code. Source : Figma, « Design context, everywhere you build » (septembre 2025).
Cette liste ressemble trait pour trait au programme de notre formation de 2020 : composants, règles de nommage, auto layout. Le serveur MCP donne de bons résultats quand le fichier Figma est déjà rangé comme du code et relié au code. Un fichier d’exploration du quotidien, avec ses cadres dupliqués et ses calques anonymes, envoie à l’agent un arbre de nœuds très lourd.
Depuis Figma, l’agent lit la description d’un dessin : des cadres, des positions, des couleurs, parfois une capture d’écran. Depuis un dépôt de design system, il lit directement les décisions : quel token appliquer, quel composant importer, quelles propriétés il accepte.
Dans notre bilan du Dev Mode, publié en juin 2026, nous relevions deux autres limites. L’IA ne voit pas le rendu final de son propre code, et ne peut donc pas vérifier qu’un style global écrase le sien. Face à un cas que Code Connect ne couvre pas, elle invente des styles ad hoc. Code Connect est par ailleurs réservé aux plans Organization et Enterprise.
Les générateurs qui se passent de Figma ont un autre défaut, que nous avons observé sur Claude Design au printemps 2026. Le rendu visuel convainc souvent, mais l’intégration à un design system existant reste fragile. Il faut ensuite reprendre à la main la cohérence des composants et des tokens.
Les quotas limitent aussi l’usage en équipe : avec un siège en lecture seule, un compte Professional plafonne à six appels d’outils par mois.
Pourquoi une IA produit une meilleure interface à partir de tokens et de composants JSON
Ce que montrent les benchmarks
En 2024, l’équipe de Chenglei Si, à Stanford, a publié Design2Code. Ce benchmark demande à des modèles de reproduire 484 pages web réelles à partir de leur capture d’écran. Les modèles multimodaux testés peinent surtout à restituer les éléments visuels et la mise en page.
Les travaux qui progressent sur ce terrain passent par du code structuré. Hugging Face a entraîné ses modèles sur WebSight, un jeu synthétique de 2 millions de paires capture d’écran et code HTML Tailwind. UICoder, publié en 2024 par Carnegie Mellon et Apple, améliore la génération d’interfaces en filtrant les résultats avec un compilateur et un modèle de vision.
Ces benchmarks évaluent la reproduction de pages existantes, sans juger la qualité de conception. Ils montrent les limites d’une IA qui part d’une image, sans mesurer directement ce qu’apporterait une entrée structurée comme des tokens ou un contrat de composant.
Le composant décrit comme une API
Face à des pixels, un modèle de langage doit deviner l’intention du designer ; un contrat écrit lui laisse beaucoup moins de marge. Prenez un bouton décrit en JSON ou en TypeScript : trois variantes, deux tailles, un état désactivé, une icône optionnelle. L’assistant connaît la liste exacte des options.
Nathan Curtis décrit ce changement dans « Components as Data » (septembre 2025). Son travail consiste désormais à consigner les décisions de composants sous forme de données, indépendantes de toute plateforme, Figma compris. Ces données alimentent ensuite Figma et le code.
Plusieurs générateurs d’interface fonctionnent sur ce principe. v0, de Vercel, génère du React à partir des composants shadcn/ui. Lovable produit une application complète et annonce 500 millions de dollars de revenu annualisé en juin 2026 (chiffre de l’éditeur). Google Stitch, lancé en mai 2025, lit un fichier DESIGN.md qui combine tokens et règles d’usage en Markdown.
DESIGN.md, publié en open source par Google en avril 2026 : les tokens en tête de fichier, puis la justification des choix de style en langage naturel. Source : Google, blog Google Labs (2026).
Brad Frost, l’auteur de l’Atomic Design, arrive à la même conclusion dans « Agentic Design Systems in 2026 ». Selon lui, une génération par IA reste cohérente quand les composants du design system la contraignent. Chez nous, ce rôle revient à des tokens W3C et à une bibliothèque de composants typés, versionnés dans un dépôt GitHub.
Rentrée 2026 : ce qui remplace nos formations Figma
Nous avons retiré la formation Figma parce que la plupart des praticiens que nous rencontrons en France y sont aujourd’hui correctement formés. Nos nouvelles formations portent sur un autre besoin : rendre un design system lisible par Claude Code, Codex ou Cursor.
Notre formation Design System pour l’IA répond à cette demande en trois jours. Les participants structurent leurs tokens selon le standard W3C et écrivent des contrats de données en JSON. Ils documentent leurs composants en Markdown, organisent un dépôt GitHub et le connectent à un assistant via MCP. La pratique de Figma reste un prérequis.
Pour le prototypage, la formation IA et prototypage part de l’architecture de l’information et d’un zoning basse définition. L’interface est ensuite générée avec Lovable, puis évaluée avec les critères ergonomiques de Bastien et Scapin. Le prototype finit dans Figma, importé avec le plugin HTML to Design, pour les ajustements visuels.
Par où commencer si votre design system vit encore dans Figma ?
Vous n’avez pas besoin de tout reconstruire pour rendre votre design system lisible par une IA. La transition que nous enseignons en formation suit quatre étapes.
Auditez vos variables Figma. Séparez les tokens primitifs (la valeur brute d’une couleur) des tokens sémantiques (la couleur d’un bouton d’action), et nommez-les selon leur usage.
Exportez-les au format W3C, avec l’export natif de Figma ou un plugin, puis versionnez le fichier dans un dépôt. À partir de là, c’est ce fichier qui fait foi.
Décrivez vos composants comme des contrats : propriétés, variantes, états, règles d’usage et d’accessibilité, en JSON ou en Markdown selon le public.
Reliez ce dépôt à vos outils : Style Dictionary pour le code, Code Connect pour Figma, un serveur MCP pour les assistants.
Faut-il encore un design system quand une IA génère les écrans ? Oui : sans tokens ni composants documentés, chaque génération réinvente les couleurs, les espacements et les libellés.
Que reste-t-il à Figma ?
Figma reste l’outil le plus confortable pour poser les fondations visuelles d’un design system : explorer une palette, tester une échelle typographique, comparer des directions graphiques sur un canevas infini. Le code se prête mal à ce travail d’exploration.
Le peaufinage manuel se fait aussi plus facilement dans Figma. Une interface générée par IA pose vite la structure d’un écran. Les micro-interactions, les illustrations sur mesure et les derniers réglages de hiérarchie visuelle demandent encore l’œil d’un designer.
Pour les ateliers de co-conception, FigJam garde aussi sa place. Nous en détaillions les usages en atelier dans un article dédié, et les générateurs d’interface ne couvrent pas ce besoin.
Les compétences acquises sur Figma se transfèrent. Un designer qui sait construire un composant à variantes, avec des propriétés booléennes et des états, sait déjà ce qu’un contrat de composant doit contenir. Il lui reste à l’écrire dans un format que les développeurs et les assistants IA partagent.
Dans ce modèle, le dépôt de tokens et de composants sert de référence au développement, et Figma devient un outil de travail parmi d’autres. Une mission de conception de design system peut partir d’une maquette existante et aboutir à des fichiers exploitables par les développeurs et leurs assistants IA.
Figma a-t-il tendu le bâton pour se faire battre ?
Figma a passé dix ans à rapprocher le dessin du code. L’auto layout imite les boîtes CSS, les variables imitent les tokens, le Dev Mode traduit les calques en propriétés. Ces données structurées sont aussi celles dont un générateur d’interface a besoin.
Et vous, la maquette Figma fait-elle encore foi avant le développement, ou vos équipes sont-elles déjà passées directement au code ?
