Créer par le design : de nouveaux workflows pour de nouvelles façons de créer
Voici un aperçu de tous les outils que nous avons lancés aujourd’hui afin de réunir les équipes et les agents, ainsi que le design, le code et le contexte nécessaire, au sein du canvas pleinement intégré de Figma.
Partager Créer par le design : de nouveaux workflows pour de nouvelles façons de créer
Pendant longtemps, le codage a été coûteux. Chaque modification entraînait un coût et prenait du temps, et il fallait tout planifier minutieusement avant de se lancer dans l’écriture du code.
Aujourd’hui, l’IA permet de coder à moindre coût, et créer n’a jamais été aussi simple. De plus en plus d’équipes se tournent vers la création pour élargir leur réflexion. Elles commencent par créer, en utilisant cette démarche comme point de départ pour démêler un problème et tester la validité de leurs idées. C’est rapide, souple et un peu désordonné ; il s’agit moins de créer un produit abouti que de faire évoluer votre propre réflexion. C’est créer pour réfléchir.
Et puis il y a la création en vue de la mise en production. Ce mode de travail est délibéré, précis et défini par les détails.
Passer d'un type de création à l'autre est difficile. Grâce à l’IA, il est désormais facile d’obtenir une preuve de concept à l’aide du code, mais ce flux de travail repose souvent sur un travail en solo, ce qui vous confère une vision étroite et ne vous permet pas de savoir si vous vous dirigez dans la bonne direction. Aujourd’hui, nous vous présentons de nouvelles façons de concilier ces deux types de création, dans Figma.
Collaborer avec du code sur le canvas
Lorsque nous sommes absorbés par le développement de prototypes, on peut avoir l’impression de concevoir en isolation. Aujourd’hui, la collaboration se résume parfois même à partager un lien vers un prototype ou une vidéo où l’on voit le résultat final, mais sans pouvoir comprendre comment on y est parvenu. Nous créons pour réfléchir, mais la réflexion est devenue invisible. Pour reprendre l'expression d’un de nos clients : « C’est rapide, rapide, rapide… puis lent. »
Et les utilisateurs de Figma nous ont fait savoir qu’ils ne se sentaient pas à l’aise dans un terminal ou un IDE. Ils souhaitent créer, visuellement et avec leurs équipes, dans un environnement conçu pour eux. C'est pourquoi nous avons lancé les calques de code en début d'année : pour redonner cette impression de concevoir ensemble sur le canvas. Qu'il s'agisse de convertir des designs existants en code fonctionnel, d'importer à partir d'un dossier local, d'intégrer un prototype codé via MCP, d'importer depuis GitHub ou de saisir le contenu en ligne de votre site web avec l'extension Chrome de Figma, les calques de code vous permettent d'explorer des idées étayées par du code directement sur le canvas et de faire évoluer votre réflexion. À terme, nous prévoyons également de permettre aux utilisateurs de travailler sur des bases de code plus complexes.
Les calques de code sont déployés en version bêta ouverte à partir d'aujourd'hui, et sont disponibles dans tous les forfaits. Nous avons également amélioré notre extension Chrome... Découvrez-la sans plus attendre !
Plus de contrôle sur vos design systems
Les design systems ont toujours été le fondement permettant d’apporter cohérence et uniformité à votre produit. Avec la création croissante de contenus à l'aide d’agents, ce fondement revêt encore plus d’importance.
Lorsque vous fournissez aux agents les modèles et les principes appropriés, ceux-ci peuvent s’appuyer sur le savoir-faire que votre équipe a déjà développé. C’est pourquoi nous élargissons le champ d’application de vos design systems dans Figma, en y intégrant des sources de code et des directives afin que l’agent dispose de toutes les informations nécessaires pour mieux refléter votre design system, où qu'il se trouve. Ajoutez des directives à vos bibliothèques de designs publiées afin que l'agent puisse plus facilement suivre les modèles établis, et importez des sources de code à partir d'un référentiel GitHub ou d'un package npm pour aider l'agent à créer et modifier de meilleurs composants et calques de code.
Nous proposons également un aperçu d’un espace dédié permettant de regrouper toutes les bibliothèques qui composent votre design system, de les gérer et de les contrôler en un seul endroit, et de les améliorer au fil du temps. Une carte du système vous aide à suivre les modifications et les dépendances, tandis qu’une analyse du système permet de détecter les lacunes, telles que les descriptions et les états interactifs manquants, dans votre design system.
Les directives, maintenant en phase bêta ouverte, et les sources de code, débutant en bêta fermée, seront disponibles dans tous les forfaits payants.
Contexte partagé avec Figma Specs
Avec la collaboration croissante entre les équipes et les agents, Markdown est plus omniprésent que jamais. Mais les fichiers Markdown n'ont aucun lien entre eux, ni avec les projets auxquels ils sont attachés. Ils contiennent également souvent des références à des images, des URL, ou même d'autres fichiers Markdown, ce qui peut être difficile à appréhender pour les collaborateurs. C'est pourquoi nous avons créé Specs : un nouvel espace natif dédié au contexte, qui lui permet de s'exprimer pleinement et de circuler librement au sein et en dehors de Figma.
Specs offre de nombreuses possibilités : de l'exploration de nouvelles orientations à la création de rapports de données, en passant par l'élaboration de fiches techniques haute fidélité et le transfert de contexte aux agents. Vous pouvez intégrer du contexte externe à l'aide d'un agent, travailler ensemble pour transformer des idées générales en spécifications détaillées, puis les envoyer à votre agent de codage via le serveur MCP de Figma, ou encore utiliser Specs pour créer un calque de code et affiner votre travail au fur et à mesure de votre apprentissage. Specs contient vos décisions communes et renvoie à votre travail sur le canvas, vous pouvez donc codifier et partager le contexte issu de diagrammes, de calques de code, de designs, et plus encore.
Specs commence à être déployé dès aujourd'hui en bêta ouverte sur le web, sur ordinateur et sur mobile et sera disponible dans tous les forfaits payants.
Publier des sites web basés sur des données avec Payload
Payload est un framework de contenu open source permettant de créer des outils internes, des applications et des sites web. Au cours des 12 derniers mois, le nombre de téléchargements de Payload a été multiplié par 6, ce qui en fait le CMS open source connaissant la plus forte croissance sur NPM.
L'année dernière, l'équipe derrière Payload, un framework de contenu open source, a rejoint Figma. Aujourd'hui, nous sommes ravis d’intégrer les fonctionnalités de Payload à Figma Make, afin que vous puissiez créer, gérer et déployer des applications web ensemble. Payload permet aux équipes marketing de gérer le contenu sans avoir besoin d'accéder au code source ni de solliciter les ingénieurs. Et le contenu qu'ils ajoutent reste lié à votre design system pour représenter fidèlement votre marque. De plus, vous disposez de tout le nécessaire, du contenu aux workflows, en passant par les API et un panneau d’administration, dans un seul et même espace. Et comme Figma héberge la solution, votre contenu et vos données sont centralisés au même endroit. Que vous soyez un designer lançant une version préliminaire dans Figma Make, un marketeur mettant à jour le contenu, ou un développeur personnalisant l'application avec le framework open source de Payload, toute l'équipe dispose de ce dont elle a besoin pour mettre une application en production. Et vous pouvez même l'exporter en dehors de Figma.
Payload est disponible dans tous les forfaits, avec un déploiement progressif sur tous les comptes au cours des prochaines semaines.
Nouvelles façons de créer avec vos outils d'IA à l'aide de Figma MCP
Toutes ces nouvelles fonctionnalités et ces workflows sont intégrés à l'agent via l'agent Figma et MCP. L'agent, désormais disponible pour tous et incorporé au canvas, permet d'automatiser les tâches répétitives sur une large gamme de travaux allant des prototypes aux composants du design system.
Nous mettons également à jour le Figma MCP afin de prendre en charge davantage de workflows d’IA liés au code et à la conception, offrant ainsi aux agents les compétences et les outils nécessaires pour aider les équipes à créer plus rapidement. À partir d'aujourd'hui, vous pouvez générer des calques de code et travailler avec des spécifications directement à partir des outils d'IA que vous utilisez déjà. Vous pouvez également créer des actifs visuels et exécuter des workflows Weave publiés, ce qui vous permet d'intégrer davantage votre processus créatif à ces outils. L'amélioration des instructions destinées aux agents et des performances du serveur Figma MCP réduit les erreurs et l'utilisation de tokens, aidant ainsi les agents à mener à bien leurs tâches Figma de manière plus efficace et plus fiable.
Pour vous aider à connecter votre travail à Figma, quel que soit votre point de départ, nous lançons 20 nouvelles intégrations de partenaires MCP, parmi lesquelles :
- OpenCode : donnez à votre agent de codage le contexte du design system de Figma pour générer un code plus précis, puis renvoyez les prototypes dans Figma pour examen.
- Dia : explorez des idées dans un navigateur natif à l'IA et intégrez l'UI du web dans Figma sous forme de calques de design modifiables afin de les peaufiner et de les valider.
- Junie by Jetbrains :apportez vos prototypes codés dans Figma sous forme de calques de code afin de les itérer et de les peaufiner avec votre équipe.
- Meta Muse : permettez aux chefs de petites entreprises d'importer dans Muse la marque qu'ils ont conçue dans Figma afin de créer davantage de visuels et d'exécuter des workflows Weave.
Aujourd’hui, le travail commence à différents points, passe de main en main et change de forme. Les équipes se rassemblent et explorent des idées côte à côte. Elles affinent les interactions en les testant, puis transposent ces décisions dans un produit prêt pour la production. Le processus ne suit pas une ligne droite : les idées se ramifient, les équipes reviennent en arrière, et ce qui a été conçu pour répondre à une question révèle en réalité une question plus pertinente qui se cache derrière.
C'est cela, créer par le design. Quel que soit votre point de départ et quelle que soit votre méthode de travail, nous avons hâte de découvrir vos créations sur le canvas créatif complet de Figma.
