Designsystem aufbauen: Schritt für Schritt zum eigenen System

Ein Designsystem bauen Sie in einer festen Reihenfolge auf. Zuerst klären Sie Ziele und Umfang, dann erfassen Sie alles, was bereits existiert. Danach legen Sie die Grundlagen fest: Farben, Typografie, Abstände und Logo-Regeln. Darauf bauen Sie wiederverwendbare Komponenten in Figma und im Code und dokumentieren sie. Zum Schluss regeln Sie, wer das System pflegt und Änderungen freigibt. In diesem Leitfaden zeigen wir, wie das in der Praxis aussieht, worin sich ein Designsystem von einem Corporate-Design-Manual unterscheidet und wie kleine und mittelständische Unternehmen den passenden Umfang finden.

URBANEE

Markenauftritt und Website konsistent gestalten

URBANEE verbindet Corporate Design und Webentwicklung, damit Ihre digitalen Auftritte eine klare gestalterische Grundlage erhalten.

URBANEE kennenlernen

Kurz gesagt

Ein Designsystem ist mehr als ein Styleguide: Es verbindet Gestaltungsregeln, Komponenten, Muster und Code zu einem gemeinsamen Standard.
Die Reihenfolge zählt: Ziele, Bestandsaufnahme, Grundlagen, Komponenten, Dokumentation, Governance.
Klein anfangen: Ein schlankes erstes System (MVP) mit den häufigsten Bausteinen bringt schneller Nutzen als ein Komplettwerk.
Figma richtig strukturieren: Variablen trennen Grundwerte von Werten mit Bedeutung, Komponenten werden einmal gebaut und überall wiederverwendet.
Fertig ist es nie: Ohne klare Zuständigkeiten, Freigaben und regelmäßige Audits veraltet jedes Designsystem.

Inhaltsverzeichnis

Designsystem, Styleguide, CD-Manual: die Unterschiede
Die Bausteine eines Designsystems
Designsystem aufbauen in sieben Schritten
Logo und Schutzraum richtig dokumentieren
Ein Designsystem in Figma strukturieren
Governance: Wer pflegt und gibt frei?
Der passende Umfang für KMU und Startups
Unsere Perspektive
Ihr Designsystem mit URBANEE
Häufige Fragen zum Designsystem
Quellen

Designsystem, Styleguide, CD-Manual: die Unterschiede

Die Begriffe werden oft gleichbedeutend verwendet, sie beschreiben aber unterschiedlich große Werkzeuge. Die Nielsen Norman Group beschreibt ein Designsystem als vollständigen Satz an Standards, mit dem Gestaltung im großen Maßstab gesteuert wird. Ein Styleguide ist darin ein Teil: enger gefasste Dokumentation, etwa zu Farben, Schrift oder Tonalität.

Das Corporate-Design-Manual (auch CD-Manual, Corporate-Design-Guide oder Brand Guidelines) kommt meist aus der klassischen Markenarbeit. Es regelt, wie Logo, Farben und Schriften auf Briefbogen, Messeständen, Fahrzeugen und in Anzeigen aussehen. Ein Designsystem übersetzt diese Markenregeln in digitale, wiederverwendbare Bausteine und verbindet sie mit dem Code Ihrer Website oder Anwendung.

Merkmal	Corporate-Design-Manual	Styleguide	Designsystem
Fokus	Markenauftritt über alle Medien	Gestaltungsregeln für einen Bereich	Digitale Produkte im Maßstab
Typischer Inhalt	Logo, Schutzraum, Farben, Schriften, Bildsprache, Anwendungsbeispiele	Farben, Typografie, Tonalität	Tokens, Komponenten, Muster, Code, Dokumentation, Prozesse
Format	PDF oder Markenportal	Dokument oder Webseite	Figma-Bibliothek, Code-Repository, Online-Dokumentation
Nutzer	Marketing, Agenturen, Druckereien	Design, Redaktion	Design, Entwicklung, Produkt, Marketing
Pflege	Bei Markenänderungen	Gelegentlich	Laufend, mit festen Freigabeprozessen

Für die Praxis heißt das: Ein gutes Designsystem ersetzt Ihr CD-Manual nicht, es baut darauf auf. Wer noch keine klare Marke hat, beginnt mit Branding und Corporate Design. Einen Überblick über den Aufwand dafür geben wir in unserem Beitrag zu Branding-Kosten 2026.

Die Bausteine eines Designsystems

Bevor Sie loslegen, hilft ein Bild davon, was am Ende stehen soll. Als Fundament nennt HORIZONT in seinem Branding-How-to folgende Elemente:

