Die Zukunft der Designsysteme ist automatisiert

Im Jahr 2017 berichtete Benjamin Wilkins über erste Versuche, Designsysteme und maschinelles Lernen zur Codegenerierung aus Low-Fidelity-Wireframes einzusetzen. Der Konsens darüber? (1.) Wow, das ist unglaublich, (2.) Was ist mit unseren Jobs? „Ich dachte wirklich, es würde etwas länger dauern, bis ich durch einen Roboter ersetzt werde“, twitterte Nir Benita.

Dieser Beitrag kursierte vor Kurzem wieder auf Twitter, als das Diagram*-Team Genius vorstellte, ein KI-gesteuertes Tool, das deine Figma-Dateien analysieren und Vorschläge mithilfe von Komponenten aus deinem Designsystem machen kann – und damit diese ersten Vorstöße verwirklicht hat. Jem Gold, der damals bei Airbnb zu KI forschte, stellte auf Twitter klar, dass diese frühen Versuche nie vollständig realisiert wurden, sondern nur als Prototypen dienten. Dennoch zeigte die Arbeit eine Zukunft für KI-gestütztes Design auf, eine Zukunft, die jetzt, da die Technologie aufholt, Gestalt annimmt.

„Wir machen unsere Tools, und dann machen unsere Tools uns“, schreibt der Philosoph und Theoretiker Marshall McLuhan. Von Plug-ins und Widgets zu KI-gestützter Technologie – eine neue Klasse von Tools setzt Maßstäbe und wirft einige existenzielle Fragen auf: Welche Rolle spielen Designer*innen in einer Welt, in der Design automatisiert werden kann? Und Entwickler*innen mit automatisch generiertem Code? Wenn unsere Tools nicht mehr nur unsere Fähigkeiten erweitern, sondern unsere ... Sätze vervollständigen? Was bedeutet das für die Zukunft unserer Arbeit und der Branche insgesamt?

Einführung in Plug-ins und Widgets

Die Geschichte von Plug-ins und Widgets ist eng mit der des Designs verknüpft. Einige der frühesten Plug-ins entstanden in den 1970er-Jahren für Texteditoren und Publishing-Software wie Hypercard und QuarkXPress auf Apples Macintosh-Computern. Entwickler*innen bauten eine ganze Mikroökonomie rund um die Erstellung von Plug-ins auf und bieten benutzerdefinierte Effekte, Pinsel und Stile an, die andere übernehmen und verwenden können.

Seitdem haben viele andere Softwareunternehmen die von Nutzer*innen erstellten Erweiterungen begeistert angenommen und ihre Verbreitung über Community-Foren und In-App-Marktplätze gefördert. (Denn wer würde nicht gerne die Reichweite seiner Teams und Anwendungen erweitern?) Plug-ins für Designsysteme sind in der Regel auf Funktionalität ausgerichtet und lassen sich in zwei Kategorien einteilen: solche, die eine Reihe bestehender Aufgaben automatisieren, und solche, die einen Funktionsumfang erweitern, darunter die Erfassung von Analysen, das Testen von Designs oder die Verbesserung der Barrierefreiheit.

Plug-ins zur Automatisierung monotoner Aufgaben

Bei Figma sehen wir dies auf unseren eigenen Community-Seiten: Symbol- und Bildgeneratoren, die Ersteller*innen Zeit ersparen, Inhalte von Grund auf neu aufzubauen oder zu komprimieren, gehören zu unseren beliebtesten Plug-ins und belegen die Hälfte der Top-Ten-Plätze. Andere helfen bei der Automatisierung von Abläufen, der Konvertierung von Designs in HTML oder der Umwandlung von Designs in Folienstapel. Das gemeinsame Thema? Die Verringerung der Komplexität und die Vereinfachung von Arbeitsabläufen. Alles, was Designer*innen davon abhält, ein Tool zu verlassen, um ein anderes zu nutzen, oder eine Reihe von Klicks unendliche Male zu wiederholen, ist eine gute Grundlage für Plug-ins.

Wer schon einmal am Karpaltunnelsyndrom litt oder die Suchergebnisse für „ergonomische Tastaturen“ durchforstet hat, kennt wahrscheinlich die akuten Schmerzen, die viele sich wiederholende Designaufgaben verursachen können. Es gibt zwar unzählige Gründe, eine Karriere im Design anzustreben

