Naviguer jusqu'au contenu principal

Figma Make, désormais dans votre code local

Iris LinProduct Designer, Figma
Jesse LumarieSoftware Engineer, Figma

De l'édition visuelle à la génération de prompt conceptuelle et à la collaboration, Figma Make élargit les possibilités de conception avec le code des équipes.

Partager Figma Make, désormais dans votre code local

À noter

Ces nouvelles fonctionnalités de Make seront déployées en version bêta au cours des prochaines semaines.

Aujourd'hui, nous lançons de nouvelles fonctionnalités dans Figma Make : la possibilité de travailler dans votre base de code de production sans quitter Figma. Notre application de bureau bêta offre notre première étape permettant de regrouper la conception libre, le prototypage avec code et le passage en production.

Chez Figma, nous ne pensons pas que vous devriez être contraint de choisir entre un outil de conception et un outil de codage. Vous devriez être libre d'utiliser le meilleur outil en fonction des besoins, qu'il s'agisse du plan de travail de conception, d'un playground de prototypage ou du code de production.

Coder aujourd’hui ressemble beaucoup à travailler dans le design il y a 10 ans. Lorsque Figma a été lancé, le design était une tâche qui s'effectuait hors ligne et en solo. Aujourd'hui, plus de personnes que jamais utilisent des agents pour coder et le codage lui-même change rapidement. La qualité du code produit par les modèles de pointe s'améliore constamment et pourtant, malgré tant d'innovations, les outils dont nous disposons pour travailler sur le code sont encore très rudimentaires. En termes de collaboration, nous sommes restés en 2016. Les environnements IDE et les terminaux ne semblent tout simplement pas familiers à beaucoup d'entre nous. Nous le ressentons chaque jour et nous l'entendons constamment de la communauté Figma.

L'opposition « design et code » est un faux dilemme. Les outils ne doivent pas limiter notre capacité à naviguer entre ces mondes. Le but de Figma en tant que plateforme est de vous donner accès au bon outil au bon moment. De l'édition directe et de la génération de prompt contextuelle à une collaboration et à un partage de fichiers plus étroits, voici ce qui est lancé aujourd'hui pour rendre cela possible.

Modifiez votre codebase visuellement

À noter

Bien que nous ayons simplifié ce processus de configuration pour les utilisateurs non techniques, nous nous employons à le rendre beaucoup plus fluide. Pour l'instant, les designers ayant déjà accès à la base de code de leur entreprise sont les mieux placés pour utiliser cette nouvelle fonctionnalité Make.

Vous pouvez désormais effectuer des modifications directes et visuelles et expédier ces modifications depuis Make en vous connectant à votre base de code. Sélectionnez des éléments, ajustez les propriétés et changez la mise en page, les couleurs, les polices ou la taille – l'agent trouve le code pertinent et le modifie pour que l'UI reflète ce que vous avez conçu. Il s'agit d'une édition précise dans le code avec une liberté d'exploration.

Utilisez des modifications directes pour les changements que vous savez vouloir effectuer.

Pour les modifications allant au-delà des propriétés (une interaction ou une animation), vous pouvez annoter les éléments à l'écran, en décrivant ce que vous voulez. Les annotations fournissent à l'agent des informations contextuelles et peuvent faire référence à de nombreux éléments à la fois. Il en résulte une flexibilité entre l'édition directe et les prompts standard.

Utilisez des annotations pour les changements qui modifient la logique d'interaction.

Créez des branches, validez et expédiez

L'envoi de code de production doit se faire intentionnellement, par le biais du processus de développement de votre équipe. Tant que vous n'avez pas ouvert de PR, vos modifications sont stockées sous forme de validations locales.

Make prend en charge les workflows Git pour les bases de code (en créant des branches, en annulant des validations, etc.) afin que votre équipe d'ingénierie examine vos modifications comme toute autre demande d'extraction.

Créez une branche directement dans Make.
Affichez un aperçu de votre historique de validations pour le contrôle de version dans Make.

Collaborez et créez

Lorsque Make modifie votre base de code locale, les modifications peuvent être partagées sous forme de fichiers. Envoyez un lien et, une fois que votre coéquipier a accès à votre branche, il peut la consulter, voir vos modifications et commencer à créer sur cette base. Ses modifications et ses idées seront visibles, et l'historique des validations vous aide à comparer l'avant et l'après.

Copiez des écrans, des pages et des composants depuis Make et collez-les en tant que calques sur le plan de travail Figma, où vous pouvez réfléchir et les modifier avec votre équipe et l'agent de Figma. Figma détecte ces modifications et vous invite à les réintégrer à Make, en les appliquant dans le code.

De Make à Figma Design, et retour.

L'objectif est de fermer entièrement la boucle : importer les écrans et les éléments de Make vers Figma Design pour permettre à votre équipe de les commenter, de les modifier et de réfléchir sur cette base, puis ramener ces décisions dans le code. Le plan de travail et la base de code, au même endroit. Il n'y a pas de bon endroit pour commencer. Il y a simplement le travail, et le meilleur outil pour votre environnement de travail.

Les nouvelles fonctionnalités de Figma Make (y compris l'édition directe, les annotations, le chat et la création de PR) seront lancées en version bêta limitée le 28 mai 2026 et ne consommeront pas de crédits pendant la phase bêta. Nous prévoyons d'annoncer prochainement les tarifs des crédits d'IA. Inscrivez-vous ici pour demander un accès anticipé. Si vous êtes éligible et sélectionné pour la version bêta, nous vous enverrons un e-mail dès que vous y aurez accès. S'inscrire à la liste d'attente ne garantit pas l'obtention de l'accès. Cette version bêta ne sera disponible que dans notre application de bureau bêta pour les utilisateurs de Mac. Nous prévoyons d'intégrer prochainement ces changements à d'autres plateformes. Pour en savoir plus sur ces fonctionnalités, consultez notre centre d'aide.

Créez et collaborez avec Figma

Lancez-vous gratuitement