Designsystem-Farben in Figma – saubere Paletten für UI

Farben entscheiden im Interface in Sekundenbruchteilen über Stimmung, Orientierung und Vertrauen. Gleichzeitig gehören sie zu den Bereichen, die in Projekten schnell aus dem Ruder laufen: zu viele Töne, kein System, jedes neue Feature bringt eine neue Nuance mit. Ein durchdachtes Farbsystem in Figma löst genau dieses Problem.

Dieser Leitfaden zeigt Schritt für Schritt, wie eine belastbare Farbpalette für ein UI-Designsystem aufgebaut und in Figma sauber angelegt wird – von der Basis-Strategie bis zur praktischen Pflege im Alltag.

Grundlagen für UI-Farbsysteme in Figma

Bevor Farben in Figma angelegt werden, braucht es eine klare Struktur. Das Ziel: Weg von einzelnen Hex-Codes, hin zu logisch benannten Styles, die das Designteam sicher verwenden kann.

Rollenfarben statt Zufallsfarben definieren

Eine Rollenfarbe beschreibt eine Funktion im Interface, nicht einen reinen Farbton. Beispiele:

• Primary (Hauptaktion, zentrale Buttons)
• Secondary (unterstützende Aktionen)
• Success (positive Rückmeldungen)
• Warning (Hinweise, Vorsicht)
• Error (Fehlermeldungen)
• Background (Flächen, Layout-Grundierung)
• Surface (Karten, Panels, Modale)
• Text (Standardtext, dezent, invertiert)

Jede dieser Rollen bekommt später verschiedene Helligkeitsstufen. So kann immer wieder auf dieselbe Familie zurückgegriffen werden, statt ständig neue Farben zu erfinden.

Primärfarbe, Neutrals und Akzente auswählen

Als Basis haben sich drei Gruppen bewährt:

• Eine Primärfarbe (Brand-Farbe, die in Buttons und Links dominiert)
• Eine Skala aus neutralen Grautönen (für Text, Hintergründe und Rahmen)
• Optionale Akzentfarben (z. B. für Charts, Tags, Status-Badges)

Die Primärfarbe sollte in dunklen und hellen Abstufungen gut lesbar bleiben. Gerade für Buttons mit weißem Text lohnt sich ein kurzer Check der Kontraste mit einem WCAG-Kontrasttool.

Farbkontraste und Barrierefreiheit bedenken

Ein UI wirkt professionell, wenn Text und interaktive Elemente mühelos lesbar sind – auch für Menschen mit eingeschränktem Sehvermögen. Dazu gehört:

• Hoher Kontrast zwischen Text und Hintergrund
• Unterscheidbarkeit von Zuständen (z. B. Fehler vs. Warnung)
• Vermeidung von „nur Farbe“ als einzigem Signal (zusätzliche Icons oder Labels)

Wer Responsivität und Lesbarkeit bereits in der Typografie berücksichtigt, sollte dieselbe Sorgfalt auf das Farbsystem übertragen – beide hängen in der Wahrnehmung eng zusammen.

Farbstile in Figma systematisch anlegen

Mit der Strategie im Kopf geht es in Figma an die Umsetzung. Ziel ist es, ein Set von Color Styles anzulegen, die im gesamten Projekt wiederverwendet und in Libraries veröffentlicht werden können.

Benennungskonzept für Figma Color Styles

Ein gutes Namensschema sorgt dafür, dass Farben später leicht auffindbar und verständlich sind. Ein bewährtes Muster:

• role – wofür die Farbe genutzt wird (z. B. primary, text, background)
• variant – Zustand oder Kontext (z. B. default, hover, disabled)
• scale – Helligkeit oder Intensität (z. B. 100, 400, 900)

Beispiele: primary/default/500, text/muted/700, background/base/50. Figma unterstützt Ordnerstrukturen bei Styles, deshalb lohnt sich eine saubere Gruppierung von Anfang an.

Skalen für Primary und Neutrals anlegen

In der Praxis reichen für die meisten Projekte fünf bis zehn Abstufungen je Farbe. Typisch sind Skalen mit 50–900 in Schritten von 100. Vorgehen:

• In Figma ein neues Dokument oder die bestehende Designsystem-Datei öffnen.
• Ein Rechteck mit der Primärfarbe anlegen (z. B. 500 als Mittelwert).
• Helle und dunkle Abstufungen über den Farbregler oder HSL/HSB-Werte erzeugen.
• Jede Stufe als eigenen Color Style speichern und nach Schema benennen.

