Designsysteme 102: So erstellst du dein Designsystem
Zeit, ein Designsystem zu erstellen! Wir begleiten dich durch die Grundlagen zur Entwicklung eines Designsystems, das genau auf deine Ziele und Herausforderungen zugeschnitten ist – egal, ob du ganz von vorne anfängst oder mit bestehenden Elementen beginnst.
Designsysteme 102: So erstellst du dein Designsystem teilen
Artwork von Cynthia Alfonso
Ein gut ausgearbeitetes Designsystem ist ein mächtiges Tool für Teams, die kohärente, skalierbare und effiziente Designs schaffen wollen. Indem du eine gemeinsame Sprache und eine Bibliothek von wiederverwendbaren Komponenten etablierst, sorgst du mit einem Designsystem für Einheitlichkeit über deine Produkte hinweg, beschleunigst deine Workflows und gibst deinem Team mehr Freiraum, sich auf die Lösung von Nutzerproblemen zu konzentrieren.
In unserem letzten Artikel zum Thema haben wir uns auf die Basics fokussiert. Aber um das ganze Potenzial eines Designsystems freizusetzen, bedarf es eines effektiven Aufbaus und der richtigen Implementierung. Und das ist leichter gesagt als getan. In diesem Leitfaden zerlegen wir den Prozess des Aufbaus eines Designsystems in klare, umsetzbare Schritte. Von der Definition deiner Prinzipien und der Grundsteinlegung bis hin zum Erstellen und Organisieren deiner Designressourcen vermitteln wir bewährte Methoden und praxisnahe Beispiele für ein System, das dein Team stärkt und dein Produkt aufwertet.
Dies ist der zweite Teil unserer Serie über den Einstieg in Designsysteme. Schau dir unseren ersten Teil an: Designsysteme 101: Was ist ein Designsystem?
Schritt 1: Die Grundlagen schaffen
Ein Designsystem kann aus vielen Gründen hilfreich für dein Team oder deine Organisation sein. Bevor du Komponenten und Muster erstellst, solltest du dir bewusst machen, warum du ein Designsystem aufbaust und welche Probleme du damit lösen möchtest. Vielleicht sieht dein Produkt auf verschiedenen Plattformen unterschiedlich aus oder Updates erfordern einen manuellen und zeitaufwendigen Prozess. Vielleicht möchtest du die Zusammenarbeit erleichtern, alle up-to-date halten oder neuen Teammitgliedern einen schnellen Einstieg ermöglichen.
Unabhängig von deinen Gründen, nimm dir einen Moment Zeit, um diese Schlüsselfragen zu beantworten und deine Ziele damit klar zu definieren:
- Warum möchtest du ein Designsystem?
- Welche spezifischen Probleme wird es lösen?
- Woran kannst du erkennen, dass es diese Probleme erfolgreich löst?
In diesem kurzen Video unterhält sich Jesse Showalter mit Dan Mall darüber, warum Designsysteme wichtig sind und wie du erkennen kannst, ob dein Unternehmen wirklich eins braucht.
Designsysteme können für Teams jeder Größe und Erfahrungsebene nützlich sein, doch nicht jedes Team benötigt ein komplexes, unternehmensweites System. Für Anfänger*innen, die gerade ihre Karriere beginnen und mit einem kleinen Team an einer begrenzten Anzahl von Marken oder Produkten arbeiten, kann bereits ein einfacheres System ausreichen. Einige wiederverwendbare Vorlagen und Komponenten sind oft genug, um Arbeitsabläufe zu optimieren und Konsistenz zu gewährleisten. Mit wachsenden Projekten und Teams kann sich das Designsystem entwickeln und den sich ändernden Bedürfnissen anpassen.
Der Schlüssel liegt darin, ein System zu entwickeln, das zu deiner spezifischen Situation passt – sei es ein umfassendes System für die Verwaltung mehrerer Produkte oder ein einfacher Satz wiederverwendbarer Elemente für ein kleines Team. Designsysteme sind nicht für alle gleich. Sie liegen auf einem Spektrum und können für jede*n, von Freelancern bis zu großen Unternehmen, nützlich sein.
In dieser frühen Phase besteht deine wichtigste Aufgabe darin, alle im Unternehmen über den Nutzen eines Designsystems aufzuklären – und warum ihr darein investiert.
Bestandsaufnahme
Sobald du deine Ziele abgesteckt hast, wird es Zeit für einen genaueren Blick auf deine bestehende Produktlandschaft. Sammle und kategorisiere zunächst alle Elemente, die du derzeit verwendest: Farben, Typografie, Icons, Komponenten und Muster – alles, was dazugehört. Screenshots sind dafür eine gute Idee! Erfasse Beispiele deines Produkts auf verschiedenen Plattformen und Geräten. Vergiss nicht, interaktive oder alternative Versionen zu dokumentieren. Wahrscheinlich wirst du Muster und Konsistenzen erkennen, die als Ausgangspunkt für dein Designsystem dienen können.
Organisieren und bewerten
Mit deiner Inventur in der Hand kannst du nun Ordnung in das Gesammelte bringen. Organisiere deine Screenshots und Beispiele zunächst in Kategorien. Zoom raus und bewerte das große Ganze. Wie sieht deine aktuelle Designsprache aus? Gibt es Möglichkeiten zu standardisieren und zu optimieren?
Achte auf Inkonsistenzen, Redundanzen oder Bereiche, in denen dein Produkt uneinheitlich wirkt. Diese sind oft Anzeichen dafür, dass ein kohärentes Designsystem das Nutzererlebnis verbessern könnte.
Befürworter*innen engagieren
Ein Designsystem zu entwickeln ist ein Gemeinschaftsprojekt. Beginne daher frühzeitig damit, Unterstützer*innen für deine Sache zu gewinnen. Am besten eignen sich Personen, die eine Leidenschaft für Designkonsistenz haben oder bereits Erfahrungen mit Designsystemen sammeln konnten. Beschränke dich dabei nicht nur auf das Designteam – auch Entwickler*innen, Produktmanager*innen, der Kundensupport und Mitarbeiter*innen aus anderen Bereichen des Unternehmens sind wichtig. Durch das Einbeziehen verschiedener Perspektiven kann dein Designsystem den Anforderungen deines gesamten Produkts und der Organisation gerecht werden, nicht nur denen einer spezifischen Gruppe. Und denke daran: Viele erfolgreiche Designsysteme beginnen mit nur einer Person im Team! Irgendjemand muss die Initiative ergreifen – warum nicht du?
Den richtigen Ansatz wählen
Es gibt zwei grundlegende Ansätze, ein Designsystem zu erstellen: von Grund auf mit einer individuellen Lösung oder durch die Übernahme eines bestehenden Frameworks und dessen Anpassung an deine Bedürfnisse. Beide Ansätze haben Vor- und Nachteile.
Auf der sprichwörtlichen grünen Wiese zu bauen erlaubt es dir, das System an deine einzigartigen Anforderungen anzupassen, erfordert jedoch auch mehr Zeit und Ressourcen im Voraus. Ein bestehendes Framework oder ein Open-Source-System kann dir helfen, schneller startklar zu sein, könnte aber mehr Anpassung erfordern, um auf deinen spezifischen Anwendungsfall zu passen.
Es gibt kein richtig oder falsch. Der passende Ansatz hängt von den Fähigkeiten deines Teams, der verfügbaren Kapazität und den langfristigen Zielen ab. Du kannst immer klein anfangen und dich mit der Zeit weiterentwickeln.
Ziele abstimmen
Die Ziele deines Designsystems sollten mit denen deines Unternehmens übereinstimmen. Achte auf Timing, Ressourcen und die Zustimmung der Führungsebene und nutze die Erkenntnisse deiner vorherigen Bestandsaufnahme, um zu verdeutlichen, wie ein Designsystem die übergeordneten Ziele des Unternehmens unterstützen kann.
Designsysteme erfordern fortlaufende Investitionen. Daher ist es wichtig, von Anfang an die Unterstützung der Stakeholder zu sichern. Wenn du dein System mit klaren Geschäftsvorteilen verknüpfst, wie einer schnelleren Markteinführung oder einer verbesserten Nutzererfahrung, erleichtert das die Zusicherung der nötigen Ressourcen erheblich.
Denkst du über den Umstieg nach? Im Insider-Leitfaden für eine nahtlose Figma-Migrationvon Designer Advocate Clara Ujiie findest du jede Menge Ressourcen, Tipps und Tools für den Umstieg auf Figma.
Leitprinzipien definieren
Mit dieser Grundlage bist du nun bereit, dein Designsystem zu formen. Ein wichtiger früher Schritt dabei ist die Definition von Leitprinzipien. Diese Prinzipien dienen als Wegweiser für dein System und sorgen dafür, dass alle Beteiligten auch während des Wachstums und der Entwicklung des Systems auf Kurs bleiben. Deine Prinzipien sollten den Zweck und die Werte, die dein System antreiben, klar festlegen. So sorgst du dafür, dass jede Entscheidung auf dem Weg die übergeordneten Ziele deiner Organisation unterstützt. Ziel ist es, eine kleine Anzahl einprägsamer, umsetzbarer Aussagen zu formulieren, die leicht zu referenzieren und anzuwenden sind.
In der Theorie legst du deine Prinzipien idealerweise gleich zu Beginn fest. In der Praxis jedoch entstehen oder entwickeln sie sich oft erst später. Das ist kein Problem! Sobald sie feststehen, solltest du sicherstellen, dass jede*r darüber informiert und einverstanden ist. Das macht zukünftige Entscheidungen viel klarer.
Diese Reihe baut auf unserem Kurs Einführung in Designsysteme auf, in dem wir das Habitz-Team dabei begleiten, wie es seine Grundprinzipien festlegt und sie in konkrete Designrichtlinien umsetzt.
Hier sind ein paar Tipps für die Erstellung effektiver Designprinzipien:
- Starte mit dem „Warum“. Was ist der zentrale Wert oder die zentrale Überzeugung, die dieses Prinzip vorantreibt?
- Sei konkret. Gib konkrete Beispiele und Anweisungen, wie das Prinzip praktisch umgesetzt werden soll.
- Bleib handlungsorientiert. Prinzipien sollten leicht umsetzbar sein und nicht nur als dokumentierte Absichten bestehen
Zum Beispiel könnte Barrierefreiheit ein zentrales Anliegen deines Teams sein. Ein Prinzip für inklusives Design könnte Vorgaben umfassen, die unterschiedliche Seh- und Hörfähigkeiten berücksichtigen, Kontrast und Lesbarkeit testen oder neueste Normen zur Barrierefreiheit befolgen.
Definiere deine Prinzipien zusammen mit deinem Team – mit dieser FigJam-Vorlage.
Als Grundlage für deine Designprinzipien kannst du den großen Wissensschatz deines Unternehmens heranziehen. Sieh dir vorhandene Ressourcen und Richtlinien wie Markenstandards, Leitfäden zu Sprache und Ton, Marketingstrategien oder Kundenbetreuungs-Playbooks an. Nutze diese als Ausgangspunkt und arbeite mit funktionsübergreifenden Partner*innen zusammen, um deine Prinzipien mit den übergeordneten Guidelines abzugleichen. Ziel ist es nicht nur, einen Satz generischer Prinzipien zu erstellen, sondern die einzigartigen Prioritäten und Überzeugungen zu artikulieren, die dein Unternehmen und Produkt ausmachen.
Schritt 2: Das Fundament legen
Das Fundament deines Designsystems sind die wesentlichen visuellen und funktionalen Elemente, die seine Basis bilden. Dazu gehören entscheidende Aspekte wie Barrierefreiheit, Farbe, Typografie, Ikonografie, Illustration und Dimensionen. Diese Elemente schaffen im Zusammenspiel eine starke, konsistente Designsprache, die Nutzer*innen leicht verwenden und verstehen können.
Hier erfährst du, wie Stash Finanzprodukte entwickelt, auf die sich Kund*innen verlassen können. Stash nutzt Figma-Komponenten und Ditto, um Textaktualisierungen bereitzustellen – und beschleunigt die Arbeit um 20% mit über 12.000 eingesparten Stunden.
Zugänglichkeit und Barrierefreiheit für alle
Wir sprechen von Zugänglichkeit oder Barrierefreiheit (englisch: Accessibility), wenn alle dein Produkt nutzen und verstehen können – unabhängig von ihren Fähigkeiten. Barrierefreie Produkte zu entwickeln ist eine gemeinschaftliche Verantwortung und sollte daher stets ein zentraler Bestandteil der Prinzipien deines Designsystems sein. Beim Entwurf deines Designsystems solltest du Aspekte wie Schriftgrößen, Farbkontraste sowie die Beschriftung und Organisation der Komponenten im Hinblick auf Barrierefreiheit berücksichtigen. Es ist wichtig, sowohl das Wie als auch das Warum der Nutzung deiner Designsystem-Elemente zu kommunizieren, um sicherzustellen, dass deine Produkte den aktuellen Standards entsprechen. Indem du Barrierefreiheit von Beginn an priorisierst und klare Richtlinien vorgibst, legst du den Grundstein für ein inklusiveres Produkt, mit dem alle was anfangen können. Dennoch solltest du bedenken, dass ein barrierefreies Designsystem nicht automatisch ein barrierefreies Produkt garantiert. Das erfordert eine fortlaufende Anstrengung und das Engagement des gesamten Teams.
Probiere das Plugin Contrast & Accessibility von Stark aus, um deinen Arbeitsablauf für Barrierefreiheit zu optimieren. Für barrierefreie Farbgestaltung, schau dir die Plugins in der Figma Community an und befolge die Web Content Accessibility Guidelines.
Die richtigen Farbkombinationen
Farbe ist ein mächtiges Werkzeug im Design. Sie kann Emotionen und visuelles Interesse wecken und Aufmerksamkeit lenken. Wenn du Farben für dein Designsystem auswählst, achte auf eine ausgewogene Palette, die weder zu limitiert noch überwältigend wirkt. Berücksichtige dabei, wie die Farben in verschiedenen Modi, wie dem Dunkelmodus, und über diverse Produkte hinweg wirken, um ein konsistentes Markenerlebnis zu kreieren.
Wirf einen Blick auf dieses ultimative Farbpalettensystem von Untitled UI, ein zielgerichtetes Set von ordentlich organisierten Farbstilen – der perfekte Ausgangspunkt für jede Marke oder jedes Projekt.
Um deine Farbpalette zu vereinfachen, analysiere die vorhandenen Designs deines Teams und konsolidiere ähnliche Farbtöne. Die Reduzierung der Anzahl der Farben, die für primäre Schaltflächen verwendet werden, kann das Design sauberer und intuitiver machen. Eine gute Faustregel hierfür ist, mit 60 % neutralen Farben, 30 % Primärfarben und 10 % Sekundär- oder Akzentfarben zu beginnen.
Leicht lesbare und markenkonforme Typografie
Die Typografie ist ein weiteres Schlüsselelement deines Designfundaments. Wähle Schriftarten, die leicht zu lesen sind, zu deiner Markenpersönlichkeit passen und gut zusammenwirken. Achte für ein angenehmes Leseerlebnis auf Details wie Buchstabenabstand, Stärke und Zeilenhöhe. Lege einen einheitlichen Satz von Schriftgrößen und Zeilenhöhen fest, wenn du deinen Schriftgrad definierst, der in der Regel bei 16 Pixeln liegt. Du könntest auch deine Schriftskala nach ihrem beabsichtigten Einsatz sortieren, wie etwa ‚Display‘ oder ‚Titel‘, oder du wählst eine einfachere Benennung wie ‚Überschrift-100‘.
Elevation für eine visuelle Hierarchie
Elevation (auf Deutsch so viel wie Erhöhung) bezieht sich auf den Einsatz von Schatten, Schichten und Transparenz, um Tiefe und Ordnung in dein Design zu bringen. Zum Beispiel können Karten so dargestellt werden, als wären sie leicht von der Seite erhoben, oder ein Dialogfenster könnte durch den Einsatz von Schatten zum Fokuspunkt werden, indem es über allem anderen zu schweben scheint. Subtile Schatten auf festen Navigationsleisten oder eingesetzte Schatten auf Navigationsleisten können ebenfalls ihre Position relativ zur Seite anzeigen. Elevation kann dir helfen, dein Design zu strukturieren und den Nutzern intuitiv zu vermitteln, welche Elemente primär und welche sekundär sind.
Einheitliche und aussagekräftige Icons
Entdecke diesen umfassenden Leitfaden zur Ikonografie von der Illustratorin und Icon-Designerin Bonnie Kate Wolf auf DesignSystems.com.
Icons sind kleine visuelle Symbole, die Ideen und Aktionen kommunizieren. Ein gut gestaltetes Icon-System stärkt deine Markenidentität und verbessert die Benutzbarkeit. Dafür müssen deine Icons klar und konsistent sein und ihre Bedeutung auch bei unterschiedlichen Stilen beibehalten. Verwende ein Icon-Raster, um konsistente Größen und Ausrichtungen zu gewährleisten. Mit einer beschreibenden Nomenklar und Suchbegriffen machst du sie leicht auffindbar und nutzbar.
Sieh dir an, wie das Microsoft-Team sein Fluent-Icon-System über ihre Produkte hinweg nutzt. Die Fluent-Icons zeichnen sich durch abgerundete Ecken, vereinfachte Formen aus und sind in regulären und gefüllten Versionen verfügbar.
Anwendung von Tokens mit Variablen und Stilen
Sieh dir unsere Lerneinheit zur Anwendung von Token, Variablen und Stilen an, die Teil unseres Kurses Einführung in Designsysteme ist.
Variablen vs. Stile
Variablen in Figma speichern einzelne Werte wie z. B. Farben, während Stile komplexere Informationen wie Farbverläufe speichern und besser für detaillierte, mehrschichtige Designs geeignet sind. Mehr erfahren.
Verwende in Figma Variablen und Stile, um ein konsistentes und skalierbares Designsystem zu erstellen. Variablen und Stile definieren die Kernbestandteile, die in deinen Designs wiederverwendet werden können. Sie lassen sich üblicherweise in zwei Haupttypen kategorisieren.
- Primitive: Das sind die grundlegenden Bausteine deines Designsystems, wie Farben, Abstände und Größen. Sie bilden die Basis deines Designs, werden aber nicht direkt in Komponenten oder Layouts verwendet.
- Semantisch: Diese bieten einen sinnvollen Kontext dafür, wie eine Variable oder ein Stil verwendet werden sollte. Zum Beispiel könnte eine Farbvariable „color-background-warning“ ein Gefühl der Dringlichkeit oder potenzielle Gefahr vermitteln. Semantische Variablen sind meistens Aliase für primitive Werte, können aber auch rohe Hex-Codes, Zahlen oder Strings annehmen.
Beim Benennen deiner Variablen und Stile ist es wichtig, klare und konsistente Konventionen zu verwenden. Ein Mitwirkender zu Designsystemen, Nathan Curtis, schlägt vor, eine Basis (wie Farbe oder Größe) mit Modifikatoren (wie Variante oder Zustand) zu kombinieren, um Namen zu vergeben, die leicht zu verstehen und zu verwenden sind. Das Ziel ist eine gemeinsame Konvention, die jeder in deinem Team verwenden kann, um effizienter zu kommunizieren und zu arbeiten.
Zum Figma-Tutorial: Einführung in Variablen. Dieses Tutorial vermittelt dir ein besseres Verständnis darüber, wie Variablen funktionieren und zeigt dir, wie du sie einsetzen kannst, um Design-Token zu repräsentieren sowie verschiedene Modi und Themen effektiv zu integrieren.
Layout-Raster und Abstände für visuelle Harmonie
Layout-Raster, Abstände und Größenordnungen (zusammengefasst als „räumliche Systeme“ bezeichnet) sind wie der unsichtbare Klebstoff, der dein Design zusammenhält. Mit ihnen schaffst du ein Gefühl von Struktur, Konsistenz und visueller Harmonie, das dein Produkt professionell und hochwertig wirken lässt.
- Layouts: Definiere, wie dein Design sich für ein einheitliches Erlebnis auf allen Plattformen an verschiedene Bildschirmgrößen und Geräte anpasst.
- Raster: Verwende Spaltenraster, Basislinienraster und modulare Raster, um Elemente konsistent auszurichten und eine klare visuelle Hierarchie zu schaffen.
- Abstände: Definiere konsistente Abstandseinheiten, um die Distanzen zwischen Elementen zu steuern und ein ausgewogenes, lesbares Layout zu kreieren.
Es gibt viele Arten von Rastern, die du als Grundgerüst für dein Layout verwenden kannst:
- Spaltenraster teilen den Bildschirm in vertikale Bereiche auf und erleichtern so die Ausrichtung von Elementen, um ein einheitliches Erscheinungsbild über verschiedene Geräte hinweg zu gewährleisten.
- Basislinienraster bestimmen den vertikalen Abstand zwischen Elementen, in der Regel entsprechend der Basislinie deines Textes.
- Modulare Raster verbinden sowohl Spalten- als auch Zeilenunterteilungen und schaffen eine flexible Struktur für die Gestaltung komplexerer Layouts.
Erfahre mehr über Abstände, Raster und Layouts von Elliot Dahl, dem Head of Product Design bei Hightouch, auf DesignSystems.com.
Warum ist acht eine häufig wiederkehrende Zahl in Designsystemen? Der Grund ist einfach: Die Mehrheit der Geräte-Breakpoints ist durch acht teilbar, was die acht zu einer idealen Basiseinheit für Raster, Abstände und Typografie macht.
Effektive Abstände sind entscheidend, um eine visuelle Hierarchie und Beziehungen zwischen Designelementen zu schaffen. Durch die Verwendung konsistenter Abstandseinheiten erzeugst du ein Gefühl von Harmonie und Ausgewogenheit in deinem Produkt.
Responsives Design ist ein Ansatz für das Design auf Bildschirmen, der die Vielfalt der Geräte berücksichtigt und für ein ideales Seherlebnis auf jedem Gerät optimiert.
Mit vordefinierten Layoutkomponenten und Vorlagen kann dein Designsystem Teams dabei unterstützen, responsive und adaptive Designs effizienter zu gestalten. Diese Komponenten sind mit einem Satz vordefinierter Breakpoints versehen, die festlegen, wie sich das Layout bei unterschiedlichen Bildschirmgrößen anpasst. Beispielsweise könnte dein Designsystem eine „Hero“-Komponente enthalten, die eine wichtige Botschaft oder ein Produkt besonders hervorhebt. Indem du verschiedene Layoutvarianten für unterschiedliche Bildschirmgrößen bereitstellst, sorgst du dafür, dass die Hero-Komponente stets optimal wirkt und ihre visuelle Hierarchie beibehält, egal ob sie auf einem Smartphone oder Desktop angezeigt wird. Dieser Ansatz ermöglicht es Teams, sich auf die Entwicklung herausragender, produktspezifischer Designs zu konzentrieren, statt für jede responsive Layout-Herausforderung das Rad neu erfinden zu müssen.
Gegenargument: Brauchst du überhaupt ein Raster? Design Systems Architect Donnie D’Amato plädiert für alternative Ansätze.
Leider garantiert das Vorhandensein eines Systems längst nicht dessen perfekte Nutzung. Es ist wie ein Rezeptbuch – super hilfreich, aber es liegt am Koch, den Anweisungen zu folgen und was Leckeres zu kochen. Deshalb ist es so wichtig, dass Designer*innen das räumliche System verstehen und annehmen. Wenn Designer*innen wissen, warum einheitliche Abstände und Layouts wichtig sind, werden sie eher nutzerfreundliche Designs erstellen.
Die Designsystem-Funktionen von Figma wie Layoutraster und Stile erleichtern es Teams, das räumliche System in allen Projekten zu berücksichtigen. Als zentrale Informationsquelle für Raster, Abstände und Layoutkomponenten hält Figma alle up-to-date. Das Ergebnis? Nutzererfahrungen, die kohärent und intuitiv sind, egal wo jemand mit deinem Produkt oder deiner Marke interagiert.
Letztendlich ist ein räumliches System ein unglaublich wertvolles Tool, dessen Wirksamkeit jedoch vom verlässlichen Einsatz abhängt. Ihr volles Potenzial entfalten räumliche Systeme dann, wenn Designer*innen ihre Vorteile kennenlernen und zu ihrer Nutzung angehalten werden.
Denk dran: Ein räumliches System soll deine Designarbeit inspirieren und leiten, nicht deine Kreativität einschränken. Integriere es geschickt in deine Projekte, wobei du stets die Bedürfnisse und Erlebnisse deiner Nutzer*innen in den Vordergrund rückst. Sieh das System nicht als Korsett strikter Regeln, sondern als ein unterstützendes Gerüst, das dir den kreativen Spielraum bietet, um auf Herausforderungen flexibel zu reagieren und gleichzeitig kohärente, nutzerorientierte Lösungen zu schaffen.
Schritt 3: Dein Designsystem in Figma erstellen
Ein Designsystem in Figma zu entwickeln, bedeutet, eine konsistente, effiziente und skalierbare Arbeitsweise für dein gesamtes Projekt zu schaffen. Es ist vergleichbar mit dem Erstellen eines Baukastens, den jedes Teammitglied nutzen kann, um stimmige Designs zu gestalten. Hier eine einfache Anleitung, um dir den Start zu erleichtern:
Sieh dir deine bestehenden Designs genau an
Erinnerst du dich an die anfängliche Bestandsaufnahme, bei der du alle deine vorhandenen Designs analysiert und in einzelne Elemente zerlegt hast? Jetzt ist der Zeitpunkt gekommen, darauf zurückzugreifen. Beginne damit, deine Variablen und Stile festzulegen. Diese sind die Basisbausteine deines Designs und umfassen Farben, Schriftarten, Abstände, Layouts und spezielle Effekte wie Schatten. Durch das Erstellen vordefinierter Stile stellst du sicher, dass alle im Team diese Designelemente einheitlich in allen Projekten verwenden.
In diesem Figma-Tipp erklärt Design Advocate Lauren Andres, was Komponenteneigenschaften sind und wie du sie erstellst.
Komponenteneigenschaften sind die veränderbaren Aspekte einer Komponente. Du kannst festlegen, welche Teile einer Komponente andere ändern können, indem du sie an bestimmte Designeigenschaften bindest.
Definiere als nächstes deine Komponenten. Komponenten sind vorgefertigte Bausteine, die du in deinen Designs wieder verwenden kannst. Dazu gehören einfache Elemente wie Buttons und Icons, aber auch komplexere wie Dialogfenster und Navigationsleisten. Zerlege diese Komponenten in ihre einfachsten Bestandteile und setze sie dann zu komplexeren Strukturen zusammen.
Wähle klare und einheitliche Namen
Es ist wichtig, dass du deine Komponenten und Variablen so benennst, dass ihre Funktion und nicht ihr Aussehen oder ihre Programmierung im Vordergrund steht. Das macht sie leichter verständlich und einfacher zu verwenden. Verwende semantische Namen, die den Sinn und Zweck des Elements widerspiegeln. Du könntest zum Beispiel „color-warning“ für eine Warnmeldung verwenden oder „surface-primary“ als Haupt-Hintergrundfarbe deiner App. Füge auch Details wie die Kategorie und Varianten in den Namen ein, z. B. „color-text-secondary“ für die Farbe deiner sekundären Überschriften.
Es gibt verschiedene Ansätze, wie du Komponenten benennen kannst. Bindestriche (wie bei „primary-button“) und CamelCase (wie bei „primaryButton“) sind die gängigsten Methoden. Wenn du dir unsicher bist, welche Benennungskonvention du verwenden solltest, sprich mit deinem Entwicklungsteam. So kannst du herausfinden, ob es bereits bestehende Konventionen in deiner Organisation gibt, an die du dich anlehnen kannst.
Organisiere deine Figma-Bibliothek
Hier erfährst du, wie Onfido, ein Technologieunternehmen, das Unternehmen bei der Verifizierung unterstützt, seine Designsystem-Teams, Projekte und Dateien organisiert.
Ein großer Vorteil von Figma ist die Möglichkeit, Bibliotheken über verschiedene Dateien und Projekte hinweg zu teilen. So kann jedes Teammitglied auf denselben Satz von Stilen und Komponenten zugreifen, ganz gleich an was es arbeitet.
Überlege, welche Struktur am besten für dein Team funktioniert. Vielleicht ist es sinnvoll, alles in einer einzigen Datei zu behalten, damit alle immer auf dieselbe Informationsquelle zugreifen können. Oder du entscheidest dich dafür, die Inhalte auf mehrere Dateien für verschiedene Projektteile aufzuteilen. Berücksichtige dabei, wie dein Team am liebsten zusammenarbeitet und wie die Bibliothek sowohl vom Design- als auch vom Entwicklungsteam genutzt wird.
Suchst du nach einer Anleitung zur Strukturierung deines Designsystems? Schau dir diese Community-Datei von Figma Designer Advocate Luis Ouriach an. Dort findest du Empfehlungen, wie du dein Designsystem für Teams, Projekte und Dateien aufbauen kannst.
Ein Designsystem in Figma zu entwickeln ist ein dynamischer Prozess. Es wächst und entwickelt sich zusammen mit deinem Team und deinen Projekten. Beginne mit einem soliden Fundament und ermutige alle im Team, sich einzubringen und eure Designpraktiken kontinuierlich zu verbessern. Mit der Zeit wird das System zu einem integralen und sich weiterentwickelnden Teil eurer Arbeit, angereichert durch eure gemeinsame Expertise und Kreativität.
Möchtest du mehr über den detaillierten Aufbau eines Designsystems in Figma erfahren, schau dir unsere Schritt-für-Schritt-Anleitung und das untenstehende Video an.
✉️ Melde dich für unseren redaktionellen Newsletter an, um weitere Tipps und Ideen für Designsysteme zu erhalten!
Und wenn du weitere Fragen hast oder dich über andere Themen informieren möchten, schreib uns auf Twitter unter @figma. Wir helfen dir gerne! Erfahre mehr darüber, wie Figma Teams dabei hilft, die Konsistenz zu verbessern, Designs zu skalieren und mit der Entwicklung Schritt zu halten, indem du unsere Designsystemfunktionen nutzt und eine Demo anforderst.