, aber das endlose Erstellen von Grafiken gehört normalerweise nicht dazu.

Matthew Ström, Produktdesign-Manager bei Stripe, erläutert, dass bei komplexen Designsystemen viele Wege zwischen einem Problem und seiner Lösungen liegen. Mit zunehmender Größe eines Designsystems ist mit dem Erkunden jedes Wegs zusätzliche Zeit und Mühe verbunden, wobei jede Iteration länger und länger dauert. „Low- oder No-Code-Tests und Automatisierungstools können dies wesentlich beschleunigen und den Designsystem-Teams unzählige Stunden an manueller Arbeit ersparen“, sagt er. In einem Artikel auf UXdesign.cc beschreibt Teisanu Tudor den Aufwand, der damit verbunden ist, zwanzig mögliche Kombinationen aus Schriftarten und -größen zu vergleichen. „Die meisten würden sich niemals alle zwanzig ansehen ... Nur sehr wenige würden sich überhaupt überlegen, wie viele mögliche Kombinationen es gibt, und dann jede einzelne erstellen, ohne eine bestimmte zu bevorzugen.“ Und dabei geht es nur um die Schrift.

„Es ist eine große Leidenschaft von mir, mit Designer*innen zu sprechen, um zu erfahren, wie sie Dinge erstellen, und mir dann zu überlegen, wie man dies schneller oder kreativer machen könnte“, so Andrew Pouliot, Machine Learning Engineer bei Diagram. „Weniger Zeit für mechanische Arbeiten aufwenden und ein qualitativ hochwertigeres Ergebnis erzielen. Ich denke, das wird ein wichtiger Bestandteil der Zukunft von Designsystemen sein.“ Diagram (das Team hinter dem bereits erwähnten KI-gestützten Tool Genius) ist in der Tool-Community bekannt für die Erstellung von Plug-ins für Prototyping, Automatisierung und Fehlerbehebung. Mit Automator, einem der am meisten genutzten Plug-ins von Diagram, können Teams benutzerdefinierte Drag-and-Drop-Automatisierungen für die Erstellung von Styleguides, die stapelweise Änderung der Größe von Symbolen oder den Abruf von API-Daten erstellen. (Und bis zum letzten Oktober hat es auch eine elegante Lösung für die langerwartete Suchen-und-Finden-Funktion

von Figma bereitgestellt.)

Plug-ins zur Erweiterung von Funktionen

Wenn Tools für bestimmte Anwendungsfälle nicht ausreichen, können Plug-ins und Integrationen helfen, die Lücke zu schließen. Stark hilft Teams bei der Suche und Behebung von Problemen der Barrierefreiheit und wird derzeit auf neun verschiedenen Plattformen unterstützt, darunter Desktop, Browser und verschiedenen Anwendungen. „Es ist eine Suite von Tools, und wenn du Teil des Stark-Ökosystems wirst, besteht die ganze Philosophie darin, dass wir uns in die Tools einklinken, die dein Produktteam bereits verwendet, egal ob du Designer*in, Entwickler*in, Projektmanager*in oder QA-Expert*in bist, und sie zu einem Barrierefreiheits-Workflow zusammenfügen“, erläutert Benedikt Lehnert, Chief Design Officer bei Stark, gegenüber TechCrunch.

Widgets zur Visualisierung und Organisation

Während bei Plug-ins die Funktionalität im Vordergrund steht, geht es bei Widgets vor allem um die Darstellung. Die In-App-Tools bieten in der Regel eine Ebene der Interaktivität und laden Nutzer*innen ein, zu interagieren und Inhalte zu visualisieren. Zu den beliebtesten Widgets für Designsysteme gehören Diagramme zur Darstellung von Informationen, Schaltflächen für schnelle Verlinkungen, Geräterahmen zur Darstellung von Stilen in Aktion und eine Fülle von Tabellen zur Organisation von Komponenteneigenschaften.

Widgets können die Navigation in Figma- und FigJam-Dateien verbessern, indem sie sich an die Nutzer*innen der Anwendung richten. Mit einem Geräterahmen-Widget können Designer*innen schnell eine Idee für eine Benutzeroberfläche skizzieren, ohne das Internet nach einem sauberen Smartphone-Wireframe durchsuchen zu müssen. Ein Widget für Eigenschaftstabellen von Komponenten generiert Eigenschaften aus Figma-Komponenten und spart Designer*innen Zeit bei der Erstellung von Spezifikationen und Dokumentationen für Handoffs.

