So spart DUOTONE über 80 Stunden pro Projekt, indem es den gesamten Workflow in Figma ausführt

DUOTONE, gegründet 2018 in Seoul, ist eine digitale Designagentur mit 60 Mitarbeiter*innen, die sich auf UX/UI-Design und Designsystem spezialisiert hat. Das Studio arbeitet mit Unternehmen aus einer Vielzahl von Branchen, darunter Finanzen, Handel, Automobil und Content, zusammen, um digitale Projekte zu liefern.

Seit der Einführung von Figma im gesamten Unternehmen vor fünf Jahren ist es ein Teil ihres Betriebssystems geworden. Von der Planung und Dokumentation über die Designsystem-Architektur bis hin zur visuellen Produktion läuft der gesamte Workflow des Teams im Figma-Ökosystem, was zu folgenden Ergebnissen führt:

• 90 % Reduzierung der Zeit für das Schreiben von Spezifikationsdokumenten beim Projektübergang, wodurch mehr als 80 Stunden bei jedem Projekt eingespart werden.
• 20 % weniger Zeitaufwand für die visuelle Produktion
• Verkürzung der QA-Zeit für Berichte von Stunden auf 5 bis 10 Minuten

Von verstreuten Dateien zu einer einzigen Arbeitsfläche

In der Vergangenheit arbeitete DUOTONE mit mehreren Stakeholdern über mehrere Dokumente hinweg, was zu Versionskonflikten und unterbrochenen Abläufen führte. Seit der Zusammenführung aller Daten in Figma hat sich die Kommunikation mit dem Kunden vollständig verändert. Entscheidungen und Diskussionen finden direkt auf der Arbeitsfläche statt. Das führt zu effizienter Kommunikation und reibungslosen Übergaben.

Die Übergaben an Entwickler*innen wurden ebenfalls viel effizienter. Früher bedeutete das Fertigstellen eines Designs das Erstellen eines separaten Spezifikationshandbuchs, das an die Ingenieure weitergegeben wurde. Der Dev Mode eliminierte diesen Schritt: Ingenieur*innen konnten auf jedes Element klicken und dessen Komponentenstruktur, Token-Werte, Schriftdetails und gebrauchsfertige Code-Schnipsel für Web, iOS und Android direkt in der Designdatei sehen.

Infolgedessen hat sich die Zeit für das Schreiben von eigenständigen Spezifikationsdokumenten in der Übergabephase um 90 % verringert, was mehr als 80 Stunden pro Projekt spart. Wenn es eine Lücke zwischen dem gibt, was die UI zeigt, und wie es tatsächlich gebaut ist, können Designer*innen auch Annotationen neben dem relevanten Bildschirm hinzufügen, um die Absicht festzuhalten oder Randfälle zu kennzeichnen. Mit Tools wie Jira, Linear und Storybook verbunden, fließt eine Änderung in der Entwurfsphase direkt in die Arbeit des Entwicklungsteams.

Designsysteme entwickeln, die Produkte bei großem Umfang konsistent halten

Eine häufige Kundenanfrage ist, dass DUOTONE ein Designsystem entwickelt, um die Produkte zu verwalten. Die Messlatte liegt hoch, da ein System standhalten muss, wenn ein Produkt über Teams, Plattformen und Zeit hinweg skaliert. DUOTONE hat Systeme in allen Bereichen aufgebaut und gepflegt, darunter Finanzen, Handel, Automobilindustrie und Content, wobei Variablen und die Komponentenarchitektur im Mittelpunkt stehen.

Dieser Ansatz erwies sich in einem In-Car-Infotainment-Projekt als wertvoll. Jedes Fahrzeugmodell hatte eine andere Displayauflösung, und helle und dunkle Themen mussten nahtlos mit der Fahrumgebung gewechselt werden, z. B. beim Fahren am Tag vs. Nacht oder beim Einfahren in einen Tunnel. Die Anforderungen waren komplex.

