Figma Make vient de devenir un vrai outil de design vers le code

La version courte : Figma Make vous livre désormais du code qu'un ingénieur front-end ne supprimerait pas immédiatement. C'est exactement pourquoi les designers en parlent, et c'est bien plus significatif qu'une simple amélioration de performance.

Le 18 juin, Figma a livré une mise à jour de Make digne de la production. Le titre n'est pas "c'est plus rapide." Le titre, c'est la fidélité. Make exporte désormais des composants connectés à vos vrais design tokens et mappings Code Connect, au lieu du markup décousu et isolé que l'export produisait auparavant.

Cette différence marque la frontière entre un tour de passe-passe et un vrai outil. Le code jetable finit à la poubelle. Le code qui référence votre système finit mergé.

Les diffs que tout le monde partage

Voir sur figma.com

Cette mise à jour a fait exploser les compteurs parce que les gens montrent les preuves. Le fil d'annonce @figma a dépassé les 9 200 reposts en quelques jours, et les réponses se sont remplies de diffs Figma-vers-React côte à côte, publiés par des équipes qui l'avaient testé sur leurs propres systèmes.

C'est le signal qui compte. Le signal le plus fort n'est pas le texte marketing de Figma, ce sont les ingénieurs qui publient des diffs avant-après sans détester le résultat. Quand les sceptiques se taisent, quelque chose a changé.

Les designers entendent des promesses "design vers le code" depuis dix ans. La promesse mourait toujours au contact d'une vraie codebase, parce que le résultat ignorait le système sur lequel la codebase était construite. Cette fois, les diffs survivent à la rencontre.

Ce qui a vraiment changé (tokens et Code Connect, pas du hex brut et du markup)

Voir sur figma.com/make

L'ancien Make lisait un frame et décrivait ce qu'il voyait. Il voyait un bouton bleu et écrivait #2D7FF9. Il voyait un padding et écrivait une valeur en pixels. Le résultat semblait correct et ne se connectait à rien.

Le nouveau Make lit le même frame et le résout par rapport à votre système. Le bouton bleu compile vers une référence de token, pas une valeur hex figée. Le composant compile vers votre vrai mapping Code Connect, il pointe donc vers le composant réel dans votre codebase au lieu d'en inventer un nouveau.

C'est tout le changement en une phrase. L'export a arrêté de décrire des pixels et a commencé à référencer votre source de vérité.

Pourquoi c'est important en pratique : les références de tokens signifient que votre code hérite des changements de thème gratuitement. Changez le token, chaque export le suit. Les mappings Code Connect signifient que l'export réutilise le Button que votre équipe maintient déjà au lieu de faire apparaître un quasi-doublon qui diverge dès que quelqu'un y touche.

Résultat de l'ancien Make vs. la mise à jour du 18 juin

Voici la comparaison, parce que la comparaison est l'argument.

La colonne de droite est la seule qui mérite une place dans une pull request. La colonne de gauche explique pourquoi personne ne faisait confiance au "design vers le code" jusqu'à présent.

Là où il a encore besoin de vous

Make construit le corps, pas le cerveau. Survendre cette ligne n'aide personne, voici donc la limite honnête de ce que la mise à jour du 18 juin fait pour vous.

La mise en page, les tokens et les scaffolds de composants statiques sortent proprement. Tout ce qui nécessite une décision nécessite encore vous. L'export ne sait pas à quoi devrait ressembler un état de chargement, ce qui se passe en cas d'erreur, ou si votre état vide devrait inciter ou s'excuser.

L'accessibilité mérite sa propre ligne. Make peut apposer des attributs alt et des balises à peu près sémantiques, mais il ne peut pas décider de l'ordre de focus, annoncer une région live, ou comprendre que votre modal doit piéger le focus et le restituer. Ce sont des jugements sur la façon dont un humain navigue dans votre interface, et le jugement n'est pas dans l'export.

Les données réelles sont l'autre piège silencieux. Un frame montre une rangée parfaite. La production montre l'utilisateur dont le nom fait 40 caractères, le prix qui est null, la liste vide le premier jour.

Make gère le cas nominal. Vous gérez la réalité.

Un workflow sensé avec Figma Make en boucle cette semaine

Vous n'avez pas besoin de reconstruire votre processus. Vous devez intégrer Make au bon moment et garder un humain aux jointures. Voici une version que vous pouvez tester sur un vrai composant cette semaine.

