Einführung von Specs: Markdown als Medium

Da die Zusammenarbeit mit Agenten zunehmend zum Standard wird, arbeiten heute immer mehr Produktentwickler*innen in Markdown, dem De-facto-Standardformat zur Übermittlung von Kontext. Doch auch wenn wir mit Markdown umfassenden Kontext ausdrücken können, fehlt dennoch viel Kontext. Markdown-Dateien sind in der Regel Einzelspieler auf lokalen Computern, mit brüchigen Beziehungen zueinander und wenig Verbindung zu den Projekten, auf denen sie basieren. Während der größte Teil des Kontexts temporär ist, entwickelt sich ein Teil zu wichtigen Eingaben, die im Laufe der Zeit verfeinert und in Zusammenarbeit weiterentwickelt werden müssen. Deshalb haben wir Specs entwickelt: einen Multiplayer-Container, mit dem Kontext vollständig ausgedrückt und in, aus und zwischen Figma-Elementen übertragen werden kann.

Specs enthält gemeinsam getroffene Entscheidungen und referenziert deine Arbeit auf der Arbeitsfläche – Diagramme, Code-Ebenen, Designs und mehr. Es hat kollaborative, spezifisch für Figma entwickelte Funktionen, wie die Möglichkeit zur direkten Einbindung einer FigJam-Datei, eines Frames oder eines beliebigen Knotens von der Arbeitsfläche in die Spezifikation, sodass Text und Design nebeneinander liegen, anstatt in Screenshots oder veralteten Links zu existieren. Und da der Figma-Agent Kommentare lesen und Antwort geben kann, kannst du mit dem Agenten genauso zusammenarbeiten wie mit menschlichen Mitarbeiter*innen.

Mit Specs in Figma können Teams und Agenten schriftliche Absichten, visuelle Erkundungen und technische Details in einem gemeinsamen Plan zusammenführen, um Agenten von Prototypen zur Produktion zu leiten.

Informiere dich über alles, was in dieser Woche gestartet wird.

Den Kontext mit Teams und Agenten teilen

In Specs konkretisiert sich dein Designkonzept. Füge mit einem Agenten externen Kontext hinzu, arbeite zusammen, um vage Ideen in eine detaillierte Spezifikation zu verwandeln, und sende diese dann über den MCP-Server von Figma an deinen Coding-Agenten oder baue eine Code-Ebene darauf auf und verfeinere die Spezifikation nach und nach.

Als der Figma-Software-Entwickler Noah Finer die Specs-Funktion entwickelte, erstellte er zum Beispiel eine Spezifikation, um seinem Coding-Agenten Kontext zur Verfügung zu stellen. Zuerst schrieb er eine Spezifikation, die Leitprinzipien für Randfälle abbildete, Diagramme mit Einbindung von FigJam, um den Flow zu zeigen, und teilte sie dann mit Teamkollegen, damit sie das aktuelle Arbeitsergebnis kommentieren können. „Nachdem die Spezifikation finalisiert war, stellte ich sie meinem Agenten zusammen mit den Kommentaren meiner Kolleg*innen über den Figma MCP-Server als Kontext zur Verfügung“, sagt er. „Während ich an meinem Code weiterarbeitete, nutzte ich MCP, um die ursprüngliche Spezifikation auf der Arbeitsfläche zu aktualisieren. Ich ließ auch kontinuierlich Agenten MCP verwenden, um neue Diagramme in FigJam zu erstellen, deren Einbindung in Specs vorzunehmen und sie für eine Codeüberprüfung an Kolleg*innen zu senden.“

Verbinder helfen ebenfalls beim Einbinden von externem Kontext in Specs. Beim Entwerfen eines technischen Dokuments kannst du den Kontext mithilfe des GitHub-Verbinders direkt aus deinem Code-Repository einfügen. Oder wenn dein Team Hex für Produktnutzungsdaten verwendet und dein PRD eine offene Frage enthält, die diese Daten beantworten könnten, kannst du diese Frage auswählen, den Hex-Verbinder hinzufügen und den Agenten auffordern, die Analyse durchzuführen und seine Erkenntnisse als Kommentar in der Spezifikation zu hinterlassen. Die Antwort wird im Dokument genau dort angezeigt, wo die Frage gestellt wurde.

Du kannst auch Inhalte aus der Figma-Arbeitsfläche übernehmen, z. B. eine Design-Exploration, die du mit deinem Team entwickelt hast, oder ein Diagramm eines vorgeschlagenen Benutzer-Flows. Wenn du den Inhalt wieder herausziehst, werden die Figma-Eigenschaften beibehalten.

Zwischen Materialien auf der Arbeitsfläche bewegen

Deine Spezifikationen befinden sich auf der kollaborativen Arbeitsfläche von Figma – direkt neben der Arbeit, die sie beschreiben. Ziehe eine vorhandene Markdown-Datei auf die Arbeitsfläche oder verwende den Figma-Agenten, um einen Entwurf neben deine Designs und den Code zu erstellen. Du kannst eine Spezifikation auf der Arbeitsfläche duplizieren, damit jede Person in deinem Team parallel an einer eigenen Version arbeiten kann, bevor ihr euch auf eine Richtung einigt.

