Présentation de Specs : Markdown en tant que support

Aujourd'hui, de plus en plus de créateurs de produits travaillent en Markdown, car la collaboration avec des agents devient la norme. C'est le format de facto pour partager le contexte. Mais pour tout le contexte que Markdown nous aide à exprimer, il passe également à côté de nombreux éléments contextuels. Les fichiers Markdown ont tendance à être isolés sur les ordinateurs locaux, avec des liens fragiles entre eux et peu d’éléments les reliant aux projets qui les ont générés. Si la plupart des informations sont éphémères, certaines évoluent pour devenir des éléments clés qui nécessitent des améliorations au fil du temps et de la collaboration. C’est pourquoi nous avons développé Specs : un conteneur collaboratif qui permet au contexte de s’exprimer pleinement et d’entrer, de sortir et de circuler au sein de Figma.

Specs regroupe vos décisions communes et renvoie à votre travail sur le canvas : diagrammes, calques de code, designs, et plus encore. Il dispose de fonctionnalités collaboratives propres à Figma, telles que la possibilité d’intégrer un fichier FigJam, une frame ou un nœud du canvas directement dans la spécification, de sorte que le texte et les designs apparaissent côte à côte au lieu d'être confinés dans des captures d'écran ou des liens obsolètes. Et puisque l'agent Figma est capable de lire les commentaires et d'y répondre, vous pouvez collaborer avec lui de la même manière que vous le feriez avec un collaborateur.

Avec Specs dans Figma, les équipes et les agents peuvent rassembler les instructions écrites, les études visuelles et les détails techniques au sein d'un plan commun, afin de guider les agents du prototype à la production.

Découvrez tous les lancements prévus cette semaine.

Partager le contexte avec les équipes et les agents

C'est avec Specs que vos intentions de design prennent forme. Intégrez un contexte externe à l'aide d'un agent, travaillez ensemble pour transformer des idées générales en une spécification détaillée, puis envoyez-la à votre agent de codage via le serveur MCP de Figma, ou créez un calque de code par-dessus et affinez la spécification au fur et à mesure de votre apprentissage.

À titre d'exemple, Noah Finer, ingénieur logiciel chez Figma, a créé une spécification pour donner du contexte à son agent de codage lorsqu'il développait la fonctionnalité Specs. Il a d'abord rédigé une spécification définissant les principes directeurs pour les cas limites, y a intégré des diagrammes issus de FigJam pour illustrer le flux, puis l’a partagé avec ses collègues afin de recueillir leurs commentaires. « Une fois la spécification finalisée, je l'ai fournie à mon agent via le serveur MCP de Figma avec les commentaires de mes collègues comme contexte », explique-t-il. « À mesure que j'avançais dans mon code, j'utilisais MCP pour mettre à jour la spécification d'origine sur le canvas. J’ai également demandé régulièrement aux agents d’utiliser MCP pour créer de nouveaux diagrammes dans FigJam, de les intégrer dans Specs et de les envoyer aux collègues chargés de l'examen du code. »

Les connecteurs permettent également d’intégrer du contexte externe dans Specs. Si vous rédigez une spécification technique, par exemple, vous pouvez intégrer directement un contexte issu de votre base de code avec le connecteur GitHub. Ou bien, imaginons que votre équipe utilise Hex pour les données d'utilisation du produit, et que votre fiche technique contient une question ouverte à laquelle ces données pourraient répondre. Sélectionnez la question, ajoutez le connecteur hexadécimal, et demandez à l'agent d'exécuter l'analyse et de laisser ses conclusions sous forme de commentaire sur la spécification. La réponse s'affiche dans le document, exactement là où la question a été posée.

Vous pouvez également faire glisser du contenu depuis le canvas de Figma, comme une exploration de design sur laquelle vous avez travaillé avec votre équipe, ou un diagramme représentant un flux utilisateur proposé. Ensuite, lorsque vous le déplacez à nouveau, vous pouvez toujours préserver les propriétés Figma.

Passer d'un élément à l'autre sur le canvas

Vos spécifications vivent sur le canvas collaboratif de Figma, à côté du travail qu'elles décrivent. Faites glisser un fichier Markdown existant sur le canvas, ou utilisez l'agent de Figma pour rédiger une spécification à côté de vos designs et de votre code. Vous pouvez dupliquer une spécification sur le canvas, afin que chaque membre de votre équipe puisse travailler simultanément sur sa propre version avant de s’accorder sur une orientation commune.