Indem alles als Variablen definiert wurde – die Auflösung des Fahrzeugs (Breite und Höhe), die Höhe der Schaltflächen und sogar die Radien der Ecken – und die Komponenten nach Größe (klein, mittel, groß) aufgeteilt wurden, würde das Anpassen einiger weniger Tokenwerte in der Hauptbibliothek jeden Bildschirm sofort aktualisieren, anstatt jeden Bildschirm in einem Verlauf von Wochen komplett neu zu zeichnen.

Über die UI hinaus: Figma in die visuelle Produktion erweitern

Mit dem erweiterten KI-Bildbearbeitungstoolkit von Figma hat DUOTONE einen großen Teil der visuellen Arbeit, wie Illustrationen und Werbegrafiken, in Figma integriert.

Funktionen wie Vektorisieren, die ein Bitmap-Bild automatisch in Vektoren umwandelt, und Hintergrund entfernen, die ein Motiv von seinem Hintergrund isoliert, haben Arbeitsschritte entfernt, die das Team früher zwischen spezialisierten Tools hin- und hergeschickt hätten. Der abschließende Ton und das Gefühl eines Assets – Belichtung, Farbtemperatur, Schatten, allgemeine Stimmung – werden jetzt in derselben Figma-Datei eingestellt, in der der Rest der Kampagne lebt.

Das Ergebnis: Ein Kampagnenvisual kann von der Konzeption bis zur Fertigstellung auf einer einzigen Arbeitsfläche getragen werden, wobei 20 % weniger Zeit für Dateiexporte und Toolwechsel verloren geht.

Mit visueller und UI-Arbeit auf derselben Arbeitsfläche kann das Team schneller zusammenarbeiten. Alle Designer*innen arbeiten von einer einzigen verlässlichen Quelle aus, teilen Feedback in Echtzeit und können mehrere Erkundungen nebeneinander überprüfen. Dasselbe gilt für Kundenbewertungen: Das Team teilt den Zwischenstand der Arbeit exakt so, wie er ist, erhält sofortiges Feedback und überarbeitet es sofort, bevor es erneut vorgeführt wird.

Produktivität steigern mit benutzerdefinierten Plugins

DUOTONE hat konsequent erweitert, was sie innerhalb von Figma tun können, indem sie Plugins integrieren – von der Suche nach Assets bis zur Wartung des Designsystem. Wenn ein Community-Plugin nicht ganz passt, entwickelt das Team genau das, was sie mit Figma Plugin-API brauchen, und verwandelt einmalige Lösungen in geteilte Fähigkeiten, die die Produktivität im gesamten Studio skalieren.

Ein jüngstes Beispiel ist eine KI-gestützte Rechtschreibprüfung für Kundendokumente. Das Korrekturlesen eines Berichts nahm bisher die Zeit mehrerer Designer*innen in Anspruch. Jetzt scannt das Plugin jede Textebene in der Arbeitsfläche in einem Durchgang und schlägt Korrekturen vor, wodurch eine mühsame manuelle Überprüfung mit einem einzigen Klick ersetzt wird. Infolgedessen wurde die durchschnittliche QA-Zeit pro Bericht von 3 Stunden auf 5 Minuten reduziert und auch die Korrekturen in letzter Minute vor der Lieferung nahmen ab.

Jedes Teammitglied wird ermutigt, ein Plugin zu erstellen, wenn sie auf eine langweilige, sich wiederholende Aufgabe stoßen. Und das tun sie oft, indem sie innerhalb weniger Tage liefern. Ein aktuelles Beispiel: Ein Junior-Designer hat ein Plugin entwickelt, das Update-Logs automatisch kompiliert und damit stundenlanges manuelles Kopieren und Einfügen und die kleinen Fehler, die damit verbunden waren, ersetzt.

Das Ergebnis ist eine wachsende benutzerdefinierte Bibliothek von Plugins – Rechtschreibprüfer, automatische Seitenzahlen, Diagrammgeneratoren, Update-Log-Kompilierer und mehr – entwickelt, gepflegt und erweitert von Designer*innen im gesamten Studio. Diese Kultur des Aufbaus auf Figma hat die Funktionsweise des Studios verändert. Figma ist nicht mehr nur der Ort, an dem Design entsteht; es ist die Plattform, die skaliert, wie DUOTONE arbeitet.