Farbpalette mit geprüften Kontrasten für Barrierefreiheit
Typografie mit Schriftgrößen, Zeilenhöhen und Hierarchien
Abstände und Raster für ein einheitliches Layout
Icon- und Illustrationssystem
Bildsprache für Fotos und Grafiken
Motion Guidelines für Animationen und Übergänge

Zu jedem Element werden Regel, Zweck und Beispiele dokumentiert. Darauf setzen die Komponenten auf: Buttons, Eingabefelder, Cards, Navigation, Modals und schließlich ganze Seitenvorlagen. Viele Teams ordnen das nach dem Prinzip von Atomic Design: kleine Bausteine (Atome) ergeben größere Einheiten (Moleküle, Organismen), daraus entstehen Templates und Seiten.

Der eigentliche Mehrwert liegt in der Verbindung. Ein Button im Designsystem ist nicht nur eine Grafik in Figma, sondern hat ein Gegenstück im Code, dokumentierte Zustände und klare Regeln, wann er eingesetzt wird.

Designsystem aufbauen in sieben Schritten

1. Ziele, Zielgruppe und Umfang klären

Halten Sie fest, welches Problem das System lösen soll: uneinheitliche Landingpages, langsame Abstimmung zwischen Design und Entwicklung oder ein Relaunch mehrerer Websites. HORIZONT empfiehlt, Ziele und Zielgruppen zu klären, ein MVP zu definieren und Stakeholder aus Design, Entwicklung, Produkt und Management früh einzubinden. Ein gemeinsamer Kick-off-Workshop schafft ein gemeinsames Verständnis und klärt Prioritäten.

2. Bestandsaufnahme durchführen

Sammeln Sie alles, was es bereits gibt. Figma empfiehlt, vor dem Bau von Komponenten die bestehende Produktlandschaft zu inventarisieren: Farben, Typografie, Icons, Komponenten, Muster und interaktive Zustände. So geht es praktisch:

Screenshots aller wichtigen Seiten und Ansichten erstellen
Gleichartige Elemente gruppieren, etwa alle Buttons auf einer Fläche
Dubletten und Abweichungen markieren (sieben Grautöne, vier Button-Stile)
Häufigkeit und Bedeutung jedes Elements bewerten

Zusätzlich lohnt ein Code-Audit, damit vorhandene wiederverwendbare Komponenten und CSS-Variablen nicht neu erfunden werden. Bei gewachsenen Anwendungen gehört dazu ein strukturierter Blick in die Codebasis, wie ihn Spezialisten für Softwareentwicklung zum Festpreis als Codebase-Audit durchführen. Das Vorgehen ähnelt einem Inhaltsaudit, wie wir es in unserer Anleitung zum Content Audit beschreiben: erst erfassen, dann bewerten, dann entscheiden.

Inkonsistenzen und Redundanzen sind dabei kein Makel, sondern ein Signal: Genau hier verbessert ein Designsystem das Nutzererlebnis.

3. Grundlagen festlegen

Aus der Bestandsaufnahme leiten Sie die Basiswerte ab: eine reduzierte Farbpalette, eine Typo-Skala, ein Abstandssystem (zum Beispiel in 4- oder 8-Pixel-Schritten) und ein Raster für Desktop, Tablet und Smartphone. Prüfen Sie Farbkombinationen direkt auf ausreichenden Kontrast, damit Texte für alle lesbar bleiben.

Fünf Grundlagen für ein konsistentes Designsystem

4. Komponenten bauen

Beginnen Sie mit den Bausteinen, die am häufigsten vorkommen: Buttons, Eingabefelder, Checkboxen, Links. Danach folgen Cards, Navigation, Formulare und Modals, zuletzt Templates. Jede Komponente sollte

alle Zustände abbilden (Standard, Hover, Fokus, deaktiviert, Fehler),
technisch umsetzbar und wiederverwendbar sein,
Do's und Don'ts mit Beispielen enthalten.

5. Design und Code verbinden

Ein Designsystem wirkt erst, wenn Figma-Bibliothek und Code denselben Stand haben. Design Tokens helfen dabei: Sie speichern Entscheidungen wie Farben oder Abstände zentral. Laut Figma sorgen Tokens dafür, dass eine Änderung an einer Stelle automatisch in allen Komponenten und Plattformen ankommt. Für Ihre Website bedeutet das schnellere Umsetzung und weniger Fehler, gerade wenn auch technische SEO und Ladezeiten stimmen müssen. Mehr dazu lesen Sie in unseren Webentwicklung-Grundlagen.

6. Dokumentieren

Dokumentation ist kein Anhang, sondern Teil des Produkts. Pro Komponente gehören dazu: Zweck, Varianten, Zustände, Einsatzregeln, Beispiele, Hinweise zur Barrierefreiheit und der Verweis auf den Code. Schreiben Sie so, dass auch Marketing und externe Dienstleister damit arbeiten können.

