Styles in Figma sind gespeicherte, wiederverwendbare Design-Eigenschaften – Farben, Typografieregeln, Effekte und Grids –, die zentral verwaltet werden und bei Änderung an einer Stelle automatisch alle Anwendungsstellen aktualisieren.
Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Color Styles, Text Styles, Effect Styles, Grid Styles; Design Tokens (konzeptuell verwandt); früher auch: Shared Styles
Was sind Styles?
Styles sind Figmas erster Schritt in Richtung eines echten Design-Token-Systems. Statt eine Farbe manuell auf 50 verschiedene Elemente anzuwenden, definiert man einen Color Style (z. B. „Primary/500") und wendet diesen Style überall an. Wenn sich die Farbe ändert, reicht es, den Style einmal zu editieren – alle Elemente, die diesen Style verwenden, aktualisieren sich automatisch.
Styles wurden mit der Einführung von Variables (2023) ergänzt und teilweise abgelöst, aber bleiben wichtig, insbesondere für komplexe Effektstile und Typografieregeln. In modernen Figma-Workflows koexistieren Styles und Variables.
Erklärung
Style-Typen
1. Color Styles: Gespeicherte Füllfarben oder Gradienten. Kann auf Fills, Strokes und Hintergründe angewendet werden. Color Styles können einfache Volltonfarben, lineare Gradienten, radiale Gradienten oder Pattern-Fills sein.
2. Text Styles: Bündeln Schriftfamilie, Schriftgröße, Schriftstil (Regular, Bold, Italic), Zeilenhöhe, Buchstabenabstand und Absatzabstand in einem Style. Ein Text Style wie „Heading/H1" kann auf beliebig viele Textelemente angewendet werden.
3. Effect Styles: Speichern Drop-Shadow-, Inner-Shadow- und Layer-Blur-Konfigurationen. Besonders nützlich für einheitliche Schatten-Systeme (z. B. „Shadow/SM", „Shadow/MD", „Shadow/LG").
4. Grid Styles: Speichern Layout-Grid-Konfigurationen (Spalten, Zeilen, Raster) für Frames. Ermöglichen einheitliche Grid-Systeme über verschiedene Breakpoints hinweg.
Style erstellen
Über das Füllfarbe-Panel:
- Element auswählen.
- Im Fill-Panel auf das 4-Punkte-Icon rechts neben der Farbe klicken.
- Im erscheinenden Dialog einen Namen eingeben (hierarchisch: „Primary/500") und auf „+"-Button klicken.
Über das Styles-Panel: Im linken Seitenleisten-Panel unter „Assets" sind alle Styles der Datei unter dem Tab „Styles" einsehbar. Dort können neue Styles direkt erstellt werden.
Style anwenden
- Fill-Style: Element auswählen, im Fill-Panel auf das 4-Punkte-Icon klicken → Style aus der Liste wählen.
- Text-Style: Text auswählen, im rechten Panel im Text-Bereich das 4-Punkte-Icon anklicken → Style wählen.
- Keyboard-Shortcut: Kein direkter Shortcut, aber über das Style-Picker-Panel schnell erreichbar.
Style editieren
- Im rechten Panel auf den Style-Namen klicken.
- Im erscheinenden Popover auf das Stift-Icon klicken.
- Änderungen vornehmen – alle Anwendungsstellen aktualisieren sich sofort.
Alternativ: Im Assets-Panel → Styles → Rechtsklick auf einen Style → „Edit Style".
Hierarchische Benennung
Styles mit Schrägstrich im Namen werden im Figma-Interface als Ordner dargestellt: `` Colors/ Primary/ 100, 200, 300, 400, 500, 600, 700 Neutral/ 100, 200, 300, 400, 500, 600, 700 Semantic/ Success, Warning, Error, Info ``
Diese Struktur hilft bei der Navigation in großen Design-Systemen.
Styles vs. Variables
Ab Figma 2023 können viele Anwendungsfälle von Color Styles durch Variables abgedeckt werden. Der Unterschied:
- Color Styles: Für komplexe Farben (Gradienten, mehrschichtige Fills). Kein Theming (kein automatischer Dark-Mode-Switch).
- Color Variables: Für einfache Volltonfarben mit Theming-Unterstützung (Light/Dark Mode). Können auch auf Spacing, Radien und andere numerische Werte angewendet werden.
In modernen Projekten empfiehlt Figma die Kombination: Variables für primitive Tokens (Raw-Farben) und Styles für semantische Darstellungen (wenn komplexe Fills nötig sind).
Styles in Shared Libraries
Styles können, genau wie Components, in Shared Libraries veröffentlicht werden. Dann stehen sie teamweit zur Verfügung und ermöglichen eine konsistente Farbpalette und Typografie über mehrere Figma-Dateien hinweg.
Beispiele
- Farbpalette: 60 Color Styles für ein komplettes Brand-Farbsystem (Primary, Secondary, Neutral, Semantic, Data Visualization Farben).
- Typografiesystem: Text Styles für Heading/Display, H1–H4, Body/Regular, Body/Large, Body/Small, Caption, Overline – jeweils in verschiedenen Gewichten.
- Elevation-System: Effect Styles für 5 Schatten-Stufen (none, sm, md, lg, xl) als Drop-Shadow-Konfigurationen für verschiedene UI-Tiefen.
- Grid-System: Grid Styles für Mobile (4-Spalten), Tablet (8-Spalten) und Desktop (12-Spalten) für konsistentes Layout über Breakpoints.
- Dark Mode via Color Styles (Legacy): Zwei Color-Style-Sets, eines für Light, eines für Dark, die manuell umgeschaltet werden (heute besser mit Variables gelöst).
In der Praxis
Shortcuts:
- Kein direkter Keyboard-Shortcut für Styles; Style-Picker über das 4-Punkte-Icon im Panel öffnen.
Strg+Alt+C/Cmd+Option+C: Eigenschaften kopieren (inkl. Style-Referenz) für schnelles Übertragen.
Best Practices:
- Immer hierarchische Namen verwenden (Primary/500 statt #3B82F6 als Name).
- Styles früh im Projekt anlegen und konsequent verwenden – nie Rohfarben direkt vergeben.
- Für neue Projekte ab 2024: Variables für Farben bevorzugen, Styles für Effekte und Typografie.
- Alte Styles in Shared Libraries mit einem Deprecation-Hinweis im Namen versehen, wenn sie durch Variables ersetzt werden.
Häufige Fehler:
- Stile direkt auf Elemente anwenden, ohne sie in Styles zu definieren – das macht spätere Anpassungen mühsam.
- Styles ohne Namenshierarchie erstellen (z. B. nur „Blau" statt „Primary/500") – unübersichtlich bei vielen Styles.
- Styles mit Variables verwechseln – sie haben unterschiedliche Stärken.
Vergleich & Abgrenzung
In Sketch heißen vergleichbare Funktionen „Shared Styles" (für Farben) und „Text Styles". Adobe XD hat „Assets" (Colors, Character Styles, Components) – konzeptuell ähnlich, aber weniger flexible Benennung. CSS kennt das Konzept durch Custom Properties (--color-primary: #3B82F6), die ebenfalls zentral verwaltet werden. Figma Styles sind der visuelle Äquivalent zu CSS Custom Properties, jedoch ohne Theming/Cascading-Unterstützung (dafür sind Variables zuständig).
Häufige Fragen (FAQ)
Soll ich für ein neues Projekt Styles oder Variables für Farben verwenden? Für neue Projekte empfiehlt Figma (2024) Variables für einfache Volltonfarben, da Variables Theming (Light/Dark Mode) und mehr Flexibilität bieten. Styles bleiben sinnvoll für Gradienten, komplexe Fills und Effekte (Schatten, Blur).
Kann ich Styles aus anderen Figma-Dateien importieren? Ja, über Shared Libraries. Eine Datei als Library veröffentlichen und in anderen Dateien über das Figma-Menü einbinden. Dann sind alle Styles (und Components) der Library-Datei verfügbar.
Was passiert mit Styles, wenn ich sie in der Figma-Datei lösche? Elemente, die den gelöschten Style verwenden, behalten ihre aktuelle Farbe/Typografie als raw Wert, verlieren aber die Verbindung zum Style. Es gibt keine automatische Aktualisierung mehr.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/de
- Figma-Dokumentation: „Styles in Figma" – help.figma.com/hc/en-us/articles/360039957034
- Dan Mall: „Design Tokens und Styles" (smashingmagazine.com, 2023)
