Ein Designsystem kann in Figma sehr ordentlich sein und beim Übergang zum Produkt dennoch Fragen offenlassen. Deshalb prüfe ich, ob Tokens, Komponenten und Zustände auch die Entscheidungen erklären, die im Code benötigt werden.
In Buy&Sell wollte ich etwas Konkretes prüfen: ob die visuellen Zustände des Systems den Berechtigungen, Daten und dem Lebenszyklus des Produkts entsprechen.
Verträge gestalten, keine Kataloge
Eine nützliche Komponente ist nicht die mit den meisten Varianten. Sie formuliert einen verständlichen Vertrag: was sie erhält, was sie zurückgibt, welche Zustände sie zulässt und was sich ändern darf, ohne das Ganze zu beschädigen.
Figma unterstützt Erkundung und Abstimmung. Code verlangt Präzision. Weichen beide voneinander ab, reicht eine Pixelkorrektur nicht: Das gemeinsame Modell muss überprüft werden.
Übergabe ist ein Gespräch
Dokumentation ersetzt nicht die Zusammenarbeit zwischen Design und Entwicklung. Ein belastbares System enthält Entscheidungen, Beispiele und Grenzen, aber auch einen Prozess, um Ausnahmen auszuhandeln.
Entscheidend ist nicht, dass zwei Screenshots übereinstimmen. Entscheidend ist, Absicht, Hierarchie und Verhalten zu erhalten, sobald das Produkt echte Daten verarbeitet.
Das System von Figma bis Angular erkunden