Bei jedem dieser Beispiele holen Plug-ins und Widgets die Nutzer*innen dort ab, wo sie sind, und bieten schnellere und einfachere Wege, um dorthin zu gelangen, wo sie hinwollen. Dies kann große Vorteile für Designsystem-Teams bedeuten, die mit Akzeptanz zu kämpfen haben oder die Wartung und Verteilung optimieren möchten. Durch die Verringerung von Reibung oder die Bereitstellung zusätzlicher Funktionen für ihre Nutzer*innen können diese Tools die Möglichkeiten eines Systems erweitern und die Erstellung und Verwaltung von Bibliotheken und Komponenten erleichtern. Auch wenn das Produktdesign immer komplexer wird und Teams sich durch ein Labyrinth von Touchpoints, Geräten und Plattformen bewegen müssen, schaffen diese Integrationen neue Möglichkeiten zur Vereinfachung und Skalierung dieser Arbeitsabläufe.

Und doch sind diese Tools nur so leistungsstark wie ihre Eingaben.

KI-gestützte Tools

Während Plug-ins die Funktionalität und Widgets die Benutzerfreundlichkeit verbessern, bietet künstliche Intelligenz eine neue Grundlage für beides. Wir können zwar nicht in die Zukunft sehen, aber ein Blick auf beliebte Plug-ins und Widgets gibt uns einige Hinweise darauf, welche Schwachpunkte derzeit bestehen und wie KI diese Lücken schließen kann.

Die schnelle Generierung von Symbolen, Bildern, Text und anderen Inhalten ist ein offensichtlicher Bedarf – und einige Unternehmen stellen sich dieser Herausforderung. Shopify kündigte vor Kurzem KI-generierte Produktbeschreibungen an, die mithilfe der neuen Funktion „Shopify Magic“ erstellt werden. Das neueste Plug-in von Diagram, Magician, verwendet tiefe generative Modelle zum Einfügen von Symbolen, Texten und Bildern in Figma-Designdateien anhand von textbasierten Vorgaben. (Wir haben hier

mit Jordan Singer über die Entwicklung von Magician mithilfe der Plug-in-API von Figma gesprochen.)

Laut Andrew von Diagram hat GitHub Copilot seine Vorstellung von der Interaktion zwischen Mensch und Computer verändert. Der Assistent für maschinelles Lernen vervollständigt automatisch Codezeilen im Code-Editor oder schlägt Lösungen anhand von textbasierten Aufforderungen vor. „Es ist wie eine Erweiterung des Gehirns“, erklärt er. „Ich beginne, den Namen einer Funktion zu schreiben, und bevor ich überhaupt zu den Parametern komme, hat es den Rest der Zeile bereits ausgefüllt.“ Das Tool berücksichtigt auch den Kontext im Editor – nicht nur die aktuelle Datei, sondern auch andere Aspekte eines Projekts – und bietet bei jeder Eingabe intelligente Vorschläge an.

Es ist nicht perfekt. Nutzer*innen müssen möglicherweise die Codebasis abstimmen und bei Bedarf Fehler beheben. GitHub Copilot schafft jedoch eine Interaktion zwischen Mensch und Computer. Dadurch werden die Workflows von Entwickler*innen beschleunigt. Das Tool zeigt, dass der Einsatz von KI in Design und Entwicklung immer üblicher wird. Andrew freut sich darauf, auch in Zukunft intelligente Tools wie Genius für die breitere Designsystem-Community zu entwickeln. „Designsysteme werden sich in den nächsten Jahren stark verändern, und der beste Weg, die Zukunft vorherzusagen, ist, sie zu gestalten“, sagt er.