1. Commencez par mapper réellement vos tokens et Code Connect. C'est le prérequis sans glamour. Make n'est aussi bon que le système qu'il référence, donc si vos tokens sont à moitié nommés et votre couverture Code Connect est mince, réglez ça avant de blâmer l'export.
2. Lancez Make sur un seul composant bien construit, pas un écran entier. Choisissez quelque chose avec une structure claire et une histoire de tokens propre. Vous testez la fidélité, vous ne demandez pas un miracle.
3. Lisez le diff comme un code reviewer, pas comme un fan. Vérifiez qu'il a résolu vers des références de tokens et mappé vers votre vrai composant. S'il a inventé une valeur hex ou un composant dupliqué, ce frame n'était pas system-clean. Corrigez la source.
4. Donnez le scaffold à l'ingénieur avec le travail d'état, de données et d'accessibilité clairement marqué comme le sien. L'export est la structure de départ. Les décisions, c'est le vrai boulot.
5. Réinjectez ce que vous apprenez dans le système. Chaque endroit où Make a deviné est un endroit où vos tokens ou mappings Code Connect étaient ambigus. Les resserrer améliore le prochain export. Le système se renforce.

Le modèle est l'humain dans la boucle, pas l'humain hors du jeu. Make supprime l'étape de traduction fastidieuse. Il ne supprime pas la réflexion.

Ce que ça change pour votre livrable

Voir sur atlassian.design

Cela change silencieusement ce que "terminé" signifie pour un designer. Pendant des années, le livrable était un frame pixel-perfect et l'espoir poli que l'ingénierie le reproduise fidèlement. La correspondance était toujours approximative.

Maintenant, le frame se rapproche du contrat. Si votre design référence de vrais tokens et que vos composants mappent via Code Connect, l'export transporte votre intention dans le code avec moins de dérive. La remise cesse d'être une traduction et commence à être un transfert.

Cela augmente la valeur du travail système et diminue la valeur des jolis screenshots. Les designers qui gagnent l'année prochaine sont ceux dont les fichiers sont suffisamment structurés pour que Make produise un résultat propre. Un fichier désordonné produit du code désordonné plus vite, tandis qu'un système discipliné produit du code héritable.

Donc le vrai upgrade n'est pas l'IA. C'est la pression de finalement nommer correctement vos tokens et de mapper vos composants. Make vient de faire payer cette discipline immédiatement plutôt qu'un jour peut-être.

FAQ

La mise à jour du 18 juin change les vraies réponses aux questions que les designers posent le plus sur Figma Make.

Figma Make écrit-il du React prêt pour la production maintenant ?

Plus proche, mais pas seul. La mise à jour produit du React connecté à vos vrais tokens et mappings Code Connect, ce qui est solide et vaut la peine de garder. Il laisse encore l'état, l'accessibilité et les données réelles à votre charge. Traitez-le comme un solide premier jet, pas comme une fonctionnalité terminée.

Qu'est-ce que Code Connect et pourquoi est-ce important pour l'export ?

Code Connect mappe un composant dans votre fichier Figma vers le vrai dans votre codebase. C'est la différence entre Make qui invente un nouveau bouton et Make qui réutilise le Button que votre équipe maintient déjà, de sorte que l'export pointe vers votre source de vérité au lieu de créer un doublon.

Make utilise-t-il mes design tokens ou invente-t-il ses propres valeurs ?

Il utilise vos tokens, c'est le cœur du changement du 18 juin. Les anciens exports intégraient du hex brut directement dans le markup. La mise à jour résout les valeurs vers des références de tokens, de sorte que votre code hérite des changements de thème au lieu de figer un snapshot. Un hex brut dans le résultat signifie que ce frame n'a jamais été mappé à un token.

Où Make manque-t-il encore ?

Cinq endroits nécessitent encore un humain, les mêmes que ceux listés dans le tableau ci-dessus :

• Logique d'état : chargement, erreur, vide, succès
• Comportement d'interaction et d'animation
• Accessibilité au-delà de l'évident
• Données réelles, cas limites et chaînes longues
• Quand réutiliser un composant vs. en créer un

Make gère la mise en page, le style mappé sur les tokens et les scaffolds statiques. Les jugements, c'est là que vit le vrai travail.

Dois-je changer mon workflow cette semaine ?

Oui, d'une petite façon. Lancez Make sur un seul composant propre, examinez le diff comme un ingénieur, et utilisez ce qu'il révèle pour resserrer vos tokens et votre couverture Code Connect. Ne basculez pas toute votre équipe vers une remise IA du jour au lendemain.

À retenir

Figma Make a franchi la ligne de la démo à l'outil le 18 juin. La preuve n'est pas les quelque 9 200 reposts sur le fil d'annonce @figma, ce sont les diffs de production que les ingénieurs ont publiés dessous et n'ont pas supprimés.

Le mécanisme est simple. Make a arrêté de décrire des pixels avec du hex brut et du markup isolé, et a commencé à référencer vos vrais tokens et mappings Code Connect. C'est la différence entre le code que vous jetez et le code que vous mergez.

Ne le survendez pas à votre équipe. Make construit le squelette. L'état, l'interaction, l'accessibilité et les cas limites sont toujours votre travail, et le seront toujours. Le mouvement le plus intelligent cette semaine est d'utiliser la mise à jour comme raison de finalement bien configurer vos tokens et Code Connect, parce qu'un système propre est ce qui transforme cette fonctionnalité d'un jouet en un outil avec lequel vous pouvez vraiment livrer.