Figma relie enfin le code au canvas : les variables suivent désormais vos écrans importés

Ce que Figma vient de changer

Depuis le 16 juillet 2026, Figma a mis à jour un point précis mais crucial de son workflow code-vers-design. Quand vous ramenez du code sur le canvas, les couleurs, les styles de texte et les espacements se lient désormais à la plupart des variables déjà présentes dans votre fichier. Fini les valeurs codées en dur qui débarquent sans lien avec votre système existant.

Concrètement, cette mise à jour s'active dans trois situations :

• Coller un aperçu Figma Make sur le canvas sous forme de calques éditables
• Générer un design depuis du code via le serveur MCP de Figma
• Capturer une page web en direct sous forme de calques éditables avec l'extension Chrome

Autre bonus non négligeable : la plupart des frames arrivent désormais avec de l'auto layout appliqué. Résultat, les modifications redimensionnent et réorganisent le contenu automatiquement, sans passage obligé par un nettoyage manuel fastidieux.

Pourquoi ce détail technique change vraiment la donne

Jusqu'ici, ramener un écran codé (qu'il vienne d'un prototype Figma Make, d'un export MCP ou d'une capture de page web réelle) créait un problème classique : le design importé arrivait avec des valeurs figées. Une couleur hexadécimale brute au lieu d'une variable brand/primary. Un espacement en pixels au lieu d'un token spacing/md. Visuellement identique, mais totalement déconnecté du système de design.

Cette déconnexion obligeait les équipes à reconstruire manuellement les liens entre le design importé et les variables du fichier. Un travail invisible, répétitif, et propice aux erreurs : on oublie une couleur, on rate un espacement, et le design system se fragmente petit à petit.

Avec cette mise à jour, Figma inverse la logique. Le design importé se réattache automatiquement au système déjà en place. Autrement dit, on peut désormais faire l'aller-retour entre code et canvas sans perdre la cohérence du design system à chaque passage.

L'avis de Mazette.co

Chez Mazette.co, on utilise Figma tous les jours pour concevoir des interfaces qui finissent en production sur Webflow. Et on peut vous le dire : cette mise à jour cible un vrai point de friction, pas un gadget marketing.

Le fantasme du "code vers design vers code" est séduisant sur le papier, mais dans la pratique, il butait souvent sur ce détail technique agaçant : les valeurs importées ne parlaient pas la même langue que le design system. On se retrouvait à corriger à la main des couleurs qui auraient dû être des variables, ce qui allongeait le temps de handoff et introduisait des incohérences visuelles difficiles à repérer.

Ce que Figma corrige ici, c'est exactement ce genre de frottement silencieux qui coûte du temps sans jamais apparaître dans un planning. Et l'ajout de l'auto layout par défaut sur les frames importées est tout aussi bienvenu : c'est le genre de detail qui fait gagner une bonne demi-heure par écran repris, sans qu'on y pense jamais avant de s'y confronter.

Notre bémol : cette fonctionnalité reste dépendante de la qualité du système de variables déjà en place dans le fichier. Si votre design system Figma est mal structuré ou peu cohérent au départ, l'auto-matching aura forcément ses limites. C'est un rappel utile : les bons outils amplifient les bonnes pratiques, ils ne les remplacent pas. Pour les équipes qui structurent déjà proprement leurs variables Figma en amont d'un projet Webflow, ce genre d'automatisation change vraiment la vie au quotidien.

Notre verdict : bonne idée, exécution logique, et une preuve de plus que Figma investit sérieusement la continuité entre code et canvas plutôt que de la traiter comme un aller simple. Si vous jonglez régulièrement entre Figma Make, du code existant et des captures web, cette mise à jour va concrètement réduire votre charge de nettoyage.