Kaelig Deloumeau-Prigent, Gründer der Design Tokens W3C Community Group, sieht ein großes Potenzial von KI darin, Designsystem-Workflows zu verbessern. „Es gibt so vieles, das durch KI gesteuert werden kann. Der KI-gestützte Copilot von GitHub kann uns jetzt beim Schreiben von Code helfen. Ich wünsche mir die gleiche Art der Zusammenarbeit mit Technologien für Designsysteme“, führt er aus. Kaelig glaubt, dass in den nächsten Jahren bessere Token-Management-Systeme entwickelt werden, die dazu beitragen können, die Einstiegshürde zu senken. Derzeit gibt es nur wenige schlüsselfertige Lösungen, und die Alternative erfordert erhebliche Programmierkenntnisse sowie ein Verständnis von GitHub, Audits und Automatisierungen. „Manche Teams können diese Hürde vielleicht nicht überwinden“, sagt er. Er sieht KI-gestütztes Design als den Bereich, in dem Token in Zukunft am hilfreichsten sein werden.

Anschluss an die Zukunft

In einer von Figma veranstalteten Podiumsdiskussion im Jahr 2021

gab Soleio einen Ausblick auf das kommende Jahr: „Es ist zu erwarten, dass wir erhebliche Fortschritte dabei sehen werden, wie Designprozesse und Feedback zunehmend automatisiert werden. So wie wir heute in kollaborativen Umgebungen mit anderen Menschen zusammenarbeiten, erwarte ich, dass wir uns in einer Zukunft wiederfinden werden, in der Wissensarbeit, Feedback und Iterationen vermehrt von virtuellen Kooperationspartnern durchgeführt werden: nicht menschliche Akteure, die gut auf die Arten von Aufgaben abgestimmt sind, die wir heute manuell erledigen.“

Mit der zunehmenden Zugänglichkeit von KI können wir mit zukünftigen Funktionen rechnen, wie z. B. der Erweiterung von Designsystemen, um neue Schnittstellen schnell zu verbinden, oder der Identifizierung möglicher Probleme oder Konflikte, bevor sie auftreten. Eine weitere Gelegenheit für die Technologie liegt im Bereich Dokumentation und Anleitung, um nicht nur die Compliance zu verbessern, sondern auch die vorgeschlagene Nutzung.

Bedarf an (menschlichen) Designer*innen

KI kann ein wertvolles Tool für Designer*innen sein. Allerdings darf man nicht vergessen, dass sie genau das ist: ein Werkzeug. Genauso wie Widgets und Plug-ins kann sie bestimmte Aufgaben automatisieren und neue Möglichkeiten für das Design eröffnen, aber sie kann die Kreativität und Problemlösungsfähigkeiten von Menschen nicht ersetzen (und wirft auch neue Bedenken auf). Mit dem Aufkommen neuer Umgebungen wie Web3 und dem Metaverse steigt außerdem der Bedarf an responsiven Designlösungen sowie an differenzierteren, interessanteren Interaktionen.

Sam Anderson, Director for Design Systems & Accessibility bei Intuit, ist der Ansicht, dass Design auch in absehbarer Zukunft eine entscheidende, von Menschen ausgeführte Tätigkeit sein wird. „Es ist schwierig, eine KI zu entwickeln, die das Kundenproblem erkennt, aus dem Katalog die richtige Lösung für das Problem auswählt und es auf dem Bildschirm in der richtigen Weise darstellt. Dafür brauchen wir immer noch menschliche Designer*innen“, erklärt er. Er hofft, dass die Automatisierung die Designaktivitäten beschleunigen kann, damit Teams schneller vom Konzept zum Prototyp gelangen, was wiederum rasches Experimentieren und schnellere Bildschirmtests und Nutzerfeedback ermöglicht.

Keine Sorge, die Nachfrage nach Designer*innen ist ungebrochen

. „Da Design vermehrt mit Code verknüpft ist und Designsysteme einfacher zu bedienen und akzeptierter sind, können mehr Menschen passable Oberflächen erstellen“, so Andrew Hogan, Head of Insights bei Figma. „Es wird jedoch eine größere Nachfrage nach großartigen Interaktionen und nach neuen, interessanten Interaktionen geben. Der Wunsch von Unternehmen, sich von der Masse abzuheben und einen Status und eine Differenzierung zu schaffen, lässt vermuten, dass die Nachfrage nach Designer*innen noch weiter steigen wird.“ Designer*innen sind weiterhin erforderlich, um mehr Richtungen zu erkunden, neues Feedback und Herausforderungen zu berücksichtigen und neue Blickwinkel auf Probleme aufzuzeigen.

Diese Designer*innen und Technolog*innen müssen natürlich ein tiefes Verständnis für diese Technologien haben, um ethische und verantwortungsvolle Lösungen für die Zukunft zu entwickeln.