Was ist eine Komponentenbibliothek?
Stell dir vor, du willst auf deiner Website die Farbe aller „Termin buchen“-Knöpfe ändern. Ohne Komponentenbibliothek klickst du dich durch 40 Seiten. Mit ihr änderst du einen Knopf, und alle anderen ziehen nach.
Eine Komponentenbibliothek ist genau dieser Mechanismus: eine Sammlung von Bausteinen deiner Oberfläche. Typische Komponenten sind Buttons, Eingabefelder, Karten, Menüs, Hinweisboxen. Jede liegt einmal als Original vor, Figma nennt es Hauptkomponente. Überall, wo sie gebraucht wird, steht eine verknüpfte Kopie, die Instanz.
Die Nielsen Norman Group beschreibt Komponentenbibliotheken als Sammlung vorgefertigter, wiederverwendbarer Oberflächen-Elemente — mit Name, Eigenschaften, Zuständen und oft dem passenden Code. Ein Button hat etwa die Zustände normal, Maus darüber, gedrückt und deaktiviert.
Komponentenbibliothek, Design-System, Styleguide
Die Begriffe werden gern in einen Topf geworfen. Sie hängen zusammen, sind aber nicht dasselbe:
- Design Token: die kleinsten Werte, etwa eine Farbe, ein Abstand, eine Schriftgröße. Komponenten bauen auf ihnen auf.
- Komponentenbibliothek: die Bausteine selbst, aus Tokens zusammengesetzt.
- Styleguide: die Regeln für das Aussehen, oft ein Dokument ohne lebende Bausteine.
- Design-System: das Ganze — Prinzipien, Tokens, Komponenten, Muster, Dokumentation und wer es pflegt.
Kurz gesagt: Die Komponentenbibliothek ist das Werkzeug-Herzstück eines Design-Systems, aber eben nur ein Teil davon. Wer eine Bibliothek ohne Regeln und ohne Verantwortlichen hat, hat einen Bauteilekasten, kein System. Zum Ordnen der Bausteine nutzen viele Teams Atomic Design, eine Methode in fünf Stufen vom kleinsten Element bis zur fertigen Seite.
Was eine Komponentenbibliothek spart
Die Zahlen dazu kommen fast alle von Tool-Anbietern und großen Firmen. Lies sie als Richtung, nicht als Versprechen.
Test · IBM Carbon
Dasselbe Formular, zweimal gebaut
4,2 h
von Hand (Median)
2 h
mit der Bibliothek
Fast halb so lang, Einarbeitung eingerechnet
Kleiner Test der Agentur Sparkbox mit acht Entwicklern. Bei der Barrierefreiheit waren aber zwei Handarbeiten besser.
Praxis · Headspace
Meditations-App mit eigenem System
85 %
einer Design-Datei aus dem System
20–50 %
Zeitersparnis je Aufgabe
Einfache Aufgaben 20–30 %, komplexe bis 50 %
Selbstauskunft im Figma-Blog, 2023.
Figma hat 2019 selbst gemessen: Mit einem Design-System lösten Designer eine Aufgabe 34 % schneller. Figma nennt das ausdrücklich die Obergrenze, nicht den Alltagswert. Der größere Gewinn ist ohnehin schwer zu messen: Deine Website sieht überall gleich aus, und neue Seiten entstehen aus geprüften Teilen.
Häufige Fehler
Fehler 1 · Instanzen lösen
„Nur hier schnell anders.“ Figma, Elementor und WordPress erlauben es, eine Kopie vom Original zu lösen. Ab dann bekommt sie keine Änderungen mehr — und nach einem Jahr hast du sieben Sorten Buttons. Das Gesundheitsunternehmen athenahealth wertet solche gelösten Kopien deshalb monatlich als Warnsignal aus.
Fehler 2 · Zwei Bibliotheken, die auseinanderlaufen
Der Button in Figma heißt „Primary“, auf der Website „Button blau“, und die Ecken sind verschieden rund. Gib Design und Website dieselben Namen und dieselben Tokens.
Fehler 3 · Bibliothek für fertig halten
Ein Baustein aus der Bibliothek ist nicht automatisch barrierefrei oder fehlerfrei. Im Sparkbox-Test waren zwei von acht Handarbeiten zugänglicher als die Bibliotheks-Version. Prüf jeden Baustein einmal gründlich, dann profitieren alle Seiten davon.
Fehler 4 · Pflege unterschätzen
Eine Bibliothek muss jemand pflegen. Im Design Systems Report 2025 von zeroheight sagten 41 % der Firmen unter 500 Mitarbeitenden, ihnen fehlten Leute dafür — und das sind schon Firmen, die ein System betreiben.
Womit du sie baust
- Figma: Komponenten und Bibliotheken für das Design, veröffentlichen ab dem bezahlten Professional-Tarif.
- Elementor: Komponenten in Version 4, mit Elementor Pro und den neuen Atomic-Elementen.
- WordPress: synchronisierte Vorlagen im Block-Editor, ohne Zusatz-Plugin.
- Storybook: für Entwickler, um Bausteine einzeln zu bauen und zu dokumentieren.
- Fertige Bibliotheken: Google Material, IBM Carbon oder Shopify Polaris als Vorbild oder Grundlage.
Häufige Fragen
Lohnt sich eine Komponentenbibliothek auch für kleine Websites?
Ja, wenn deine Website mehr als ein paar Seiten hat. Schon fünf gemeinsame Bausteine sparen dir bei jeder Änderung Zeit und halten den Auftritt einheitlich. In Elementor oder WordPress ist das ohne Zusatzkosten möglich.
Was passiert, wenn ich eine Komponente ändere?
Alle verknüpften Kopien übernehmen die Änderung. Ausnahme: Kopien, die vom Original gelöst wurden. Die bleiben, wie sie sind.
Was ist der Unterschied zum Design-System?
Die Komponentenbibliothek enthält die Bausteine. Das Design-System umfasst zusätzlich Regeln, Design Tokens, Dokumentation und die Verantwortung für die Pflege.
Brauche ich Figma und Storybook?
Nicht unbedingt. Wer nur eine WordPress-Website pflegt, kommt mit den Komponenten in Elementor oder den synchronisierten Vorlagen im Block-Editor aus. Figma und Storybook lohnen sich, wenn Designer und Entwickler getrennt arbeiten.