Mark Harvey, Staff Product Designer bei Intuit, arbeitet mit dem Intuit Design System und entwirft ein neues Set von Icons. Um sie zu dokumentieren, fügt Mark direkt neben den Icons auf der Figma-Arbeitsfläche eine Spezifikation hinzu. Jeder Eintrag erfasst den Dateinamen des Icons, die Kategorie, Such-Tags und die Beschreibung, sodass das Team die Icons und deren Details an einem Ort überprüfen kann. „Es ist sehr hilfreich, das mit sauberer Formatierung festzuhalten“, sagt Mark. „Mit Specs erhältst du ein strukturiertes, formatiertes Dokument, das für jede Datei konsistent ist, sodass Designdateien für Nicht-Designer*innen deutlich einfacher und nachvollziehbarer sind.“

Während du mit deinem Team improvisierst, kannst du problemlos zwischen Primitiven wechseln. Verwende den Figma-Agenten, um ein PRD in Designs, Prototypen und Code zu verwandeln oder Designs und Code zurück in eine Spezifikation zu verwandeln. Wenn dein Team mit Code-Ebenen experimentiert, die funktionierenden Code auf die Arbeitsfläche bringen, wähle Designs extrahieren, um den aktuellen Stand wieder in editierbare Designebenen zu konvertieren. Dabei wählst du, was übernommen wird: ein einzelner Bildschirm, ein bestimmter Zustand oder ein vollständiger Flow. Füge Absichten als Annotationen hinzu, und sobald Entwickler*innen ihr Feedback gegeben und die Frames als „Entwicklungsfertig“ (Ready for dev) markiert haben, behalte sie parallel zur Spezifikation, damit Designer*innen und Entwickler*innen genau wissen, was ausgeliefert wird.

Eine Richtung kodifizieren

Wenn du eine Menge Kontext hast, kann es schwierig sein, ihn in klare nächste Schritte zu synthetisieren. Ganz gleich, ob du die Annotationen von Entwickler*innen auf einem Bildschirm, eine Code-Ebene, die ein neues Designsystemmuster detailliert beschreibt, oder Feedback während einer Designkritik destillieren möchtest, kannst du diese Eingaben in ein bearbeitbares Dokument umwandeln, das neben dem deinen aktuellen Entwürfen steht. Auf diese Weise kann jeder herauszoomen und strukturierte, schriftliche Artefakte zusammen mit dem gesamten relevanten Kontext sehen.

Wenn der Figma-Forscher Mike Blight Produktrichtungen erkundet, machen seine Mitarbeiter*innen Notizen, Kommentare und Annotationen zu den Optionen. Sobald das Feedback vollständig eingegangen ist, konsolidiert er die Entscheidungen in einer Spezifikation, einschließlich der Fragen, an denen das Team noch arbeitet. Sobald sie bereit sind, eine weitere Erkundung zu starten, steht ihnen der Kontext des vorherigen Brainstorming-Prozesses als Ausgangspunkt zur Verfügung. „Das ist wie ein Schwungrad für mich: gemeinsam erkunden, das Zusammengefasste nutzen und die Arbeit in Bewegung halten“, sagt Mike. „Da die Spezifikationen auf der Arbeitsfläche verfügbar sind, haben wir eine zuverlässige Orientierung und einen Ausgangspunkt für die nächste Aufgabe.“

Der Figma-Agent kann ebenfalls zusammenarbeiten. Er ist in der Lage, Kommentare in Specs zu lesen und zu schreiben, sodass du ihn auffordern kannst, zu jedem offenen Kommentar mit einem vorgeschlagenen Fix eine Antwort zu geben, während Teamkollegen im selben Dokument mitdiskutieren. Jedes Gespräch bewegt sich in einem eigenen Thread, sodass du – genau wie mit Menschen – mehrere parallel führen kannst.

Sobald Figma-Softwareentwicklerin Kat Busch bereit ist, ihre Arbeit umfassend zu teilen, organisiert sie ihre Arbeit in einem Spezifikationsdokument, das ihr Agent dann als Markdown lesen kann. Wenn beispielsweise der Name eines Features geändert wird, kann sie den Agenten auffordern, diese Änderungen direkt in der Spezifikation vorzunehmen. „Es ist der einfachste Weg, mit einem Agenten an etwas zu arbeiten, das ich umfassend teilen möchte“, sagt Kat.

In die Produktion überführen

Sobald sich dein Team auf eine Richtung geeinigt hat, kannst du eine technische Spezifikation an deinen Coding-Agenten übergeben, damit er diese umsetzt. Kopiere dazu einfach den Link zu der Spezifikation und füge ihn deinem Prompt im Coding-Agenten hinzu – den gesamten Kontext, einschließlich Markdown, Verweise auf Frames, Diagramme, Code-Ebenen und Code Connect-Schnipsel.

Von der ersten Idee bis zum finalen Build bietet Specs deinem Team und deinem Agenten einen Ort für die Gestaltung des Plans und den gesamten benötigten Kontext.

Ganz gleich, ob du als PM ein PRD erfasst, als Designer*in Entscheidungen dokumentierst oder als Entwickler*in eine Architekturänderung skizzierst, erhält dein gesamtes Team mit Specs alle Informationen, die es zum Erkunden, Planen und Umsetzen mit vollständigem Kontext benötigt.

Specs ist im Web, auf dem Desktop und auf Mobilgeräten verfügbar und wird ab heute in einer offenen Beta-Version für kostenpflichtige Abos eingeführt. Hier erfährst du, wie du loslegen kannst. Und im Hilfe-Center erhältst du weitere Informationen.