7. Einführen und pflegen

Stellen Sie das System dem Team vor, schulen Sie die Nutzer und legen Sie fest, wie Änderungen eingebracht werden. Wie das organisiert wird, zeigen wir im Abschnitt zur Governance.

Logo und Schutzraum richtig dokumentieren

Der Schutzraum ist die freie Fläche um das Logo, in die keine anderen Elemente ragen dürfen. Er wird fast immer relativ zum Logo definiert, damit er bei jeder Größe passt. Wie unterschiedlich das gelöst wird, zeigen öffentlich zugängliche Manuals aus Deutschland:

Manual	Regel für den Schutzraum
Corporate Design der CDU (Stand November 2023)	Mindestens die halbe Gesamthöhe des Logos
Corporate Design Manual der Universität Bonn (Stand Juni 2022)	Mindestens ein Fünftel der Logohöhe an allen vier Seiten, Ausnahmen nur mit Freigabe
Corporate Design Manual der Universität Hamburg	Abgeleitet aus der Höhe des roten Quadrats: unten ein halbes, an den übrigen Seiten ein ganzes Quadrat

In Ihr Designsystem gehören neben dem Schutzraum:

Mindestgrößen für Druck und Bildschirm
Varianten wie horizontal, gestapelt, einfarbig oder negativ
Positionierung auf Seiten, Bannern und Social-Media-Formaten
Verbote mit Beispielbildern: Die Universität Hamburg untersagt etwa Beschneiden, ungenehmigtes Umfärben, Verzerren, Rotieren und das Platzieren auf unruhigen oder kontrastarmen Hintergründen. Das CDU-Manual verbietet unter anderem Drehen, Strecken und Stauchen.

Im digitalen System legen Sie das Logo als Komponente mit festen Varianten an und hinterlegen den Schutzraum als Abstands-Token. So hält sich jede neue Seite automatisch an die Regel.

Ein Designsystem in Figma strukturieren

Figma ist für viele Teams das zentrale Werkzeug, weil Komponenten dort einmal erstellt und dann wiederverwendet werden. Variablen speichern wiederverwendbare Werte für Farbe, Abstände, Text und weitere Eigenschaften. Eine bewährte Struktur:

Primitive Variablen: die reinen Grundwerte, zum Beispiel blau-500 oder abstand-16.
Semantische Variablen: Werte mit Bedeutung, die auf Primitive verweisen, etwa farbe-aktion-primär oder abstand-karte-innen.
Komponenten: nutzen ausschließlich semantische Variablen.

Figma rät, Namen nach der Funktion zu vergeben, nicht nach Aussehen oder technischer Umsetzung. farbe-warnung bleibt verständlich, auch wenn Sie den Farbton später ändern. orange-hell wird dann zur Falle.

Mit Modi für Variablen bilden Sie unterschiedliche Kontexte ab, etwa einen hellen und einen dunklen Modus oder zwei Marken mit gleicher Komponentenbasis. Teilen Sie Stile und Komponenten über eine zentrale Bibliotheksdatei oder, bei größeren Systemen, über mehrere Dateien für Grundlagen, Komponenten und Muster.

Governance: Wer pflegt und gibt frei?

Governance ist der wiederholbare Prozess, mit dem Designentscheidungen getroffen werden. Laut Designsystems.com gehört dazu auch, die Figma-Bibliothek am Git-Repository auszurichten. In diesem Modell kann jedes Teammitglied Verbesserungen vorschlagen, die dann disziplinübergreifend von Design, Entwicklung und gegebenenfalls Content geprüft werden.

Ein konkretes Beispiel liefert das Governance-Modell des Codex-Designsystems der Wikimedia-Entwickler: Nach Implementierung und Tests wird eine Komponente in der Reihenfolge Design, Qualität (falls verfügbar) und Produkt freigegeben. Nach dem Release ist je nach Komponente das Designsystem-Team oder der Beitragende für die Pflege zuständig.

Für kleinere Teams lässt sich das auf wenige Regeln verdichten:

Verantwortung: Eine Person oder ein kleines Core-Team ist Eigentümer des Systems.
Beitragsweg: Änderungswünsche laufen über ein Ticketsystem, nicht über Zurufe.
Freigabe: Design und Entwicklung prüfen gemeinsam, bevor etwas in die Bibliothek kommt.
Versionierung: Änderungen werden mit Datum und Beschreibung festgehalten.
Audits: Regelmäßig nach Duplikaten und veralteten Komponenten suchen.

