Figma transforme les idées en logiciels interactifs avec Claude

Figma est la plateforme collaborative de conception et de développement sur laquelle les équipes créent des produits numériques, des concepts initiaux aux expériences livrées. Avec Claude qui alimente Figma Make, Figma permet aux équipes de transformer rapidement leurs idées et leurs mockups statiques en logiciels entièrement fonctionnels et interactifs, accélérant le passage de l'imagination à la réalité.

Résultats clés obtenus avec Claude

• Les concepteurs, développeurs et chefs de produit créent des prototypes ou des applications fonctionnelles en quelques minutes, sans écrire de code
• Les équipes explorent davantage d'idées de conception et de produits en automatisant les tâches chronophages
• Les non-concepteurs peuvent désormais visualiser leurs idées, ce qui permet d'intégrer plus de personnes dans le processus de conception
• Claude Sonnet a toujours su répondre aux exigences en matière de qualité du code, d'intention de conception et de rapidité 

L'évolution de la conception

Figma a reconnu que le rôle du design évoluait rapidement avec l'IA. En tant que plateforme de conception de premier plan, ils ont vu une occasion d'aider les concepteurs à accroître leur influence créative – en leur permettant de donner vie à leurs créations – tout en invitant davantage de personnes à participer au processus de conception.

L'IA ouvre un nouveau moyen de visualiser rapidement des idées de design et de transformer les maquettes statiques en expériences interactives avec une simple requête. En apportant cette capacité à Figma, les équipes peuvent explorer de nombreuses orientations différentes sans créer manuellement de prototypes ou écrire de code. 

Cette évolution s'aligne également sur les changements plus larges du secteur. Alex Mullans, chef de produit chez Figma, a fait remarquer : « Le transfert traditionnel entre la création et le développement crée des frictions. Il y a des va-et-vient où le développeur revient en disant : « Voici ce que j'ai créé » et cela ne correspond pas à la vision originale. » La plateforme collaborative de Figma rapproche la conception et le développement pour maintenir le savoir-faire et la qualité tout au long du processus.

Choisir Claude pour ses prouesses techniques et son sens du design

Lors de l'évaluation des modèles d'IA, Figma recherchait une solution capable de générer un code de haute qualité tout en comprenant l'intention de conception et l'esthétique.

Mullans décrit leur processus d'évaluation en disant : « Nous évaluons régulièrement divers modèles. Claude offre toujours la bonne combinaison de vitesse, de précision et de compréhension de l'intention de l'utilisateur. »

Le sens du design de Claude le distingue également, a déclaré l'équipe. Un ingénieur pour Figma Make explique : « Avant l'arrivée d'Anthropic, on voyait que ces modèles d'IA étaient intelligents, mais ils manquaient de goût, ils manquaient de caractère. Vous leur demandiez de générer un design et le design était plutôt plat. Puis Anthropic est apparu, et aujourd'hui, nous avons des modèles intelligents et des modèles qui ont du goût. »

Holly Li, chef de produit pour Figma Make, a acquis une expérience directe des capacités de Claude. « J'ai passé 30 heures à apprendre React pour créer mon site Web. Avec Claude, j'ai refactorisé et amélioré tout ce code en une seule journée, en ajoutant des fonctionnalités que j'ai toujours voulues, mais que je n'ai pas pu implémenter moi-même. »

L'équipe a identifié Claude Sonnet comme le moment décisif ; le moment où la génération de code est devenue suffisamment performante pour concrétiser leur vision pour Figma Make.

Interactivité via le langage naturel

Figma a intégré Claude dans deux produits novateurs qui transforment les idées en logiciels soutenus par du code. Le premier permet aux designers travaillant dans Figma Sites d'ajouter de l'interactivité à des maquettes de sites Web existantes en décrivant ce qu'ils veulent, en sélectionnant des éléments et en tapant des requêtes en langage naturel comme « ajouter un effet de survol qui s'incline lorsque ma souris est dessus. » Claude génère rapidement un code de haute qualité tout en préservant les détails de la conception d'origine.

Le deuxième produit, Figma Make, crée des prototypes ou des applications interactifs à partir de descriptions ou de designs Figma existants. Comme l'explique Li : « Figma Make est un moyen de passer de l'idée à un véritable logiciel. Vous pouvez partir de zéro ou commencer par un design existant que vous avez créé dans Figma. » Les utilisateurs peuvent taper une requête décrivant ce qu'ils veulent, ou copier leurs mockups au pixel parfait depuis Figma Design, et Claude les transforme en prototypes entièrement fonctionnels avec une logique complexe, des animations et des comportements adaptatifs.

