Im zweiten Teil unserer Serie zu Best Practices in Figma konzentrieren wir uns auf Komponenten, Styles und Bibliotheken. Diese Werkzeuge sind unerlässlich für die Gestaltung konsistenter und effizienter Designs. Komponenten ermöglichen die Wiederverwendung und einfache Aktualisierung von Designelementen, während Styles für ein einheitliches Erscheinungsbild sorgen. Bibliotheken erleichtern die Organisation und teamübergreifende Zusammenarbeit, indem sie die Verfügbarkeit dieser Ressourcen sicherstellen.
Falls du den ersten Teil zum Designsystem Figma noch nicht gelesen hast, findest du ihn hier: Teil 1 über XD Konvertierung, Gruppen & Frames. Ich empfehle dir diesen zuerst zu lesen, falls du es bisher bisher nicht gemacht hast.
Bevor es hier losgeht, erklären wir dir die wichtigsten Begriffe zu dem Thema:
Komponente
In Figma sind Komponenten eine wesentliche Funktion, die das Design- und Prototyping-Erlebnis effizienter und flexibler macht. Sie ermöglichen es, wiederverwendbare Elemente zu erstellen, die konsistent und einfach zu aktualisieren sind. Hier sind die Hauptaspekte von Komponenten:
Wiederverwendbare Elemente
Komponenten in Figma sind wie Vorlagen für Elemente, die in einem Design mehrfach verwendet werden sollen. Einmal erstellt, können sie an verschiedenen Stellen innerhalb eines Projekts oder sogar über mehrere Projekte hinweg verwendet werden.
Master-Komponente (main component)
Ein Master-Komponente ist sozusagen das erstellte Originalelement. Änderungen, die an der Master-Komponente vorgenommen werden, wirken sich auf alle Instanzen dieser Komponente aus.
Instanzen (instance)
Instanzen sind Kopien der Master-Komponente, die an verschiedenen Stellen immer wieder verwendet werden. Sie behalten ihre Verbindung zur Master-Komponente bei und aktualisieren sich automatisch, wenn die Master-Komponente geändert wird.
Overrides
Overrides sind Änderungen, die spezifisch für eine Instanz vorgenommen werden und nicht die Master-Komponente oder andere Instanzen beeinflussen. So können spezifische Anpassungen vorgenommen werden, während die Grundstruktur der Komponente erhalten bleibt.
Effiziente Updates
Da Instanzen von Komponenten automatisch aktualisiert werden, wenn die Master-Komponente geändert wird, können Designer:innen Änderungen zentral vornehmen und sicherstellen, dass alle Instanzen konsistent bleiben. Somit sparst du viel Zeit!
Varianz und Flexibilität
Instanzen von Komponenten können in gewissem Maße angepasst werden, ohne ihre Verbindung zur Master-Komponente zu verlieren. Dies ermöglicht Flexibilität bei der Anpassung einzelner Instanzen.
Auto-Layout und Responsive Design
Komponenten können mit Figma's Auto-Layout-Funktion kombiniert werden, um responsive und skalierbare Designs zu erstellen, die sich automatisch an unterschiedliche Bildschirmgrößen anpassen.
Varianten
Komponenten können verschiedene Varianten mit unterschiedlichen Eigenschaften haben. Ein Button beispielsweise, der je nach Anwendungsfall (Hover, Active, Focus,...) unterschiedlich aussehen soll, kann als eine einzelne Komponente definiert werden. Falls du gerne mehr über Varianten erfahren möchtest, findest du in diesem Artikel von Figma mehr Infos dazu.
So erstellst du eine Komponente
- Schritt 1: Design erstellen
Zeichne deine Form: Beginne mit dem Erstellen eines Designs, das du als Komponente verwenden möchtest. Dies kann ein Button, ein Icon oder ein anderes UI-Element sein.
Wähle das Element aus: Wähle das Design-Element aus, das du in eine Komponente umwandeln möchtest.
- Schritt 2: Komponente erstellen
Umwandeln in eine Komponente: Mit deinem ausgewählten Element gehe zu Rechtsklick → Create Component oder benutze die Tastenkombination Ctrl + Alt + K (Windows) bzw. Cmd + Option + K (Mac) oder du klickst auf das ähnliche Rauten-Icon.
Komponente benennen: Gib der Komponente einen aussagekräftigen Namen, damit sie leicht wiedererkannt werden kann.
- Schritt 3: Komponente verwenden
Instanz einfügen: Ziehe die erstellte Komponente aus dem Asset-Panel (links) in dein Design. Alternativ kannst du die Komponente aus dem Komponentenbereich kopieren und an der gewünschten Stelle einfügen.
Instanzen bearbeiten: Instanzen sind Kopien der Hauptkomponente. Du kannst Instanzen anpassen (z. B. Text ändern, Farben anpassen), ohne die Hauptkomponente zu ändern. Änderungen an der Hauptkomponente werden automatisch auf alle Instanzen angewendet, sofern die bearbeiteten Attribute nicht überschrieben wurden.
- Schritt 4: Hauptkomponente ändern
Hauptkomponente bearbeiten: Wenn du Änderungen an der Hauptkomponente vornehmen möchtest, wähle diese aus und bearbeite sie. Diese Änderungen werden automatisch auf alle Instanzen angewendet.
It's all about the Style
In Figma sind Styles eine wichtige Funktion, die es Designer:innen ermöglicht, konsistente Designelemente über mehrere Projekte und Dateien hinweg zu verwenden und zu verwalten. Styles können für verschiedene Designaspekte wie Farben, Textformatierungen und Effekte definiert werden. Hier sind die wichtigsten Arten von Styles, die es in Figma gibt:
Farbstile (Color Styles)
Farbstile ermöglichen es dir, Farben zentral zu definieren und wiederzuverwenden. Wenn du eine Farbe als Style definierst, kannst du sie an verschiedenen Stellen im Design anwenden. Änderungen an einem Farbstyle werden automatisch überall im Design aktualisiert, wo dieser verwendet wird, genauso wie die Komponenten.
Beispiele für Farbstile:
- Primärfarben
- Sekundärfarben
- Akzentfarben
- Hintergrundfarben
Tipp: Du kannst Unterordner erstellen, um Farbpaletten systematisch zu strukturieren und somit schneller darauf zugreifen (Rechtsklick im Farbstile > Add new folder > Name eingeben).
Textstile (Text Styles)
Textstile ermöglichen die Definition und Verwaltung von Textformaten wie Schriftart, Schriftgröße, Zeilenhöhe und Buchstabenabstand. Ähnlich wie bei Farbstilen sorgt eine Änderung eines Textstils für eine schnelle Aktualisierung aller Instanzen dieses Stils im Design.
Beispiele für Textstile:
- Überschrift (H1, H2, H3, H4)
- Fließtext (Paragraph)
- Bilduntertitel
- Beschriftungen
- Zitate
Effektstile (Effect Styles)
Effektstile sind Schatten, Unschärfe und Innen- oder Außenleuchten. Diese können als Stile gespeichert und auf verschiedene Objekte angewendet werden, um ein einheitliches Erscheinungsbild zu gewährleisten.
Beispiele für Effektstile:
- Schatteneffekte
- Unschärfeeffekte
- Glühen
Gitterstile (Grid Styles)
Gitterstile ermöglichen es, Layout-Raster wie Spalten- oder Zeilenraster und Baseline-Raster zu definieren und auf verschiedene Rahmen und Artboards anzuwenden. Dies ist besonders nützlich, um eine konsistente Struktur über verschiedene Bildschirmgrößen hinweg zu gewährleisten.
Beispiele für Gitterstile:
- 12-Spalten-Raster
- Modulraster
- Baseline-Raster
Vorteile der Verwendung von Styles
- Konsistenz: Styles gewährleisten, dass Farben, Texte und Effekte konsistent über das gesamte Design hinweg verwendet werden.
- Effizienz: Einmal definierte Styles können wiederverwendet werden, was den Designprozess beschleunigt.
- Einfache Aktualisierung: Änderungen an einem Style werden automatisch auf alle Instanzen dieses Stils angewendet.
- Teamzusammenarbeit: Styles können geteilt und von verschiedenen Teammitgliedern verwendet werden, was die Zusammenarbeit erleichtert und sicherstellt, dass alle auf derselben visuellen Linie arbeiten.
Verwendung und Verwaltung von Styles
In Figma kannst du Styles in der rechten Seitenleiste unter den jeweiligen Abschnitten (Farbe, Text, Effekt) erstellen und verwalten. Du kannst vorhandene Styles auf ein Objekt anwenden oder neue Styles definieren, indem du auf das Plus-Symbol (+) klickst.
Schritte zum Erstellen eines Farbstyles:
- Wähle ein Objekt aus und wähle die gewünschte Farbe aus.
- Klicke auf das Plus-Symbol neben der Farbwahl, um einen neuen Style zu erstellen.
- Gib dem Style einen Namen und speichere ihn.
Beispiel: Erstellen eines Textstyles
- Erstelle ein Textobjekt und stelle Schriftart, Größe und andere Eigenschaften ein.
- In der Textformatierungsleiste auf der rechten Seite, klicke auf das Plus-Symbol neben „Text Style“.
- Benenne den Textstil und speichere ihn.
Bibliotheken
In Figma sind Bibliotheken Sammlungen von wiederverwendbaren Designelementen, die für verschiedene Projekte und Teams genutzt werden können. Sie bieten eine zentrale Quelle für UI-Komponenten, Icons, Farben, Schriftstile und andere Design-Elemente. Hier sind die Hauptfunktionen und Vorteile von Bibliotheken:
Hauptfunktionen
- Zentrale Verwaltung von Designelementen: Bibliotheken ermöglicht uns Designer:innen, eine zentrale Sammlung von Komponenten und Stilen zu erstellen. Dies erleichtert das Einhalten von Styleguides und sorgt für Konsistenz über verschiedene Projekte hinweg.
- Wiederverwendbare Komponenten: Komponenten wie Buttons, Formularelemente und Navigationselemente können in einer Bibliothek gespeichert und in verschiedenen Designs wiederverwendet werden. Änderungen an diesen Komponenten in der Bibliothek können dann automatisch auf alle Instanzen in den Projekten angewendet werden, die auf diese Bibliothek verweisen.
- Freigabe und Zusammenarbeit: Bibliotheken können mit Teammitgliedern geteilt werden, wodurch die Zusammenarbeit vereinfacht wird. Mehrere Designer:innen können dieselben Ressourcen verwenden und Änderungen in Echtzeit sehen.
- Automatische Updates: Wenn eine Komponente in der Bibliothek aktualisiert wird, erhalten alle Designer:innen, die diese Komponente in ihren Projekten verwenden, eine Benachrichtigung und die Möglichkeit, diese Updates zu übernehmen. Denn damit sind alle Projekte immer auf dem neuesten Stand.
Vorteile der Verwendung von Bibliotheken
- Zeit sparen: Durch die Wiederverwendung von Designelementen können wir Designer:innen schneller arbeiten und müssen nicht jedes Mal neue Elemente von Grund auf erstellen.
- Konsistenz: Bibliotheken stellen sicher, dass alle Designelemente konsistent und einheitlich sind, was insbesondere bei großen Projekten und Teams wichtig ist.
- Skalierbarkeit: Designänderungen können schnell und effizient auf alle verknüpften Projekte angewendet werden, was besonders bei wachsenden Projekten von Vorteil ist.
- Einfaches Management: Bibliotheken ermöglichen es, Designressourcen zentral zu verwalten, was die Wartung und Aktualisierung erheblich vereinfacht.
Tipp: Die Design-Elemente für die Bibliothek werden in einer eigenen Datei erstellt. Um die Bibliothek schnell zu erkennen, erstellen wir einen Frame, wo draufsteht, „Projektname + Bibliothek“ und setzen diesen Frame als unser Thumbnail fest (rechts klickt auf Frame > Set as thumbnail).
Fazit
Komponenten sind ein mächtiges Werkzeug, das Designer:innen bei der Erstellung und Verwaltung von skalierbaren, konsistenten und effizienten Designsystemen unterstützt. Sie bieten die Flexibilität, Designs anzupassen und gleichzeitig die zentrale Kontrolle über die Konsistenz und Qualität des Designs zu behalten.
Styles sind Werkzeuge, die es ermöglichen, Designelemente wie Farben, Texte, Effekte und Layout-Raster zentral zu verwalten und über verschiedene Projekte hinweg konsistent zu verwenden. Dies führt zu effizienterem Arbeiten, besserer Teamzusammenarbeit und einem einheitlichen visuellen Erscheinungsbild.
Bibliotheken sind Sammlungen von wiederverwendbaren Design-Elementen wie Komponenten, Stilen und Symbolen. Sie ermöglichen es Teams, konsistente Designsysteme zu erstellen und zu teilen. Das Team kann auf diese Bibliotheken zugreifen und Elemente importieren, um die Designarbeit effizienter und einheitlicher zu gestalten.
Falls du noch Fragen zu Komponenten, Styles oder Bibliotheken in Figma hast oder Hilfe bei der Umsetzung benötigst, dann melde dich bei uns!