Eine Airbnb-Designerin empfiehlt gemeinsame Begriffe, Tickets zur Priorisierung und regelmäßige Audits mit fortlaufender Dokumentation. Atlassian setzt darauf, das System designgeführt, aber funktionsübergreifend mit Engineering und den späteren Nutzern zu entwickeln. Wer mitbaut, übernimmt Verantwortung für die Qualität.

Der passende Umfang für KMU und Startups

Sie brauchen kein Designsystem in Konzerngröße. Der Anbieter zeroheight empfiehlt, mit einem Designsystem als MVP zu starten: ein begrenzter Umfang, der schnell nutzbar ist und mit der Zeit wächst. Drei Stufen haben sich in unseren Projekten als Orientierung bewährt:

Stufe	Passt für	Inhalt
Basis	Startup, eine Website	Farben, Typografie, Abstände, Logo-Regeln, 10 bis 15 Kernkomponenten
Wachstum	KMU mit mehreren Landingpages und Kampagnen	Zusätzlich Seitenvorlagen, Formulare, Social-Media- und E-Mail-Bausteine, Dokumentationsseite
Plattform	Mehrere Produkte, Web-App, Admin-Bereich	Tokens mit Modi, Code-Bibliothek, Versionierung, formaler Freigabeprozess

Entscheidend ist, wie viele Kanäle Sie bespielen. Ob Sie für eine Kampagne eine Landingpage oder Unternehmenswebsite brauchen, verändert auch den Umfang des Systems: Ein Onepager kommt mit wenigen Bausteinen aus, eine Website mit Buchungssystem braucht deutlich mehr. Ordnen Sie das Designsystem deshalb in Ihre Digitalstrategie für KMU ein, statt es isoliert zu planen.

Unsere Perspektive

Wir erleben oft, dass Designsysteme als reines Designprojekt starten und dann im Ordner liegen bleiben. Der Grund ist fast immer derselbe: Design und Code laufen getrennt.

Deshalb denken wir Webentwicklung, Design und digitales Marketing zusammen. Wenn wir eine Website, ein CMS oder eine individuelle Webanwendung mit Admin-Bereich entwickeln, entstehen die Komponenten im Designsystem und im Code gleichzeitig. Technische SEO und schnelle Ladezeiten berücksichtigen wir von Anfang an, denn ein sauber aufgebautes Komponentensystem ist auch ein schlankes.

Für kleine und mittelständische Unternehmen heißt das: lieber ein fokussiertes System, das jede neue Landingpage und jede Kampagne schneller macht, als ein umfangreiches Handbuch, das niemand öffnet. So wird das Designsystem zum Fundament Ihrer digitalen Präsenz.

URBANEE

Ihr Designsystem mit URBANEE

Sie planen einen Relaunch, eine neue Unternehmenswebsite oder wollen Ihren Markenauftritt digital vereinheitlichen? Wir verbinden Branding und Corporate Design mit Webentwicklung: vom Logo-Regelwerk über die Komponentenbibliothek bis zur fertigen, responsiven Website. Sie erhalten persönliche Betreuung, klare Leistungsumfänge und nach dem Erstgespräch ein Festpreisangebot.

URBANEE

Lassen Sie uns gemeinsam klären, welcher Umfang zu Ihrem Unternehmen passt. Jetzt Erstgespräch mit URBANEE vereinbaren.

Häufige Fragen zum Designsystem

Wie lange dauert der Aufbau eines Designsystems?

Das hängt vom Umfang ab. Ein Basis-System mit Grundlagen und Kernkomponenten lässt sich deutlich schneller umsetzen als eine Plattform mit Code-Bibliothek und Freigabeprozessen. Sinnvoll ist, das System parallel zu einem konkreten Projekt wie einem Website-Relaunch aufzubauen, damit jede Komponente sofort im Einsatz ist.

Brauche ich zuerst ein Corporate-Design-Manual?

Nicht zwingend, aber Sie brauchen Markengrundlagen: Logo, Farben, Schriften und eine klare Tonalität. Fehlen diese, entwickeln Sie sie am besten im ersten Schritt mit. Das Designsystem übersetzt diese Regeln dann in digitale Bausteine.

Ist Figma Pflicht für ein Designsystem?

Nein, aber Figma ist für Komponenten, Variablen und geteilte Bibliotheken weit verbreitet und erleichtert die Zusammenarbeit zwischen Design und Entwicklung. Wichtiger als das Werkzeug ist, dass Designdatei und Code denselben Stand haben.

Wie groß sollte der Schutzraum um ein Logo sein?

Es gibt keinen einheitlichen Wert. Üblich ist eine Angabe relativ zur Logohöhe, etwa ein Fünftel oder die halbe Höhe, wie öffentliche Manuals deutscher Organisationen zeigen. Wählen Sie einen Wert, der zur Form Ihres Logos passt, und legen Sie ihn im Designsystem als festen Abstand an.