Mark Harvey, responsable du design produit chez Intuit, travaille avec le design system d'Intuit et conçoit actuellement un nouvel ensemble d'icônes. Pour les documenter, Mark ajoute une spécification juste à côté des icônes sur le canvas Figma. Chaque entrée indique le nom du fichier de l'icône, sa catégorie, ses balises de recherche et sa description, ce qui permet à l’équipe de consulter les icônes et leurs détails en un seul et même endroit. « C’est très utile de les consigner de manière bien structurée », souligne Mark. « Grâce à Specs, l'intégration d'un document structuré et mis en forme, cohérent d'un fichier à l'autre, rend les fichiers de design beaucoup plus accessibles et plus faciles à comprendre pour les non-designers. »

Lorsque vous improvisez avec votre équipe, vous pouvez passer d'une forme de base à l'autre en toute fluidité. Utilisez l'agent Figma pour transformer une fiche technique en designs, prototypes et code, ou reconvertir des designs et du code en spécification. Si votre équipe explore avec des calques de code, qui intègrent du code fonctionnel sur le canvas, sélectionnez Extraire les designs pour reconvertir son état actuel en calques de design modifiables. Vous choisissez ce que vous souhaitez transférer : un seul écran, un état spécifique, ou un flux complet. Ajoutez des annotations sur l'intention et une fois que les ingénieurs ont donné leur avis et marqué les frames comme Ready For Dev, conservez-les à côté de la spécification pour que les designers et les ingénieurs s'accordent sur ce qui sera effectivement déployé.

Codifier une orientation

Lorsque vous disposez d’une multitude d’éléments contextuels, il peut s’avérer difficile de les synthétiser en étapes claires à suivre. Que vous cherchiez à synthétiser les annotations d’un ingénieur sur un écran, un calque de code détaillant un nouveau modèle de design system, ou même du feedback formulé lors d'une critique de design, vous pouvez regrouper ces contributions dans un document modifiable qui viendra compléter votre planification. Ainsi, chacun peut prendre du recul et voir des artefacts écrits structurés accompagnés de tout le contexte pertinent.

Lorsque Mike Blight, chercheur chez Figma, explore différentes orientations de produit, ses collaborateurs testent les différentes options à l’aide de notes autocollantes, de commentaires et d’annotations. Une fois que chacun a donné son feedback, il consigne les décisions dans une spécification, y compris les questions que l'équipe continue d'examiner. Ensuite, lorsqu'ils sont prêts à entamer une nouvelle exploration, ils disposent du contexte issu de la séance de brainstorming précédente comme point de départ. « C’est cela, pour moi, le cercle vertueux : explorer ensemble, synthétiser les résultats et faire avancer le travail », explique Mike. « Avoir des spécifications sur le canvas offre à notre réflexion un ancrage durable et un point de départ pour la suite. »

L'agent de Figma peut lui aussi collaborer. Parce qu'il peut lire et écrire des commentaires dans Specs, vous pouvez lui demander d’apporter une réponse à chaque commentaire ouvert sur une spécification avec une suggestion de correction, tandis que les coéquipiers donnent leur avis sur le même document. Chaque conversation est hébergée dans son propre fil de discussion, ce qui vous permet d’en mener plusieurs en parallèle, comme vous le feriez avec d'autres collaborateurs.

Une fois que Kat Busch, ingénieure logicielle chez Figma, est prête à partager largement son travail, elle organise celui-ci dans une spécification, que son agent peut ensuite lire au format Markdown. Si, par exemple, le nom d'une fonctionnalité change, elle peut demander à l'agent d’apporter ces modifications directement dans la spécification. « C'est le moyen le plus simple de collaborer avec un agent sur un projet que je souhaite partager largement », explique Kat.

Transfert en production

Une fois que votre équipe s'est mise d'accord sur une orientation, vous pouvez remettre une spécification technique à votre agent de codage pour l'implémentation. Il suffit de copier le lien vers la spécification et de l'ajouter à votre prompt dans votre agent de codage : tout ce contexte, y compris le Markdown, les références aux frames, les diagrammes, les calques de code, et les extraits de Code Connect sont inclus.

De l’idée initiale à la version finale, Specs offre à votre équipe et à vos agents un espace unique pour élaborer le plan et le contexte nécessaire pour le mettre en œuvre.

Que vous soyez un chef de projet rédigeant une fiche technique, un designer documentant des décisions, ou un ingénieur définissant le périmètre d'un changement d'architecture, Specs permet à tous les membres de votre équipe d’explorer, de planifier et de mettre en œuvre en disposant de l’intégralité du contexte.

Disponible en ligne, sur ordinateur et sur mobile, Specs est déployé en bêta ouverte pour les forfaits payants à partir d'aujourd'hui. Commencez ici, et rendez-vous dans le centre d'aide pour en savoir plus.