Le handoff design vers code a toujours eu un problème assez comique : il fonctionne surtout dans un sens.
Le 16 juillet, Figma a modifié le trajet inverse. Quand un écran basé sur du code revient sur le canvas, ses couleurs, sa typographie et ses espacements peuvent désormais se rattacher à la plupart des variables déjà présentes dans le fichier au lieu d'arriver comme valeurs figées. Davantage de frames récupèrent aussi un auto layout exploitable.
Cela concerne trois chemins indiqués par Figma : copier un aperçu Figma Make comme calques de design, générer un design depuis du code avec le serveur MCP de Figma, ou capturer une page web avec son extension Chrome.
Le produit réel peut revenir dans la conversation
Le détail important n'est pas l'import lui-même. On sait transformer une page en calques depuis longtemps, avec des résultats plus ou moins proches d'une fouille archéologique.
Le problème est ce qui arrive après. Si chaque couleur et chaque espace devient une valeur isolée, l'écran importé ressemble au produit mais a perdu la logique du système de design. Le modifier proprement demande de reconstruire cette logique.
En reconnectant les valeurs aux variables existantes et en récupérant davantage d'auto layout, Figma essaie de conserver une partie de cette structure.
Ce n'est pas une synchronisation magique entre code et design. Figma dit bien que les valeurs se lient à « la plupart » des variables, pas toutes. Et une capture éditable ne transforme pas automatiquement une interface en composant bien conçu.
Mais le sens du workflow devient plus intéressant. Le fichier de design n'est plus obligé d'être uniquement la maquette située avant le produit. Un écran déjà codé peut revenir sur le canvas, être discuté et modifié sans repartir entièrement de zéro.
Pour les petites équipes où design et code évoluent en parallèle, c'est probablement plus utile qu'une nouvelle génération de mockups. Le produit réel finit toujours par diverger de la maquette. Autant donner à cette divergence un chemin de retour.