Getly
Ein UI-Kit ist ein Versprechen, Zeit zu sparen. Sie kaufen einen Satz Buttons, Formulare, Karten und Screens, damit Sie diese nicht neu zeichnen müssen und damit der nächste Screen aussieht, als gehöre er zum letzten. Ein gutes Kit hält dieses Versprechen über Monate. Ein schwaches liefert eine hübsche Vorschau, einen Ordner loser Frames und eine Woche Aufräumarbeit, bevor irgendetwas brauchbar ist.
Dieser Leitfaden richtet sich an Designer und Entwickler, die ein Kit auswählen, und an alle, die überlegen, selbst eines zu verkaufen. Er behandelt die Formate, was Sie vor dem Kauf prüfen sollten, wie Sie ein Kit allein anhand von Screenshots beurteilen und wie die Preise derzeit aussehen.
Design-Kits und Code-Kits sind verschiedene Produkte
Das Wort „UI-Kit“ steht für zwei Dinge, die sich nur ähneln. Ein Design-Kit ist eine Datei für ein Designwerkzeug: Figma, Sketch oder Adobe XD. Es liefert Komponenten, aus denen Sie Mockups und Prototypen zusammensetzen. Ein Code-Kit ist Quellcode: React-Komponenten, Tailwind-Vorlagen, Vue- oder Svelte-Komponenten, Flutter-Widgets, SwiftUI-Views. Es liefert etwas, das läuft.
Viele Verkäufer bieten beides an, und die besten halten beides im Gleichschritt: dieselben Namen, dieselben Tokens, dieselben Zustände. Wenn ein Kit beides verspricht, prüfen Sie, ob Designdatei und Code wirklich übereinstimmen. Ein Figma-Button mit vier Größen und ein React-Button mit zwei ist eine Abweichung, die Ihren Entwickler jedes Mal ein Gespräch kostet.
So schneiden die wichtigsten Formate im Vergleich ab.
| Kit-Typ | Für wen es passt | Was zu prüfen ist |
|---|---|---|
| Figma | Die meisten Produktdesigner und Teams, die Dateien an Entwickler übergeben | Komponenten mit Varianten, Auto Layout in jeder Komponente, lokale Styles oder Variablen für Farbe, Schrift und Abstände, Light und Dark Mode |
| Sketch | Designer auf dem Mac, die bereits mit Sketch arbeiten | Symbole mit Overrides, gemeinsame Text- und Ebenenstile, die Sketch-Version der Datei, ob sie ohne Warnungen zu fehlenden Schriften öffnet |
| Adobe XD | Teams, die noch ältere XD-Projekte pflegen | Komponentenzustände, ob der Verkäufer das Kit noch aktualisiert, ein Exportweg, falls Sie das Werkzeug wechseln wollen |
| React oder Next.js | Frontend-Entwickler, die Web-Apps bauen | TypeScript-Typen, der Styling-Ansatz, wie Komponenten Props annehmen, Attribute für Barrierefreiheit, eine Live-Demo |
| Tailwind-Vorlagen | Entwickler, die fertiges HTML oder JSX mit Utility-Klassen wollen | Tailwind-Version, eine Theme-Konfiguration mit den Tokens, responsive Klassen in jedem Abschnitt, Dark-Mode-Klassen |
| Flutter | Mobile-Entwickler, die iOS und Android aus einer Codebasis ausliefern | Flutter- und Dart-Version, Null Safety, eine Theme-Datei, Verhalten auf kleinen und großen Bildschirmen |
| Mobile Design-Kits (iOS, Android) | Designer nativer Apps | Einhaltung der Plattformrichtlinien (Safe Areas, Navigationsmuster), echte Gerätegrößen, Größe der Touch-Ziele |
Wählen Sie das Format, mit dem Ihr Team bereits arbeitet. Ein schönes Sketch-Kit ist ein schlechter Kauf für ein Figma-Team, denn bei der Konvertierung gehen Auto Layout und Varianten verloren, also genau das, wofür Sie bezahlt haben.
Was ein gutes UI-Kit enthält
Die Vorschaubilder verkaufen das Kit. Nützlich macht es das, was darunter liegt. Darauf sollten Sie achten.
Komponenten mit Varianten und Auto Layout
Jedes wiederkehrende Element sollte eine Komponente sein, keine kopierte Ebenengruppe. Ein Button sollte seine Größen, seine Typen (primär, sekundär, Ghost, destruktiv) und seine Zustände (Standard, Hover, gedrückt, fokussiert, deaktiviert, lädt) als Varianten einer einzigen Komponente haben, damit Sie aus einem Menü wechseln, statt den richtigen Frame zu suchen.
Auto Layout ist genauso wichtig. Tippen Sie eine längere Beschriftung in einen Button, und er sollte wachsen. Fügen Sie einer Tabelle eine Zeile hinzu, und die Zeilen darunter sollten nachrücken. Wenn Sie alles von Hand anpassen müssen, ist das Kit ein Bild einer Oberfläche, kein System.
Design-Tokens und Styles
Farbe, Typografie und Abstände sollten einmal definiert und überall verwendet werden. In Figma bedeutet das Variablen oder lokale Styles, im Code eine Theme-Datei, CSS Custom Properties oder eine Tailwind-Konfiguration. Achten Sie auf eine benannte Palette mit klaren Rollen (Hintergrund, Fläche, Text, Rahmen, primär, Gefahr), eine Schriftskala mit festen Größen und Zeilenhöhen und eine Abstandsskala, oft auf Basis von 4 oder 8 Pixeln.
Der Test ist einfach: Ändern Sie die Primärfarbe an einer Stelle. In einem guten Kit aktualisieren sich alle Buttons, Links und Badges. In einem schwachen finden Sie fest eingetragene Hex-Werte in fünfzig Ebenen.
Light und Dark Mode
Ein dunkler Modus wird heute in den meisten Produkten erwartet. Ein Kit, das ihn anbietet, sollte ihn über Tokens umsetzen, nicht über eine zweite Kopie jedes Screens. Prüfen Sie, ob beide Modi einen vernünftigen Kontrast haben, ob Rahmen und Schatten auf dunklen Flächen noch lesbar sind und ob Bilder und Illustrationen auf schwarzem Hintergrund nicht grell wirken.
Barrierefreiheit
- Kontrast. Fließtext sollte WCAG AA erfüllen, also ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, und 3:1 für großen Text und die Ränder von Bedienelementen. Hellgrauer Text auf Weiß ist der häufigste Fehler bei Kits, die in der Vorschau elegant wirken.
- Fokuszustände. Jede interaktive Komponente braucht einen sichtbaren Fokusstil für Tastaturnutzer. Wenn die Button-Varianten Hover und gedrückt haben, aber keinen Fokus, wurde das Kit nicht für die Tastatur gestaltet.
- Touch-Ziele. Tippflächen sollten unter iOS mindestens 44 mal 44 Punkte und unter Android 48 mal 48 dp groß sein. Kleine Icon-Buttons in mobilen Kits erreichen das oft nicht.
- Bei Code-Kits achten Sie auf semantisches HTML, Beschriftungen an Formularfeldern, ARIA-Attribute, wo sie nötig sind, und Tastaturbedienung für Menüs, Dialoge und Tabs.
Responsive Breakpoints
Ein Web-Kit sollte seine Layouts in mehreren Breiten zeigen, meist Smartphone, Tablet und Desktop. In einer Designdatei suchen Sie Frames für jeden Breakpoint und Komponenten, die sich anpassen. Im Code prüfen Sie, ob Raster, Navigation und Tabellen sich auf einem schmalen Bildschirm sinnvoll verhalten und nicht nur schrumpfen.
Icons und Schriften und ihre Lizenzen
Die meisten Kits bringen ein Icon-Set mit, viele nutzen eine bestimmte Schrift. Beides hat eigene Lizenzen. Finden Sie heraus, welche Icon-Bibliothek verwendet wird: Ein Open-Source-Set unter MIT oder einer vergleichbaren Lizenz lässt sich problemlos ausliefern, während vom Verkäufer gezeichnete Icons unter die Lizenz des Kits fallen. Bei Schriften prüfen Sie, ob die Schrift für kommerzielle Nutzung frei ist (viele Google Fonts sind es, unter der SIL Open Font License) oder ob Sie eine Schriftlizenz separat kaufen müssen. Ein Kit kann für kommerzielle Nutzung lizenziert sein, die Schrift darin aber nicht.
Dokumentation
Schon eine kurze Anleitung hilft: wie die Datei aufgebaut ist, wie die Tokens heißen, wie man das Theme ändert, wie man ein Code-Kit installiert und welche Abhängigkeiten es braucht. Eine Titelseite mit der Liste der Komponenten und ein Changelog sind Zeichen eines Verkäufers, der sein Produkt pflegt.
Updates
Designwerkzeuge und Frameworks ändern sich. Figma hat Variablen eingeführt, Tailwind ist auf eine neue Hauptversion gewechselt, React entwickelt sich weiter. Ein Kit, das seit Jahren nicht angefasst wurde, funktioniert vielleicht noch, aber ihm fehlen womöglich Funktionen, die die Arbeit erleichtern. Achten Sie auf eine Versionsnummer, ein Datum der letzten Aktualisierung und einen Hinweis, was sich zuletzt geändert hat.
Lizenzen für Kundenprojekte und kommerzielle Nutzung
Diese Frage wird gern übersprungen und später bereut. Klären Sie vor dem Kauf:
- Dürfen Sie das Kit in einem kommerziellen Produkt verwenden, das Sie verkaufen oder betreiben?
- Dürfen Sie es für Kundenprojekte nutzen, und wenn ja, für einen Kunden oder für viele?
- Dürfen Sie es in einer Vorlage oder einem Kit verwenden, das Sie dann weiterverkaufen? Fast jede Lizenz verbietet das, und das ist fair.
- Gilt die Lizenz für das ganze Team oder für einen Designer?
- Gelten für die mitgelieferten Icons und Schriften dieselben Bedingungen?
Wenn das Angebot dazu nichts sagt, fragen Sie den Verkäufer vor dem Bezahlen. Eine schriftliche Antwort in einer Zeile ist mehr wert als jede Annahme.
Wie Sie ein Kit anhand von Screenshots beurteilen
Meist können Sie die Datei vor dem Kauf nicht öffnen, also lernen Sie, die Vorschauen zu lesen.
- Suchen Sie das Komponentenblatt, nicht nur fertige Screens. Eine Seite mit einem Button in allen Zuständen, Eingabefeldern mit Fehlern und Hilfetext und einer vollständigen Schriftskala zeigt, dass das System existiert.
- Werfen Sie einen Blick auf das Ebenenpanel, falls es auf einem Screenshot zu sehen ist. Benannte Komponenten und Frames deuten auf eine geordnete Datei hin, „Group 214“ und „Rectangle copy 3“ auf das Gegenteil.
- Achten Sie auf realistische Screens. Leere Zustände, Fehlermeldungen, lange Namen in Tabellen und Lade-Skeletons zeigen ein Kit für echte Produkte. Zehn Versionen eines perfekten Dashboards mit runden Zahlen zeigen ein Kit für Screenshots.
- Zoomen Sie auf Text und Kanten. Schwacher Kontrast und ungleichmäßige Abstände sind in Vorschauen sichtbar, wenn man genau hinsieht.
- Bitten Sie bei Code-Kits um eine Live-Demo und ändern Sie die Breite des Browserfensters. Gehen Sie mit der Tab-Taste hindurch. Fünf Minuten davon verraten mehr als jede Beschreibung.
- Zählen Sie, was enthalten ist. Ein gutes Angebot nennt die Zahl der Komponenten, Screens und Dateien, die Formate und die Werkzeugversionen.
Übergabe an die Entwicklung
Ein Design-Kit ist sein Geld wert, wenn ein Entwickler danach bauen kann, ohne zu raten. Einheitliche Token-Namen, die dem entsprechen, was später im Code existiert, Komponenten, die echten Code-Komponenten entsprechen, und Abstände nach einer Skala statt beliebiger Werte verringern das Hin und Her. Wenn Ihr Team den Dev Mode von Figma oder ein ähnliches Inspektionswerkzeug nutzt, werden Auto Layout und Variablen zu lesbaren Werten, von Hand gezeichnete Frames dagegen zu einer Liste von Pixelabständen.
Die stärkste Lösung für ein Produktteam ist oft ein passendes Paar: ein Design-Kit und ein Code-Kit aus derselben Quelle mit denselben Tokens. Wenn Sie beides getrennt kaufen, wählen Sie so, dass die Grundlagen übereinstimmen, oder planen Sie Zeit für den Abgleich ein.
Was UI-Kits kosten
Auf Getly gibt es laut Messung vom 2. Oktober 2026 18 aktive UI-Kits in den Kategorien UI Kits und Mobile UI Kits. Keines davon ist kostenlos. Das untere Quartil liegt bei $7.00, der Median bei $12.00 und das obere Quartil bei $19.75. Die meisten werden als .zip-Archiv ausgeliefert.
Das ergibt einen brauchbaren Rahmen. Unter etwa $7 erwarten Sie ein fokussiertes Kit: die Screens einer App oder einen kleinen Komponentensatz. Um $12 erwarten Sie eine ordentliche Komponentenbibliothek mit Styles. Ab etwa $20 dürfen Sie Varianten, Tokens, beide Farbmodi, Dokumentation und eine klare Lizenz verlangen. Größere kommerzielle Designsysteme kosten anderswo deutlich mehr, deshalb ist die Frage nie nur der Preis, sondern ob das Kit abdeckt, was Sie tatsächlich bauen werden.
Für Verkäufer, die ein UI-Kit erstellen
Wenn Sie ein Kit zum Verkauf bauen, ist die Checkliste oben zugleich Ihre Produktspezifikation. Ein paar Punkte zählen am meisten:
- Zeigen Sie das System, nicht nur die Bilder. Fügen Sie Vorschauen des Komponentenblatts, der Token-Seite und beider Farbmodi hinzu. Käufer, die wissen, worauf sie achten, wollen das sehen.
- Nennen Sie Format und Versionen im Titel oder in der ersten Zeile: Figma, Sketch, React, Tailwind, Flutter und welche Version.
- Formulieren Sie die Lizenz in klaren Worten, einschließlich Kundenprojekten, Teamnutzung und den Bedingungen für mitgelieferte Icons und Schriften.
- Listen Sie den Inhalt mit Zahlen auf: Komponenten, Screens, Breakpoints, Dateien.
- Legen Sie ein kurzes Readme in das .zip, damit der Käufer sofort weiß, wo er anfangen soll.
- Aktualisieren Sie das Kit und sagen Sie es. Ein Changelog in der Beschreibung zeigt Käufern, dass das Kit lebt.
Ein UI-Kit ist ein kleines Produkt mit einem langen Leben. Wählen Sie eines, das wie ein System aufgebaut ist, prüfen Sie die Lizenz, bevor Sie darauf aufbauen, und es hat sich schon beim ersten Projekt bezahlt gemacht.