Für Neutrals (Grautöne) empfiehlt sich ein leicht warmes oder kühles Grau, je nach Markencharakter. Reines, „kaltes“ Grau wirkt schnell technisch und distanziert, kann in B2B-UIs aber gut passen.

Semantische Farben auf technische Farben mappen

Technische Farben sind konkrete Hex-Werte (z. B. #2563EB), semantische Farben sind Rollen wie „Button Primary Default“. In Figma lässt sich das so abbilden:

• Für Rollen wie „Button/Primary/Default“ eigene Color Styles anlegen.
• Diese Styles nicht direkt als Hex definieren, sondern auf eine Skala verweisen (z. B. primary/default/500).
• Im UI werden später nur die semantischen Styles verwendet.

Der Vorteil: Ändert sich die Primärfarbe, können im Notfall nur die Skalen angepasst werden, alle semantischen Rollen folgen automatisch.

Farbsystem in Komponenten und Varianten nutzen

Ein Farbsystem entfaltet seine Stärke erst, wenn es konsequent in Komponenten verankert ist. Figma bietet mit Varianten und Auto Layout die passende Infrastruktur dafür.

Buttons, Badges und Inputs mit Styles verknüpfen

Beim Aufbau von UI-Komponenten lohnt eine klare Trennung zwischen Struktur, Typografie und Farbe. Vorgehen am Beispiel Button:

• Button-Grundform mit Auto Layout anlegen (Padding, Radius, Icon-Spacing).
• Text über Text Styles definieren, nicht frei formatieren.
• Fläche und Textfarbe über Color Styles zuweisen (z. B. button/primary/bg, button/primary/text).
• Für Hover, Active und Disabled eigene Varianten mit passenden Styles anlegen.

Wichtig ist, dass in allen Varianten dieselben semantischen Styles verwendet werden – nur mit anderem Mapping auf die Skala. So bleiben Buttons im ganzen System konsistent.

Status- und Feedbackfarben organisieren

Für Error, Warning, Success und Info lohnt sich eine eigene kleine Palette. Diese Farben sollten nicht nur aus der Primärfarbe abgeleitet werden, sondern klar unterscheidbar sein. Typischer Aufbau:

• feedback/error/bg, feedback/error/border, feedback/error/text
• jeweils mit kompatiblen Helligkeitsstufen (z. B. light Background, kräftiger Border)

Diese Strukturen helfen später auch in anderen Tools weiter, etwa wenn mit klarem Design-Handoff an Entwicklungsteams gearbeitet wird. Entwickler können die Farben 1:1 in Tokens oder Variablen übersetzen.

Light- und Dark-Theme mithilfe von Farbtoken abbilden

Wer Light- und Dark-Mode unterstützt, profitiert besonders von einem semantischen Ansatz. Eine mögliche Struktur:

• Semantische Styles wie surface/default, surface/elevated, text/default definieren.
• Für Light- und Dark-Theme je ein Figma-File oder eine Seite mit denselben Styles, aber anderer Zuordnung der Skalen.
• In Komponenten immer nur die semantischen Styles verwenden.

So kann das Designteam ein komplettes Theme wechseln, ohne jede einzelne Komponente neu anzufassen – ähnlich wie bei systematisch geplantem Dark Mode im Webdesign.

Praktische Schritt-für-Schritt-Box: Farbsystem in Figma aufsetzen

Die folgenden Schritte dienen als kompakte Orientierung für den Start oder den Umbau eines bestehenden Projekts.

• 1. Markenbasis klären: Primärfarbe, sekundäre Akzente, gewünschte Stimmung skizzieren.
• 2. Rollen definieren: Primary, Secondary, Background, Surface, Text, Feedback (Error/Warning/Success/Info).
• 3. Skalen bauen: Für Primärfarbe und Neutrals je 5–10 Abstufungen festlegen und in Figma als Color Styles speichern.
• 4. Benennung einführen: Konsistentes Schema (z. B. role/variant/scale) im ganzen Team vereinbaren.
• 5. Komponenten refactoren: Buttons, Inputs, Badges auf die neuen Styles umstellen.
• 6. Kontraste testen: Kritische Kombinationen (Text auf Flächen, Buttons) mit Kontrasttools prüfen.
• 7. Library veröffentlichen: Styles und Komponenten in einer Figma-Library bereitstellen und dokumentieren.

Häufige Fehler bei UI-Farbsystemen und wie sie sich vermeiden lassen

Viele Projekte stolpern nicht über fehlende Kreativität, sondern über fehlende Disziplin beim Umgang mit Farben. Diese Stolperfallen lassen sich leicht vermeiden.

Zu viele Farben und fehlende Reduktion

Ein verbreitetes Problem sind wild wachsende Paletten. Jede neue Landingpage bringt einen zusätzlichen Ton mit, bis niemand mehr weiß, was „offiziell“ ist. Gegenmaßnahmen:

• Maximal eine Handvoll Primär- und Akzentfarben definieren.
• Neue Anforderungen zuerst über bestehende Skalen lösen.
• Ein kleines Gremium (z. B. Design Lead) entscheidet über neue Farben.

Auch bei Illustrationen und Marketinggrafiken hilft eine begrenzte Palette. Wer in Photoshop oder Illustrator arbeitet, kann sich eigene Farbfelder anlegen und auf dieselbe UI-Farbpalette referenzieren, damit Screen- und Marketing-Design zusammenpassen.

Farben direkt in Komponenten „eingebacken“

Wenn Farben direkt per Hex-Code in Komponenten gesetzt werden, wird jede spätere Änderung teuer. Besser:

• Alle Flächen, Text- und Iconfarben strikt über Color Styles steuern.
• In bestehenden Dateien nach „unbenannten“ Farben suchen und sie migrieren.
• Regel definieren: Neue Komponenten dürfen nur Styles nutzen, nie rohe Werte.

Damit entsteht nach und nach eine saubere visuelle Sprache – ähnlich wie bei gut strukturierten Typografie-Styles in Figma, die Schriften und Hierarchien kontrollierbar machen.

Inkonsistente Benennung und fehlende Dokumentation

Technisch saubere Styles bringen wenig, wenn niemand weiß, wofür sie gedacht sind. Deswegen gehören zwei Dinge unbedingt dazu:

• Benennung konsequent durchziehen (keine Mischformen wie „Blue“ und „Primary“ gleichzeitig).
• Kurz erklären, wann welche Farbe genutzt wird (z. B. in einer Doku-Seite im Figma-File).

Für Teams mit mehreren Designer:innen lohnt sich ein kurzer, interner Leitfaden – idealerweise mit Beispielen für korrekte und falsche Farbverwendung.

Mini-Ratgeber: Farbwahl für typische UI-Szenarien

Zum Abschluss einige praxisnahe Empfehlungen für Situationen, in denen oft Unsicherheit herrscht.

Fehler- und Warnmeldungen klar differenzieren

Viele Oberflächen nutzen Rot für alles, was „nicht ideal“ ist. Besser ist eine klare Trennung:

• Rot für echte Fehler (z. B. Validierungsfehler im Formular).
• Gelb/Orange für Warnungen oder Hinweise, bei denen der Prozess weitergehen kann.
• Grün für Bestätigungen und Erfolgsmeldungen.

Jede Farbe sollte eine eigene Rolle und eigene Skalen haben, statt aus der Primärfarbe abgeleitet zu werden. So verstehen Nutzer:innen schnell, was kritisch ist und was nicht.

Textfarben dezent staffeln

Text muss nicht schwarz auf weiß sein, um gut lesbar zu wirken. Gerade auf Displays funktionieren leicht abgeschwächte Grautöne angenehmer. Bewährt haben sich drei bis vier Stufen:

• „Strong“ für Überschriften und wichtige Labels.
• „Default“ für Fließtext.
• „Muted“ für Hilfstexte und sekundäre Infos.
• „Disabled“ für deaktivierte Elemente.

Alle diese Stufen basieren idealerweise auf derselben Neutral-Skala, damit der Gesamteindruck ruhig bleibt.

Interaktive Elemente klar hervorheben

Klickbare Elemente wie Links, Buttons oder Icons sollten sich sowohl farblich als auch durch Zustand unterscheiden. Eine sinnvolle Struktur:

• Primäraktionen mit Primärfarbe, Sekundäraktionen mit dezenteren Tönen oder Outline-Stil.
• Hover-Zustand über hellere oder dunklere Nuance der gleichen Skala.
• Focus-Zustand zusätzlich mit klarer Umrandung (nicht nur Farbe).

So erkennen Nutzer:innen auf Anhieb, was bedienbar ist – ein Kernpunkt guter UI-Designsysteme, der in Tests immer wieder für bessere Usability sorgt.