Ein Prototyping-Tool ist eine Software, mit der sich Oberflächen entwerfen und zu klickbaren Abläufen verbinden lassen, bevor entwickelt wird. Verbreitet sind Figma, Sketch und Adobe XD. Aus den Entwürfen entstehen Clickdummies, die sich Beteiligten und Testpersonen vorlegen lassen.
- Prototyping-Tool
Software zum Entwerfen von Oberflächen und zum Verbinden dieser Entwürfe zu klickbaren Abläufen.
Beispiel: „Der Ablauf liegt im Prototyping-Tool, du kannst dich durchklicken.“Verbreitete Vertreter: Figma, Sketch, Adobe XD und Penpot als quelloffene Alternative. Figma ist im Markt am weitesten verbreitet und läuft im Browser.
Was diese Werkzeuge leisten
Der erste Teil ist das Zeichnen: Flächen, Text, Bilder und Bedienelemente auf einer Zeichenfläche anordnen. Der zweite Teil unterscheidet ein Prototyping-Tool von einem Grafikprogramm: wiederverwendbare Komponenten mit Zuständen, benannte Werte für Farben und Abstände, und die Möglichkeit, Bildschirme über Klickflächen zu verbinden.
Dazu kommt die Zusammenarbeit. Mehrere Personen arbeiten gleichzeitig an derselben Datei, Kommentare hängen direkt am betreffenden Element, und die Entwicklung liest Maße, Farben und Abstände unmittelbar aus dem Entwurf ab. Diese Übergabe ohne Zwischendokument ist in der Praxis der größte Zeitgewinn.
Wo die Grenze liegt
Ein Prototyping-Tool zeigt, wie eine Oberfläche aussieht und sich anfühlt. Was darin klickbar wirkt, läuft ohne Datenbank und ohne Verarbeitung von Eingaben. Wer das nicht ausspricht, erzeugt bei Auftraggebern regelmäßig den Eindruck, das Projekt sei fast fertig.
Auch die technische Umsetzbarkeit prüft kein Werkzeug. Ein Entwurf kann Schriftgrößen, Verläufe und Bewegungen enthalten, die im Browser nur mit erheblichem Aufwand funktionieren. Deshalb gehört ein Blick der Entwicklung auf den Entwurf dazu, bevor er freigegeben wird.
Wie es sich mit dem Design System verzahnt
Der Vorrat an Bausteinen liegt als UI-Kit in derselben Datei. Ändert sich dort eine Komponente, ziehen alle Verwendungen mit. Damit wird das Prototyping-Tool zur Arbeitsumgebung für das Design System auf der Gestaltungsseite, während der Code die andere Hälfte trägt. Beide Seiten synchron zu halten, ist die eigentliche Daueraufgabe.