Ein UI-Kit ist eine Sammlung fertiger Oberflächenbausteine, die in einem Projekt immer wieder gebraucht werden: Buttons, Formularfelder, Karten, Hinweise, Navigationselemente. Es liegt meist als Datei in einem Design-Tool wie Figma und dient als Vorrat, aus dem Entwürfe zusammengesetzt werden.
- UI-Kit
Sammlung wiederverwendbarer Oberflächenbausteine für die Gestaltung, üblicherweise als Bibliothek im Design-Tool angelegt.
Beispiel: „Zieh den Button aus dem UI-Kit, dann stimmen Abstände und Zustände von allein.“Abgrenzung zum Design System: Das UI-Kit liefert die Bausteine. Ein Design System liefert zusätzlich die Regeln für ihren Einsatz, die Dokumentation und die Entsprechung im Code.
Wofür ein UI-Kit im Projekt sorgt
Der offensichtliche Nutzen ist Tempo. Ein Entwurf entsteht aus Bausteinen statt aus Rechtecken, und was einmal entschieden ist, wird nicht erneut verhandelt. Ein neuer Bildschirm braucht dann Minuten statt Stunden, weil die Bestandteile schon existieren.
Der weniger sichtbare Nutzen ist die Vollständigkeit. Wer einen Button als Komponente anlegt, legt ihn mit allen Zuständen an, und genau diese Zustände fehlen in freien Entwürfen am häufigsten. Was passiert beim Überfahren, wie sieht der deaktivierte Zustand aus, was zeigt der Button, während im Hintergrund gespeichert wird? Ohne Kit werden solche Fälle erst in der Entwicklung bemerkt und dort improvisiert.
Was ein UI-Kit brauchbar macht
Entscheidend ist, dass die Bausteine als echte Komponenten angelegt sind und nicht als kopierte Gruppen. Nur dann schlägt eine Änderung an der Quelle auf alle Verwendungen durch. Der zweite Punkt ist die Benennung: Wenn ein Baustein im Design-Tool anders heißt als im Code, entsteht bei jeder Übergabe Übersetzungsarbeit. Wir vergeben die Namen deshalb einmal gemeinsam und halten sie über beide Seiten hinweg gleich.
Genauso wichtig sind die Werte hinter den Bausteinen. Wenn Farben, Schriftgrößen und Abstände im Kit als benannte Variablen hinterlegt sind, lässt sich eine Anpassung an einer Stelle vornehmen und wirkt überall. Liegen sie als feste Zahlen in jedem Baustein, wird aus einer Farbänderung eine Woche Suchen und Ersetzen.
Gekauft oder selbst gebaut
Fertige UI-Kits gibt es zuhauf, viele davon kostenlos. Als Startpunkt für einen Prototyp sind sie brauchbar, weil sie in Stunden statt Tagen zu einem klickbaren Ergebnis führen. Für ein Produkt, das eine eigene Marke tragen soll, tragen sie selten weit: Die Bausteine sind auf ihre eigene Formensprache hin gebaut, und das Umbauen dauert am Ende länger als ein eigener Aufbau.