Zu Hauptinhalten gehen

So kannst du deinen Designsystem-Workflow in Figma optimieren

Luis OuriachDesigner Advocate, Figma

Wenn du beim Erstellen eines neuen Designsystems schon einmal vor einer leeren Figma-Datei gesessen hast, keine Sorge: Mit diesen neuen Funktionen und Plugins verwandelt sich diese riesige Aufgabe in eine Sache von wenigen Stunden.

So kannst du deinen Designsystem-Workflow in Figma optimieren teilen

Hero-Animation von Kelli Anderson

Hier ist eine kurze Referenzliste der Plugins, die wir behandeln:

  1. CSS color-mix(): Erstelle Farbpaletten und Farbverläufe
  2. Colorbox: Erstelle vollständige Farbgradienten
  3. Das Genom Color Tool: Erstelle WCAG-konforme Farbskalen
  4. Peppercorn: Richte dein gesamtes Typografiesystem ein
  5. Druckvariablen: Erstelle Sticker-Bögen für Variablen-Collections
  6. Auto Documentation (Auto-Dokumentation): Erstelle Stickerbögen für alle Variablen
  7. Variables and Styles List: Erhalte Bögen für Variablen in einem Arbeitsflächen-Widget
  8. Propstar: Arbeite Variationen von Komponenteneigenschaften aus
  9. Specs: Erstelle Komponentenspezifikationen
  10. Similayer: Filter für spezifische Ebenen und Eigenschaften
  11. Style Finder: Finde Styles über Seiten hinweg
  12. CTRL Var: Benenne Variablen um
  13. Export Import Variables: Verwalte Variablen in Figma oder aus Figma heraus
  14. Handoff: Kopiere CSS-Variablen sofort
  15. Variablenkonverter: Übersetze Variablen in Code
  16. Shaper: Verwalte die Token-Architektur und generiere CSS-Code

Das kennen wir alle: Man startet ein neues Designsystem-Projekt, starrt aus dem Fenster und fühlt die Last der vor einem liegenden Mammutaufgabe. Farbverläufe, Typografieskalen, Abstandssysteme – als Designer Advocate weiß ich, dass es sehr viel Spaß machen kann, diese zu verfeinern, aber seien wir ehrlich: Es kann ewig dauern, sie richtig hinzubekommen.

Nach unzähligen Runden dieses Zyklus habe ich eine Kombination aus Tools und Plugins gefunden, die mir Stunden an Arbeit sparen und meine Blue-500s verschwinden lassen. Betrachte sie als deine Co-Piloten für Designsysteme, die sich jeweils auf einen anderen Aspekt des Wegs vom Konzept zum Code spezialisiert haben. Und das Beste daran? Heute führen wir 9 neue Funktionen für Designsysteme ein, die einige häufig auftretende Probleme beheben. Sehen wir uns einmal an, was sich in Figma geändert hat und wie diese Updates meine Lieblings-Plugins noch leistungsfähiger mächtiger machen.

Modi und Collections mühelos neu anordnen

Wenn du jemals versucht hast, deine Modi oder Collections neu zu organisieren, weißt du, wie mühsam es ist, sie zu löschen und neu zu erstellen, nur um dann festzustellen, dass die Designs nicht mehr synchron sind. Das ist jetzt vorbei: Du kannst sie jetzt ganz einfach per Drag-and-Drop verschieben, um sicherzustellen, dass alles genau so ist, wie du es haben möchtest. Modi und IDs bleiben beim Neuanordnen erhalten, sodass keine Resets oder fehlerhaften Abhängigkeiten auftreten, und du kannst deinen Standardmodus ohne Komplikationen anpassen.

Dies mag nur wie eine kleine Änderung erscheinen, aber es macht einen großen Unterschied für Teams, die folgendes möchten:

  • Ihre meistgenutzten Collections an oberster Stelle behalten
  • Verwandte Modi zusammenfassen
  • Rebranding oder Aktualisierung von Produktlinien vornehmen

9 neue Verbesserungen der Benutzerfreundlichkeit

Heute veröffentlichen wir Updates, die Komplikationen reduzieren und deinen Workflow beschleunigen:

  • Neues Tastenkürzel für „Zur Hauptkomponente gehen“, damit du direkt zur Quelle springen kannst
  • Stile duplizieren und kopieren für schnellere Iterationen
  • Variable Farben können verborgen und wieder sichtbar gemacht werden, um deinen Arbeitsbereich übersichtlich zu halten
  • Verbesserte UI für die Beschreibung von Komponenten, die die Lesbarkeit auf einen Blick verbessert
  • Das Variablenmodal aus der gesamten Kopfzeile ziehen für bessere Kontrolle und Zugriff
  • Automatische Speicherung von Variablenänderungen, sodass du nicht klicken musst, um deine Aktualisierungen zu behalten
  • Tooltips zu Komponentennamen geben dir beim Hovern schnell Kontext
  • Bearbeitungsschaltfläche jetzt korrekt ausgerichtet für eine sauberere, ausgefeiltere Erfahrung
  • Verbesserung des Textüberlaufs im Stilfenster, um sicherzustellen, dass lange Namen nicht abgeschnitten werden

Grundlagen schaffen: Die Basics richtig machen

