Styles in Figma sind benannte, wiederverwendbare Designdefinitionen für Farben, Textformate, Effekte und Layoutgrids, die teamübergreifend in Shared Libraries gepflegt werden können.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Shared Styles, Design Styles, Text Styles, Color Styles
Was sind Styles?
Styles sind benannte Vorlagen, die man Elementen in Figma zuweist. Ändert man einen Style, aktualisieren sich alle Elemente, die diesen Style verwenden, automatisch. Styles decken vier Bereiche ab: Farbfelder, Textstile, Effekte und Layoutgrids.
Erklärung
Arten von Styles
Color Styles (Farbstile): Definieren Einzelfarben oder Verläufe mit Namen wie Primary/500, Neutral/100 oder Brand/Accent. Color Styles können auf Füllfarben (Fill), Rahmenfarben (Stroke) und Hintergründe angewendet werden.
Text Styles (Textstile): Definieren Schriftart, Schriftgröße, Zeilenhöhe, Buchstabenabstand und Ausrichtung. Typische Namen folgen einer Typografieskala: Heading/XL, Body/Regular, Label/Small. Ein Text Style kann auf ein einzelnes Textelement oder auf markierten Text angewendet werden.
Effect Styles: Definieren Schatten (Drop Shadow, Inner Shadow) und Weichzeichner (Layer Blur, Background Blur). So werden Tiefeneffekte konsistent über alle Screens hinweg angewendet.
Grid Styles: Definieren Spalten- und Zeilenraster (Column Grid, Row Grid) sowie Punkt-/Liniengitter. Grid Styles werden direkt auf Frames angewendet und unterstützen responsives Layout-Design.
Styles erstellen
Styles werden über das +-Icon im rechten Panel erstellt – jeweils im entsprechenden Abschnitt (Fill, Text, Effects). Alternativ kann man im Design-Panel auf das 4-Punkte-Icon neben einem Farbwert klicken und „Create Style" wählen.
Styles benennen
Schrägstriche in Style-Namen erzeugen Kategorien im Styles-Panel: Color/Primary/500 erscheint als verschachtelte Gruppe. Das ist essenziell für große Design-Systeme mit Hunderten von Stilen.
Styles in Shared Libraries
Wie Components können Styles in Team Libraries veröffentlicht werden. Alle Team-Mitglieder, die die Library abonnieren, haben Zugriff auf dieselben Styles. Änderungen (z. B. eine neue Markenfarbe) propagieren nach dem Publish-Update in alle Dateien.
Styles vs. Variables
Seit der Einführung von Variables (2023) gibt es eine Überlappung: Variables können ebenfalls Farben (Color Tokens) und Zahlen definieren. Der wesentliche Unterschied: Styles sind direktere Designdefinitionen, Variables sind abstrakte Tokens, die verschiedene Werte je nach Mode annehmen können (z. B. Light Mode / Dark Mode). In modernen Design-Systemen werden Variables zunehmend für Color Tokens bevorzugt, während Styles für komplexe Text- und Effect-Definitionen weiterhin essenziell sind.
Style Overrides
Ähnlich wie bei Components können Style-Zuweisungen in Instanzen lokal überschrieben werden. Das sollte sparsam geschehen, um die Konsistenz des Systems zu wahren.
Beispiele
- Komponenten-System: Alle Buttons, Inputs und Labels verwenden den Text Style
Body/Medium. Passt man diesen Style an (z. B. Schriftgröße von 14 auf 15 px), aktualisieren sich alle verknüpften Elemente im gesamten Projekt. - Responsive Design: Grid Styles
Grid/Desktop(12 Spalten, 24px Gutter) undGrid/Mobile(4 Spalten, 16px Gutter) werden je nach Frame-Typ zugewiesen. - Prototyping/Handoff: Entwickler sehen im Dev-Mode Style-Namen als Token-Referenzen (
color: var(--color-primary-500)), was die CSS-Implementation beschleunigt. - Team-Workflow: Das Brand-Team aktualisiert einen Color Style in der Design-System-Datei und veröffentlicht ihn; alle Produktteams bekommen eine Update-Benachrichtigung.
- Kombination mit Variables: Color Styles werden mit Color Variables verknüpft. Der Style
Button/Backgroundreferenziert die Variablecolor/primary/interactive, die im Dark Mode automatisch einen anderen Wert annimmt.
In der Praxis
Color Style erstellen: Fill-Farbe auswählen → rechtes Panel → Farb-Swatch-Icon → + → Style benennen Text Style erstellen: Textelement auswählen → im Text-Panel → + neben Styles → benennen Style zuweisen: Element auswählen → im Panel auf das 4-Punkte-Icon klicken → Style aus Liste auswählen Style bearbeiten: Im Styles-Panel (Assets oder rechtes Panel) → Stift-Icon → Werte ändern Style veröffentlichen: Assets-Panel → Team Library → Publish
Vergleich & Abgrenzung
| Figma Styles | Figma Variables | CSS Custom Properties | |
|---|---|---|---|
| Farben | Ja | Ja (Color Tokens) | Ja |
| Typografie | Ja (Text Styles) | Nein | Begrenzt |
| Modale Werte | Nein | Ja (Light/Dark) | Ja |
| Effekte/Schatten | Ja | Nein | Teilweise |
Sketch bietet Layer Styles und Text Styles analog; Adobe XD kennt Character Styles und Color Swatches. Figmas Styles sind tiefer ins Bibliothekssystem integriert und einfacher teamweit zu publizieren.
Häufige Fragen (FAQ)
Soll ich für mein Design System lieber Styles oder Variables nutzen? Die Empfehlung für 2024 lautet: Variables für alle Token-basierten Werte (Farben, Spacing, Radien), Styles für Text-Definitionen und Effekte. Text Styles lassen sich mit Typography Variables anreichern, bleiben aber als Gesamtpaket (Schrift + Größe + Zeilenhöhe) besser in Styles verwaltet.
Können Styles gelöscht werden, ohne Elemente zu beschädigen? Ja, aber die verknüpften Elemente verlieren die Style-Referenz und behalten lediglich den zuletzt gesetzten Wert als lokalen Override. Es gibt keine Warnung vor dem Löschen – daher sollte man Styles nur nach sorgfältiger Prüfung entfernen.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/articles/360039238753
- Figma (2024): Styles in Figma. Figma Docs.
- Online: DesignSystems.com – „Styles vs. Variables: A practical guide"