Li explique sa philosophie de conception : « L'IA doit s'adapter au niveau des concepteurs. Si vous avez déjà créé le design parfait, vous ne devriez pas avoir à tout recommencer. Claude ajoute l'interactivité tout en respectant chaque pixel que vous avez placé. »

L'équipe a constaté des améliorations remarquables à chaque mise à jour de Claude. Li a déclaré : « Une requête génère désormais des designs sophistiqués avec des dégradés, une typographie variée et un mouvement réfléchi. L'un de nos designers a même déclaré : « Claude est tellement bon que j'ai envie de pleurer. »

Les nouveaux modèles accélèrent la vision

L'équipe Figma reste à la pointe de la technologie, testant constamment les derniers modèles de Claude.

« Sonnet 4.5 est un modèle très impressionnant », a déclaré Dylan Field, PDG de Figma. « Nous sommes très impressionnés jusqu'à présent par sa capacité à planifier et par sa capacité à raisonner sur les bases de code complexes. » Field explique comment le modèle a transformé les designs Figma en code fonctionnel. Il a souligné le flux de travail aller-retour amélioré entre Figma Design et Make ; importer des designs, générer des prototypes fonctionnels, puis les intégrer dans l'espace de conception pour poursuivre les itérations et comparer les explorations côte à côte. « Nous ignorions à quel point cet aller-retour s'améliorerait avec Sonnet 4.5… c'est une très agréable surprise », a-t-il fait remarquer. Field a qualifié l'expérience de « véritable plaisir à utiliser », ajoutant que le modèle « a déjà vraiment démontré une nette différence » dans les capacités de Figma Make. 

Figma a également introduit un paramètre de modèles expérimentaux, permettant aux utilisateurs d'accéder aux dernières versions, notamment au nouveau Claude Opus 4.6, dès qu'elles sont disponibles dans Figma Make. « Claude Opus 4.6 génère des applications et des prototypes complexes et interactifs dans Figma Make, avec une gamme créative impressionnante », a déclaré Loredana Crisan, directrice de la conception chez Figma. « Le modèle permet de traduire des conceptions détaillées et des tâches multicouches en code dès le premier essai, ce qui en fait un point de départ puissant pour les équipes qui souhaitent explorer et développer leurs idées. » Cet environnement expérimental permet aux équipes de repousser les limites avec de nouvelles fonctionnalités, tandis que Claude continue d'évoluer.

Chaque nouvelle version d'un modèle ouvre de nouvelles possibilités quant à ce que les équipes peuvent créer. Field a déclaré : « À mesure que les modèles IA s'améliorent, Figma s'améliore. » 

Rendre la conception et la création de logiciels accessibles à tous

En réduisant les obstacles techniques, Claude permet à tous les types d'utilisateurs de Figma de valider leurs idées plus rapidement, d'explorer des orientations plus créatives et d'apporter des perspectives diversifiées dans le processus de développement de produits.

La vitesse transforme ce qui est possible. Li l'a illustré par sa propre expérience : « J'ai prototypé un nouveau flux de produit avec Figma Make en cinq minutes. Avant, cela m'aurait été littéralement impossible de le faire seule en tant que chef de produit, sans le soutien des équipes de conception et d'ingénierie. »

Cette accélération permet des flux de travail entièrement nouveaux. Les premiers utilisateurs ont partagé des exemples convaincants : un concepteur a présenté une idée de startup à un investisseur en capital-risque en la prototypant en un week-end avec Figma Make, impressionnant ainsi l'investisseur avec une démonstration entièrement fonctionnelle. Un autre utilisateur a utilisé Make pour donner vie à un concept longtemps mis de côté : le rendre interactif a finalement permis à l'entreprise d'en reparler.

Au-delà de la productivité individuelle, Claude élargit également le cercle de ceux qui peuvent contribuer au développement des produits. Mullans a déclaré : « Les chefs de produit qui pensent en feuilles de calcul et en tableaux de données peuvent désormais créer des prototypes visuels pour communiquer leurs idées. Les ingénieurs peuvent rapidement créer des interfaces sans consacrer de temps au CSS. Tout le monde dans l'organisation peut contribuer plus efficacement au processus de conception. »

Le changement va plus loin que les outils ; il change la façon dont les équipes abordent le développement de produits. Désormais, les ingénieurs peuvent concevoir, les chefs de produit peuvent prototyper et les concepteurs peuvent livrer des logiciels. Figma Make estompe les frontières entre les différents rôles, ce qui aide tout le monde à visualiser une idée, à participer au processus de conception et à donner vie à un produit.