Sprechen wir nun über die Plugins, die diese Funktionen noch besser machen. Community-Plugins haben das Potenzial, bestimmte Teile deine Workflows zu optimieren. Hier sind die Tools, die sich auf die grundlegende Phase des Aufbaus eines Designsystems konzentrieren, wenn du mit Farbe und Typografie beginnst.

Farbpaletten erstellen

Unser eigener Developer Advocate Jake Albaugh hat CSS color-mix() erstellt, ein Plugin, das wie ein digitales Farblabor funktioniert. Erstelle vollständige Paletten - mit enthaltenen Variablen - unter Verwendung moderner Formate wie HSL, HWB, LCH oder OKLCH. Außerdem erzeugt es sanfte, natürliche Farbverläufe, die einen schönen Übergang zwischen den Farben bilden. In Kombination mit Peppercorn (unten erwähnt) kannst du mit bemerkenswerter Geschwindigkeit ein System innerhalb von Figma erstellen.

Eine dunkle Benutzeroberfläche mit einem Werkzeug zum Mischen von Farben Im linken Panel gibt es mehrere Dropdown-Menüs und Eingabefelder zum Anpassen der Farbeinstellungen. Die Optionen beinhalten, dass „Output Type“ (Ausgabetyp) auf „Variables“ (Variablen) festgelegt ist, „Color A“ (Farbe A) und „Color B“ (Farbe B) mit einer Farbverlaufsmischung zwischen Violett (#d265e9) und Grün (#73ff00). „Color Blend“ (Farbmischung) ist auf „hsl“ festgelegt, wobei die Option „shorter hue“ (kürzerer Farbton) ausgewählt ist. „Color Stops“ (Farbstopps) ist auf „10“ festgelegt und „Variable Collection“ (Variablen-Collection) ist auf „CSS color-mix()“ gesetzt. Am unteren Rand befinden sich die beiden Schaltflächen „Create Variables“ (Variablen erstellen) (blau) und „Preview“ (Vorschau) (grau). Auf der rechten Seite zeigt ein Vorschaufenster einen Farbverlauf von Lila zu Orange, mit entsprechenden CSS-‘color-mix()‘-Werten an unterschiedlichen Prozentwerten, die die interpolierten Farben anzeigen.Eine dunkle Benutzeroberfläche mit einem Werkzeug zum Mischen von Farben Im linken Panel gibt es mehrere Dropdown-Menüs und Eingabefelder zum Anpassen der Farbeinstellungen. Die Optionen beinhalten, dass „Output Type“ (Ausgabetyp) auf „Variables“ (Variablen) festgelegt ist, „Color A“ (Farbe A) und „Color B“ (Farbe B) mit einer Farbverlaufsmischung zwischen Violett (#d265e9) und Grün (#73ff00). „Color Blend“ (Farbmischung) ist auf „hsl“ festgelegt, wobei die Option „shorter hue“ (kürzerer Farbton) ausgewählt ist. „Color Stops“ (Farbstopps) ist auf „10“ festgelegt und „Variable Collection“ (Variablen-Collection) ist auf „CSS color-mix()“ gesetzt. Am unteren Rand befinden sich die beiden Schaltflächen „Create Variables“ (Variablen erstellen) (blau) und „Preview“ (Vorschau) (grau). Auf der rechten Seite zeigt ein Vorschaufenster einen Farbverlauf von Lila zu Orange, mit entsprechenden CSS-‘color-mix()‘-Werten an unterschiedlichen Prozentwerten, die die interpolierten Farben anzeigen.

Verwende CSS color-mix(), um moderne Farbräume zu unterstützen und Farbfelder, variable Farbverläufe sowie Vollton- oder Farbverlaufsfüllungen generieren.

Profi-Tipp: Es ist verlockend, 10 Schattierungen jeder Farbe in Ihrem System zu erstellen, aber beginne mit nur drei bis fünf. Normalerweise brauchst du eine für Hintergründe, Vordergründe und Rahmen. Du kannst stets mehr hinzufügen, wenn du sie benötigst.

Für die schnelle Farbverlaufserstellung ist Colorbox von Kevyn Arnott mein bevorzugtes Werkzeug. Erstelle Farbskalen mit intuitiven Filtern für Sättigung, Helligkeit und Farbton und exportiere sie dann als JSON oder direkt in Figma. Sobald du deine Palette erstellt hast, machen unsere neuen Funktionen zur Organisation von Variablen es einfach, sie genau so anzuordnen, wie du es möchtest.

Eine Werbegrafik für „ColorBox“, die ihre Farberstellungs- und Dunkelmodus-Funktionen vorstellt. Der Hintergrund ist in zwei Hälften geteilt: Die linke Seite ist leuchtend grün mit fettem schwarzen Text, der lautet: „Create amazing colors superfast.“ (Erstelle superschnell fantastische Farben.) Die rechte Seite ist in einem dunkleren Grün gehalten und enthält einen weißen Text mit der Aufschrift „Dark Mode in one click” (Dunkler Modus mit einem Klick). In der Mitte ist eine abgerundete rechteckige Karte ebenfalls in zwei Hälften geteilt – links der helle Modus und rechts der dunkle Modus – mit einem blauen Farbverlaufs-Icon über dem „ColorBox“-Text, der auf der hellen Seite schwarz und auf der dunklen Seite weiß ist.Eine Werbegrafik für „ColorBox“, die ihre Farberstellungs- und Dunkelmodus-Funktionen vorstellt. Der Hintergrund ist in zwei Hälften geteilt: Die linke Seite ist leuchtend grün mit fettem schwarzen Text, der lautet: „Create amazing colors superfast.“ (Erstelle superschnell fantastische Farben.) Die rechte Seite ist in einem dunkleren Grün gehalten und enthält einen weißen Text mit der Aufschrift „Dark Mode in one click” (Dunkler Modus mit einem Klick). In der Mitte ist eine abgerundete rechteckige Karte ebenfalls in zwei Hälften geteilt – links der helle Modus und rechts der dunkle Modus – mit einem blauen Farbverlaufs-Icon über dem „ColorBox“-Text, der auf der hellen Seite schwarz und auf der dunklen Seite weiß ist.

Nutze Colorbox, um Farbverläufe innerhalb von Sekunden zu generieren und zu optimieren und direkt nach Figma oder JSON zu exportieren.

Wenn du auf der Suche nach einem WCAG-konformen Generator für vollständige Farbpaletten bist, ist The Genome Color Tool von Kevin Muldoon genau das Richtige für dich. Es enthält bereits Farbverläufe für Primär-, Sekundär-, Tertiär-, Positiv-, Negativ-, Hervorhebungs-, Aufmerksamkeits-, Informations-, System- und Neutralfarben in deinem System. Als ob das nicht genug wäre, sind auch viele bekannte Designsystem-Farbpaletten vorinstalliert – Univers, IBM Carbon, Salesforce Lightning, Adobe Spectrum, Ant und Material – die du ebenfalls im JSON-Format exportieren kannst.

Ein Screenshot der Benutzeroberfläche des „Genome Color Tool“, mit dessen Hilfe Farbpaletten basierend auf verschiedenen Kategorien erstellt werden können. Die Benutzeroberfläche zeigt ein Raster aus Farben, die in Spalten mit den Bezeichnungen „primary“ (primär), „secondary“ (sekundär), „tertiary“ (tertiär), „positive“ (positiv), „negative“ (negativ), „highlight“ (Hervorhebung), „attention“ (Aufmerksamkeit) und „info“ (Info) angeordnet sind. Jede Spalte enthält eine Reihe von Farbtönen, die von helleren Tönen (nahezu weiß) oben zu gesättigteren und dunkleren Farbtönen unten übergehen. Die Hex-Codes für jede Farbe werden in jeder Zelle angezeigt. Oben können Benutzer*innen in Eingabefeldern die Grundfarben für jede Kategorie festlegen. Die Schaltflächen mit der Bezeichnung „Resources“ (Ressourcen) und „Export“ (Exportieren) stehen für zusätzliche Funktionen zur Verfügung. Ein blauer Link zu einem „Quick Start Video“ (Schnellstartvideo) wird ebenfalls angezeigt.Ein Screenshot der Benutzeroberfläche des „Genome Color Tool“, mit dessen Hilfe Farbpaletten basierend auf verschiedenen Kategorien erstellt werden können. Die Benutzeroberfläche zeigt ein Raster aus Farben, die in Spalten mit den Bezeichnungen „primary“ (primär), „secondary“ (sekundär), „tertiary“ (tertiär), „positive“ (positiv), „negative“ (negativ), „highlight“ (Hervorhebung), „attention“ (Aufmerksamkeit) und „info“ (Info) angeordnet sind. Jede Spalte enthält eine Reihe von Farbtönen, die von helleren Tönen (nahezu weiß) oben zu gesättigteren und dunkleren Farbtönen unten übergehen. Die Hex-Codes für jede Farbe werden in jeder Zelle angezeigt. Oben können Benutzer*innen in Eingabefeldern die Grundfarben für jede Kategorie festlegen. Die Schaltflächen mit der Bezeichnung „Resources“ (Ressourcen) und „Export“ (Exportieren) stehen für zusätzliche Funktionen zur Verfügung. Ein blauer Link zu einem „Quick Start Video“ (Schnellstartvideo) wird ebenfalls angezeigt.

Verwende The Genome Color Tool als deinen barrierefreien Farbgenerator.

Optimierung von Typografiesystemen

Eine Typografie-Skala zu erstellen war schon immer ein herausfordernder Prozess. Peppercorn ändert das vollständig. Richte dein gesamtes Typografie-System ein – von Überschriften bis Fließtext – mit Ihrer bevorzugten Schriftfamilie, Basisschriftgröße und Skalierungsverhältnis. Die Live-Vorschau zeigt dir genau, was du bekommst, und du kannst JSON oder CSS exportieren. Mit der verbesserten Variablenverwaltung von Figma wird die Pflege deines Typografie-Systems wesentlich unkomplizierter.

Eine Werbeoberfläche für ein Typografie-Tool namens „The Perfect Type Scale“ (Die perfekte Schriftgröße). Auf der linken Seite befindet sich eine Überschrift mit dem Titel „The Perfect Type Scale“ (Die perfekte Schriftgröße), gefolgt von einer Unterüberschrift: „For typography connoisseurs. Generate ultra modular scales in seconds.“ (Erstelle in Sekundenschnelle ultramodulare Skalen.) Unter dem Text befinden sich Icons mit Beschriftungen: „Documentation“ (Dokumentation), „Text Variables“ (Textvariablen), „Text Styles“ (Textstile), „Code“ und „Responsive scales“ (Responsive Skalen). Die rechte Seite der Abbildung zeigt die Benutzeroberfläche des Tools, die Einstellungen für Schriftart, Basis-Schriftgröße, Größenverhältnis der Schriftart und Größenverhältnis der Zeilenhöhe. Eine Liste typografischer Elemente (H1-H6, Fließtext, Blockzitat, Bildunterschrift usw.) wird mit den jeweiligen Schriftarteigenschaften angezeigt. Ein Vorschau-Panel auf der rechten Seite zeigt Beispieltext („The quick brown fox jumps over 17 lazy dogs“ (Der schnelle braune Fuchs springt über 17 faule Hunde) in verschiedenen Überschriften- und Textstilen sowie deren Schriftgrößen und Zeilenhöhen. Unten rechts befindet sich eine Schaltfläche „Generate Scale“ (Skala erstellen).Eine Werbeoberfläche für ein Typografie-Tool namens „The Perfect Type Scale“ (Die perfekte Schriftgröße). Auf der linken Seite befindet sich eine Überschrift mit dem Titel „The Perfect Type Scale“ (Die perfekte Schriftgröße), gefolgt von einer Unterüberschrift: „For typography connoisseurs. Generate ultra modular scales in seconds.“ (Erstelle in Sekundenschnelle ultramodulare Skalen.) Unter dem Text befinden sich Icons mit Beschriftungen: „Documentation“ (Dokumentation), „Text Variables“ (Textvariablen), „Text Styles“ (Textstile), „Code“ und „Responsive scales“ (Responsive Skalen). Die rechte Seite der Abbildung zeigt die Benutzeroberfläche des Tools, die Einstellungen für Schriftart, Basis-Schriftgröße, Größenverhältnis der Schriftart und Größenverhältnis der Zeilenhöhe. Eine Liste typografischer Elemente (H1-H6, Fließtext, Blockzitat, Bildunterschrift usw.) wird mit den jeweiligen Schriftarteigenschaften angezeigt. Ein Vorschau-Panel auf der rechten Seite zeigt Beispieltext („The quick brown fox jumps over 17 lazy dogs“ (Der schnelle braune Fuchs springt über 17 faule Hunde) in verschiedenen Überschriften- und Textstilen sowie deren Schriftgrößen und Zeilenhöhen. Unten rechts befindet sich eine Schaltfläche „Generate Scale“ (Skala erstellen).

Verwende Peppercorn, um vollständige Schriftsysteme zu erstellen und alles zu exportieren, was Entwickler*innen benötigen.

Dokumentation: Dein System übersichtlich und zugänglich gestalten

Sobald du dein System erstellt hast, musst du es dokumentieren, damit unsere Designer- und Entwicklerpartner es in seiner ganzen Pracht anzeigen, übernehmen und implementieren können. Diese Plugins übernehmen die zeitraubende Arbeit.

Erstellen von Stickerbögen für Variablen

Wenn du bestimmte Variablen-Collections dokumentieren musst, erstellt Print Variables (Variablen drucken) von MINKMINKs wunderschöne, fokussierte Stickerbögen. Dies beinhaltet Variablenbeschreibungen, die den Kontext ergänzen und den Teammitgliedern helfen, den Zweck jedes Wertes zu verstehen. Verwende dies mit unseren neuen Funktionen zur Organisation von Variablen, um kontextbezogene und dynamische Dokumentationen zu erstellen.

Eine Werbegrafik für „Print Variables V2“ mit dunklem Hintergrund und einem Leuchteffekt auf verschiedenen UI-Elementen. Der Titel „✨ Print Variables V2 ✨“ ist zentriert in fetter weißer Schrift mit Glitzer. Mehrere schwebende weiße Karten zeigen verschiedene Designvariablen, einschließlich Typografie, Abstände, Deckkraft und Breakpunkte. Eine Karte zeigt ein großes blaues „Aa“ mit der Beschriftung „colour/text/text-action-secondary“ und einem Hex-Code. Eine andere Karte zeigt „Font family: Poly“ (Schriftartfamilie: Poly) in Lila. Weitere Karten enthalten Spezifikationen wie „Width & Height, Gap: 128px“ (Breite und Höhe, Abstand: 128 px), „Opacity: 32 %“ (Deckkraft: 32 %) und „Radius: 32 px“. Eine größere Karte unten rechts skizziert Breakpunkte für mobile, Tablet- und Desktop-Container und listet Werte wie „-343“, „808“ und „1224“ auf. Das Layout und die leuchtenden Karten verleihen dem Bild einen futuristischen und modernen Eindruck.Eine Werbegrafik für „Print Variables V2“ mit dunklem Hintergrund und einem Leuchteffekt auf verschiedenen UI-Elementen. Der Titel „✨ Print Variables V2 ✨“ ist zentriert in fetter weißer Schrift mit Glitzer. Mehrere schwebende weiße Karten zeigen verschiedene Designvariablen, einschließlich Typografie, Abstände, Deckkraft und Breakpunkte. Eine Karte zeigt ein großes blaues „Aa“ mit der Beschriftung „colour/text/text-action-secondary“ und einem Hex-Code. Eine andere Karte zeigt „Font family: Poly“ (Schriftartfamilie: Poly) in Lila. Weitere Karten enthalten Spezifikationen wie „Width & Height, Gap: 128px“ (Breite und Höhe, Abstand: 128 px), „Opacity: 32 %“ (Deckkraft: 32 %) und „Radius: 32 px“. Eine größere Karte unten rechts skizziert Breakpunkte für mobile, Tablet- und Desktop-Container und listet Werte wie „-343“, „808“ und „1224“ auf. Das Layout und die leuchtenden Karten verleihen dem Bild einen futuristischen und modernen Eindruck.

Verwende Print Variables (Variablen drucken), um ansprechende Stickerbögen deiner Variablen zu erstellen, komplett mit Beschreibungen.

Für umfassende Dokumentationen generiert Auto Documentation (Auto-Dokumentation) von Eddy Salzmann ganze Seiten mit all Ihren Variablen, organisiert nach Collection und Modus. Dank unserer neuen Funktion zum Neuanordnen von Collections und Modi passt sich deine Dokumentation perfekt an deine tatsächliche Organisation an.

Eine Werbegrafik für Auto Documentation zeigt weißen Text auf dunkelblauem Hintergrund mit überlagerten blauen, roten und grünen Farbkarten.Eine Werbegrafik für Auto Documentation zeigt weißen Text auf dunkelblauem Hintergrund mit überlagerten blauen, roten und grünen Farbkarten.

Verwende Auto Documentation (Auto-Dokumentation), um Dokumentationsrahmen zu erstellen, in denen all Ihre Variablen nach Collection und Modus katalogisiert sind.

Wenn Sie nach etwas Dynamischerem suchen, kann Variables and Styles List (Variablen- und Stil-Liste) alle deine Variablen im Kontext eines aktualisierbaren Arbeitsflächen-Objekts ausdrucken. Es ist insofern einzigartig, als dass es sich um ein Widget handelt und einem Klick auf eine Schaltfläche aktualisiert werden kann, im Gegensatz zu anderen Optionen, bei denen bei jeder Änderung der gesamte Frame neu generiert werden muss.

Ein dunkler Farbverlaufshintergrund mit dem Titel „(x) Variables & Styles List“ (Variablen- und Stil-Liste) in weißem Text. Darunter steht der Untertitel „Figma Widget that lists all local variables & styles.“ (Figma-Widget, das alle lokalen Variablen und Stile auflistet) Auf der rechten Seite befindet sich ein vertikales Panel, das eine Liste verschiedener UI-Elemente anzeigt, darunter Farbstile, Token und Typografie-Elemente. Unten links erscheint ein kleines „Hirnspin“-Logo.Ein dunkler Farbverlaufshintergrund mit dem Titel „(x) Variables & Styles List“ (Variablen- und Stil-Liste) in weißem Text. Darunter steht der Untertitel „Figma Widget that lists all local variables & styles.“ (Figma-Widget, das alle lokalen Variablen und Stile auflistet) Auf der rechten Seite befindet sich ein vertikales Panel, das eine Liste verschiedener UI-Elemente anzeigt, darunter Farbstile, Token und Typografie-Elemente. Unten links erscheint ein kleines „Hirnspin“-Logo.

Verwende Variables and Styles List (Variablen- und Stil-Liste), um alle deine Variablen in Echtzeit im Blick zu behalten und einfach auf Knopfdruck zu aktualisieren.

Visualisierung von Komponentenvariationen

Propstar von Gusso zeigt jede Permutation deiner Varianten und Eigenschaften in einer umfassenden Tabelle. Kein endloses Durchklicken von Kombinationen mehr, um zu überprüfen, ob alles funktioniert. Damit wird eine vollständige Tabelle aller Kombinationen auf der Arbeitsfläche angezeigt, wodurch die Kanten deiner sorgsam gestalteten Komponenten viel besser zu erkennen sind. In Kombination mit der Konsolidierung des Eigenschaftenpanels von Figma hilft dir dieses Plugin, alles wie ein Profi zu spezifizieren.

Ein hellgelber Hintergrund mit einem Raster von violetten Schaltflächen in verschiedenen Größen und Stilen. Das Raster ist oben mit Kategorien wie „Text and icon“ (Text und Symbol), „Text“, „Icon“ (Symbol) und „Blank“ (Leer) beschriftet, während die Reihen links mit „Large“ (Groß), „Medium“ (Mittel) und „Small“ (Klein) beschriftet sind. Die Schaltflächen verfügen über Variationen, darunter ein Stern-Icon mit Text, nur Text, nur ein Icon oder eine leere Schaltfläche.Ein hellgelber Hintergrund mit einem Raster von violetten Schaltflächen in verschiedenen Größen und Stilen. Das Raster ist oben mit Kategorien wie „Text and icon“ (Text und Symbol), „Text“, „Icon“ (Symbol) und „Blank“ (Leer) beschriftet, während die Reihen links mit „Large“ (Groß), „Medium“ (Mittel) und „Small“ (Klein) beschriftet sind. Die Schaltflächen verfügen über Variationen, darunter ein Stern-Icon mit Text, nur Text, nur ein Icon oder eine leere Schaltfläche.

Verwende Propstar, um jede mögliche Permutation deiner Komponentenvarianten in einer ordentlichen Tabelle zu kartieren.

Du musst alles über deine Komponenten dokumentieren? Specs von Directed Edges Plugins erstellt ausführliche Aufschlüsselungen—Variablen, Stile, verschachtelte Komponenten, Eigenschaftenwerte und vieles mehr. Es ist ein All-in-One-Ort für ein vollständiges Datenblatt.

Ein dunkles UI-Spezifikationspanel für „eightshapes.specs“. Auf der linken Seite zeigt ein beschriftetes Komponentenlayout ein grünes Feld mit einem Titel, Beschriftungen und nummerierten Annotations. Darunter befindet sich eine Fehlerwarnkomponente mit rotem Hintergrund und Textbeschriftungen. Auf der rechten Seite wird in einem Panel der folgende Text in weiß hervorgehoben: „Now with Pro features for:“ (Jetzt mit Pro-Funktionen für:) – Danach folgt eine Liste mit Vorteilen, darunter „Variable and Tokens Studio“, „Custom spec color & layout“ (Benutzerdefinierte Spezifikationsfarben und -layouts), „Dark mode formatting“ (Dunkelmodus-Formatierung), „Differences across modes“ (Unterschiede zwischen den Modi), „Styling inventories“ (Stil-Bestandslisten) und „Spec as JSON data“ (Spezifikationen als JSON-Daten).Ein dunkles UI-Spezifikationspanel für „eightshapes.specs“. Auf der linken Seite zeigt ein beschriftetes Komponentenlayout ein grünes Feld mit einem Titel, Beschriftungen und nummerierten Annotations. Darunter befindet sich eine Fehlerwarnkomponente mit rotem Hintergrund und Textbeschriftungen. Auf der rechten Seite wird in einem Panel der folgende Text in weiß hervorgehoben: „Now with Pro features for:“ (Jetzt mit Pro-Funktionen für:) – Danach folgt eine Liste mit Vorteilen, darunter „Variable and Tokens Studio“, „Custom spec color & layout“ (Benutzerdefinierte Spezifikationsfarben und -layouts), „Dark mode formatting“ (Dunkelmodus-Formatierung), „Differences across modes“ (Unterschiede zwischen den Modi), „Styling inventories“ (Stil-Bestandslisten) und „Spec as JSON data“ (Spezifikationen als JSON-Daten).

Verwende Specs um jedes Detail deiner Komponenten - von Variablen bis hin zu verschachtelten Elementen - in einer übersichtlichen Dokumentation zusammenzufassen.

Überprüfung deines Designsystems

Für das Scannen von Dokumenten Ebene für Ebene oder Eigenschaft für Eigenschaft empfehle ich unbedingt Similayer. Es hat mir ehrlich gesagt Hunderte von Stunden beim Prüfen und Migrieren zwischen Designsystemen gespart. Es wurde sogar für die Figma UI3 Community-Datei verwendet, als wir sie von der Entwicklung auf die Produktion umgestellt haben.

Eine Werbekarte für Similayer zeigt den Namen auf einem schwarzen Hintergrund, überlagert mit einem UI-Beispiel für die Ebenensuchfunktion.Eine Werbekarte für Similayer zeigt den Namen auf einem schwarzen Hintergrund, überlagert mit einem UI-Beispiel für die Ebenensuchfunktion.

Verwende Similayer, um bestimmte Ebenen in deinen Designs zu finden, gleich ob sie auf Zeilenhöhe, Farbe, Ebenenname oder allen genannten Elementen basieren.

Bei der Wartung oder Aktualisierung von Designsystemen ist Style Finder von Tafumi unser Glücksfall. Dieses Plugin scannt dein gesamtes Dokument und listet jede Instanz eines Stils oder einer Variablen auf. Es hat mir unzählige Stunden mühsamer Suche erspart und die Systemwartung wesentlich einfacher gemacht.

Eine UI-Oberfläche für „Style Finder“ vor einem gedämpften blauen Hintergrund. Die linke Seite zeigt das „Style Finder“-Logo, das aus einem Lupen-Icon über einem blauen Kreis besteht, mit dem Text „Style Finder“ darunter. Auf der rechten Seite zeigt ein Panel eine hierarchische Liste mit Stilen, kategorisiert nach Farbnamen wie „black“ (schwarz), „blue“ (blau). „charcoal“ (Anthrazit) und „gray“ (grau) zusammen mit verschachtelten Elementen wie „Page 1“ (Seite 1) und „Frame 1“.Eine UI-Oberfläche für „Style Finder“ vor einem gedämpften blauen Hintergrund. Die linke Seite zeigt das „Style Finder“-Logo, das aus einem Lupen-Icon über einem blauen Kreis besteht, mit dem Text „Style Finder“ darunter. Auf der rechten Seite zeigt ein Panel eine hierarchische Liste mit Stilen, kategorisiert nach Farbnamen wie „black“ (schwarz), „blue“ (blau). „charcoal“ (Anthrazit) und „gray“ (grau) zusammen mit verschachtelten Elementen wie „Page 1“ (Seite 1) und „Frame 1“.

Verwende Style Finder, um jede Instanz jeder Stilart in deinen Dateien ausfindig zu machen.

Wenn dein System wächst, wird auch die Anzahl deiner Variablen zunehmen. Oft müssen wir unsere Meinung über eine Namenskonvention ändern, was stundenlange manuelle Arbeit bedeutet, um unsere bestehenden Sets zu aktualisieren. CTRL Var: Rename Variables (CTRL Var: Variablen umbenennen) von Murph rettet uns hier, da das Plugin uns die Möglichkeit bietet, Batch-Umbenennungen mit Gruppen- oder Variablenmusterabgleich durchzuführen.

Eine Benutzeroberfläche für „CTRL Var: Rename Variables“ vor einem hellgrünen Hintergrund. Auf der linken Seite befindet sich das Plugin-Fenster „CTRL Var: Rename Variables“, das aus einem Formular zum Suchen, Filtern und Umbenennen von Variablen besteht. Rechts zeigt ein Panel den Namen des Plugins in einem hellen Stil.Eine Benutzeroberfläche für „CTRL Var: Rename Variables“ vor einem hellgrünen Hintergrund. Auf der linken Seite befindet sich das Plugin-Fenster „CTRL Var: Rename Variables“, das aus einem Formular zum Suchen, Filtern und Umbenennen von Variablen besteht. Rechts zeigt ein Panel den Namen des Plugins in einem hellen Stil.

Verwende CTRL Var: Rename variables (CTRL Var: Variablen umbenennen), um die Namen deiner lokalen Variablen in allen Collections zu ändern.

Umsetzung: Design und Entwicklung verbinden

Die letzte Herausforderung besteht darin, Ihr Designsystem effizient in Code zu überführen. Mit den bisherigen Schritten kommen wir schon sehr weit, aber wir können den Prozess noch weiter optimieren, indem wir unsere Entwürfe in Code übersetzen und so die Übereinstimmung mit der Entwicklung sicherstellen.

Export Import Variables (Variablen exportieren/importieren) von Jan Toman dient als Brücke zwischen Figma und der Entwicklung. Importiere vorhandene Token von deinem Engineering-Team oder exportiere deine Figma-Variablen nach JSON. Wenn du noch keine JSON-Datei eingerichtet hast, ermöglicht dir dieses Plugin auch den Export aus Figma – ein doppelter Bonus. Mit unseren neuen Funktionen zur Variablenorganisation behalten deine exportierten Token die Struktur bei, die deine Entwickler*innen erwarten.

Eine Benutzeroberfläche zum Exportieren und Importieren von Variablen in einem Design-Tool. Auf der linken Seite enthält ein Panel mit der Bezeichnung „Export/Import Variables“ (Variablen exportieren/importieren) Optionen zum Importieren einer Collection über JSON und zum Exportieren von Collections mit einer Schaltfläche mit der Bezeichnung „Export to JSON“ (Nach JSON exportieren). Es zeigt auch eine Zusammenfassung von „Radix Scales“ (Radix-Skalen) mit 696 Variablen im hellen und dunklen Modus. In der Mitte symbolisiert ein sechseckiges Logo mit gelben und blauen Pfeilen den Datenaustausch. Auf der rechten Seite sind in einer Tabelle Farbvariablen mit Spalten für „Name“ und die Modi „Light“ (Hell) und „Dark“ (Dunkel), aufgelistet und es werden Farben wie „Tomato“ und „Crimson“ mit den jeweiligen Hex-Codes angezeigt.Eine Benutzeroberfläche zum Exportieren und Importieren von Variablen in einem Design-Tool. Auf der linken Seite enthält ein Panel mit der Bezeichnung „Export/Import Variables“ (Variablen exportieren/importieren) Optionen zum Importieren einer Collection über JSON und zum Exportieren von Collections mit einer Schaltfläche mit der Bezeichnung „Export to JSON“ (Nach JSON exportieren). Es zeigt auch eine Zusammenfassung von „Radix Scales“ (Radix-Skalen) mit 696 Variablen im hellen und dunklen Modus. In der Mitte symbolisiert ein sechseckiges Logo mit gelben und blauen Pfeilen den Datenaustausch. Auf der rechten Seite sind in einer Tabelle Farbvariablen mit Spalten für „Name“ und die Modi „Light“ (Hell) und „Dark“ (Dunkel), aufgelistet und es werden Farben wie „Tomato“ und „Crimson“ mit den jeweiligen Hex-Codes angezeigt.

Verwende Export Import Variables (Variablen exportieren/importieren), um die Lücke zwischen Figma und der Entwicklung für Design-Token zu schließen.

Apropos Exportieren: Wenn dein Entwicklerteam speziell mit CSS arbeitet und du eine schnelle Möglichkeit suchst, die Token-Werte als Variablen zu kopieren und einzufügen, sieh dir Handoff von Convertiv an. Dieses Plugin erhält einen Bonuspunkt für sein wirklich übersichtliches Design – es schafft es, so viele Informationen unterzubringen und dennoch benutzerfreundlich zu bleiben.

Ein Werbegrafik für „Handoff“, ein Tool zum Exportieren von Stilen und Komponenten als Token. Auf der linken Seite befinden sich das Logo und der Slogan „Work together, better.“ (Besser zusammenarbeiten). Unten steht der Text „Export your styles and components as tokens in minutes“ (Exportiere deine Stile und Komponenten in wenigen Minuten als Token), wobei „Tokens“ (Token) blau hervorgehoben ist. In der Abbildung sind die Exportoptionen aufgelistet: „Figma → CSS“, „Figma → SASS“ und „Figma → JSON“. Auf der rechten Seite zeigt ein UI-Panel von „Handoff for Figma“ (Handoff für Figma) eine Liste mit Komponentenkategorien wie „Alerts“ (Warnungen), „Badges“ (Abzeichen) und „Buttons“ (Schaltflächen) mit Optionen zum Definieren und Anpassen von Stilen an.Ein Werbegrafik für „Handoff“, ein Tool zum Exportieren von Stilen und Komponenten als Token. Auf der linken Seite befinden sich das Logo und der Slogan „Work together, better.“ (Besser zusammenarbeiten). Unten steht der Text „Export your styles and components as tokens in minutes“ (Exportiere deine Stile und Komponenten in wenigen Minuten als Token), wobei „Tokens“ (Token) blau hervorgehoben ist. In der Abbildung sind die Exportoptionen aufgelistet: „Figma → CSS“, „Figma → SASS“ und „Figma → JSON“. Auf der rechten Seite zeigt ein UI-Panel von „Handoff for Figma“ (Handoff für Figma) eine Liste mit Komponentenkategorien wie „Alerts“ (Warnungen), „Badges“ (Abzeichen) und „Buttons“ (Schaltflächen) mit Optionen zum Definieren und Anpassen von Stilen an.

Verwende Handoff, um eine lebendige Vorschau deines Design-Systems zu erstellen, damit Entwickler*innen genau sehen können, wie Komponenten aussehen und sich verhalten sollen.

Weitere Insights von Laurent zu effektiven Engineering-Praktiken und Führungsqualitäten findest du in seinem Beitrag „10 Lessons from an Engineering Manager“ (10 Lektionen eines Engineering Managers).

Für schnelle Code-Exporte verwandelt Variables Converter von Laurent Thiebault deine Figma-Variablen in mehrere Formate: CSS, JavaScript, Compose und SwiftUI. Wähle deine Collection und den Modus aus, und es wird sauberer, gebrauchsfertiger Code generiert. Dieser Prozess wird durch unsere verbesserte Variablenorganisation noch nahtloser.

Eine dunkle Werbegrafik für „Variables Converter“, ein Tool, das Figma-Variablen in verschiedene Formate umwandelt. Auf der linken Seite befindet sich ein sechseckiges Zahnrad-Icon und der Text „Variables Converter“ in fett formatierten weißen Buchstaben. Unten befindet sich eine Liste unterstützter Formate wie „CSS variables“ (CSS-Variablen), „JavaScript variables“ (JavaScript-Variablen), „Compose variables“ (Compose-Variablen) und „SwiftUI variables“ (SwiftUI-Variablen), die jeweils durch ein Icon dargestellt werden. Auf der rechten Seite zeigt ein UI-Panel eine Tabelle mit Variablennamen und -werten, die in Code-Schnipsel für verschiedene Formate umgewandelt werden.Eine dunkle Werbegrafik für „Variables Converter“, ein Tool, das Figma-Variablen in verschiedene Formate umwandelt. Auf der linken Seite befindet sich ein sechseckiges Zahnrad-Icon und der Text „Variables Converter“ in fett formatierten weißen Buchstaben. Unten befindet sich eine Liste unterstützter Formate wie „CSS variables“ (CSS-Variablen), „JavaScript variables“ (JavaScript-Variablen), „Compose variables“ (Compose-Variablen) und „SwiftUI variables“ (SwiftUI-Variablen), die jeweils durch ein Icon dargestellt werden. Auf der rechten Seite zeigt ein UI-Panel eine Tabelle mit Variablennamen und -werten, die in Code-Schnipsel für verschiedene Formate umgewandelt werden.

Verwende Variables Converter, um Figma-Variablen in verschiedene Code-Dialekte zu übersetzen – von CSS bis SwiftUI.

Wenn du außerhalb von Figma ein Datenblatt oder einen vollständigen CSS-Variablen-Code-Schnipsel erstellen und gleichzeitig eine Vorschau auf eine Reihe gängiger Elemente sehen möchtest, sieh dir Shaper an. Dieses Webtool ist ein umfassender Customizer, mit dem du deine Schriftfamilie, die Werte des Innenabstands, die Abstandsskala und die Primärfarbe in einem Vorschaufenster festlegen und dann das CSS übernehmen kannst, wenn du fertig bist – es bietet sogar Werte für den Dunkelmodus.

Verwende Shaper, um Benutzeroberflächenstile in Echtzeit zu optimieren und sauberen CSS-Code zu generieren, der sowohl im hellen als auch im dunklen Modus funktioniert.

Was befindet sich in deinem Toolkit?

Zusammenfassend lässt sich sagen, dass ich an ein neues Designsystemprojekt mit diesen Tools und Funktionen wie folgt herangehe:

  1. Grundlagen schaffen mit CSS color-mix() und Peppercorn
  2. Alles organisieren mit den neuen Neuanordnungsfunktionen von Figma
  3. Gründlich dokumentieren mit Auto Documentation und Specs
  4. Auf Konsistenz prüfen mit Style Finder
  5. An die Entwicklung übergeben mit Export Import Variables

Ich weiß nicht, wie es dir geht, aber ich fühle mich effizient. Mit diesen Designsystem-Updates, Plugins und Widgets sparen wir garantiert mehrere Stunden bei der Arbeit an Designsystemen ein. Das bedeutet, dass du mehr Zeit damit verbringen kannst, die handgefertigten Kaffeebohnen zu mahlen, die du letztes Wochenende auf dem Bauernmarkt gekauft hast. (Einen Flat White mit Hafermilch bitte, danke!)

Auf welche Plugins verlässt du dich bei deiner Arbeit mit Designsystemen? Melde dich bei X, um das Gespräch fortzusetzen. Und vergiss nicht, dir unsere neuesten Funktionen anzusehen – dein Designsystem wird es dir danken.

Verwandte Artikel

Mit Figma kreativ sein und zusammenarbeiten

Kostenlos loslegen