Von der manuellen Wartung zur KI-gestützten Wartung

Ein Designsystem erfordert mehr Aufwand zur Wartung als zum Aufbau. Wenn sich eine Bibliothek entwickelt, steigt auch der operative Aufwand zur Organisation von Tokens, zur Abstimmung von Benennungskonventionen und zur Überprüfung der Konsistenz über Dateien hinweg.

DUOTONE löste dies, indem sie Figma in die einzige Quelle der Wahrheit verwandelten, die ihre KI-Agenten speist. Über den MCP-Server von Figma und die Plugin-API lesen Agenten wie Claude und Cursor die Bibliothek von DUOTONE mit vollständigem Designsystem-Kontext – seine Komponenten, Variablen, Tokens und Benennungskonventionen – und decken dann Inkonsistenzen auf, markieren Werte, die tokenisiert werden sollten, und schlagen Korrekturen vor, die den Konventionen des Teams folgen. Sobald das Team die Vorschläge überprüft und genehmigt hat, fließen die Aktualisierungen als Variablen zurück in Figma, wodurch aus Tagen repetitiver Systemarbeit nur noch ein Bruchteil der Zeit wird.

Das Team erweitert dieses Muster weiter und testet einen Workflow, bei dem mit KI funktionale Anforderungsdokumente (FRDs) direkt aus Spezifikationen und Komponentendaten innerhalb einer Figma-Datei erstellt werden. Visuelle Entscheidungen auf der Arbeitsfläche werden automatisch zu strukturierten Informationen, was die Reibung zwischen Design, Produkt und Technikübergabe verringert. Der gleiche Kontext-Flow ermöglicht es der KI auch, neue Designarbeiten zu generieren, die von Anfang an konsistent mit dem System bleiben. Das Ergebnis: Wartung und Dokumentation werden auf KI übertragen und Designer*innen konzentrieren sich auf die Arbeit, die nur sie leisten können.

OPENPATH: Wo die Expertise von DUOTONE zum Playbook der Community wird

DUOTONE teilt sein Fachwissen mit der Design-Community über OPENPATH, eine unternehmensinterne Bildungsplattform, die aus realen Kundenprojekten entstanden ist. Was als interne F-und-E-Initiative begann, hat sich nun zu einer öffentlichen Ressource entwickelt, die aus jahrelangen Projektlektionen geformt wurde.

Der Lehrplan geht über die Werkzeugschulung hinaus. Er deckt Methoden ab, die unter realen Kundenbedingungen erprobt wurden – das Erstellen komplexer, variablenbasierter Designsysteme, die Rationalisierung von Prozessen mit Plugins und die Einbindung von KI-Agenten in Design-Workflows. Was Designer*innen von OPENPATH erhalten, sind nicht nur Designfähigkeiten; es ist das, was eine Agentur tatsächlich tut, wenn die Arbeit ausgeliefert werden muss. Junior-Designer*innen verlassen das Programm mit einer soliden Grundlage, die es ihnen ermöglicht, ab dem ersten Tag zu allem beizutragen, und mit weniger Fehlern, die normalerweise mit der frühen Karriere verbunden sind. Senior-Designer*innen lernen neue Arbeitsweisen, die an das angepasst sind, wie sich die Disziplin und die Rolle des Designs selbst entwickeln.

Für DUOTONE ist das Ziel nicht nur, ein herausragendes Studio zu sein. Es geht darum, die Messlatte für Design in der gesamten Branche höher zu legen. Neben dem ständig wachsenden Ökosystem von Figma wird DUOTONE weiterhin neue Wege für Designer*innen eröffnen, um mit KI zusammenzuarbeiten, mehr von dem zu tun, wofür sie bestimmt sind, und sich auf das zu konzentrieren, was wirklich wichtig ist.