SVG-Workflow für Design-Systeme: von Figma bis Produktion

SVG-Workflow für Design-Systeme: von Figma bis Produktion

Design-Systeme stehen und fallen mit Konsistenz. Ein einziges falsch ausgerichtetes Icon oder eine fehlerhafte viewBox kann eine ganze Kette kleiner Bugs im Produkt auslösen. Ein SVG Viewer gibt Teams einen gemeinsamen visuellen Kontrollpunkt, bevor Assets vom Design in den Code übergehen. Hier ist ein einfacher, wiederholbarer Workflow, der sich für Teams mit wachsenden Icon-Bibliotheken bewährt hat.

1) Eingang: die Grundlagen prüfen

Bevor Sie etwas optimieren oder konvertieren, öffnen Sie das Asset in einem SVG Viewer und prüfen Sie diese Grundlagen:

• viewBox und Abmessungen: Stellen Sie sicher, dass die viewBox dem vorgesehenen Artboard entspricht und width/height keine veralteten Werte enthalten.
• Padding und Ausrichtung: Icons sollten auf einem konsistenten Raster sitzen. Achten Sie auf Formen, die die Ränder berühren, oder auf zu viel Leerraum.
• Linienstärke: Prüfen Sie besonders bei Outline-Icons konsistente Strichstärken im gesamten Set.

Diese Prüfungen gehen schnell, sind visuell klar und in einem Viewer oft leichter zu erkennen als direkt im Markup.

2) Das Artboard normalisieren

Wenn sich das Asset nicht richtig anfühlt, normalisieren Sie das Artboard, bevor Sie irgendetwas anderes tun. Ein konsistentes Artboard macht Batch-Exporte und die Größenanpassung von Komponenten deutlich einfacher.

Praktische Schritte:

• Richten Sie das Design am Raster Ihres Systems aus (zum Beispiel 24x24 oder 20x20).
• Exportieren Sie erneut mit der korrekten viewBox-Größe.
• Öffnen Sie die Datei erneut im SVG Viewer, um zu bestätigen, dass sie mit Ihren Basis-Assets ausgerichtet ist.

3) Mit Absicht bereinigen und optimieren

Optimierung dient nicht nur der Dateigröße, sondern auch einer vorhersehbaren Ausgabe. Eine gute Regel lautet: Entfernen Sie alles, was Sie später nie brauchen werden:

• Metadaten und editor-spezifische Attribute
• Ungenutzte Gruppen oder leere Knoten
• Doppelte IDs, die CSS-Konflikte verursachen können

Führen Sie zuerst die Bereinigung aus, optimieren Sie dann mit SVG Optimizer und öffnen Sie das Ergebnis anschließend erneut im SVG Viewer, um zu prüfen, dass sich nichts verschoben hat.

4) Eine Benennungskonvention festlegen

Konsistente Namen verbessern die Developer Experience. Wählen Sie einmal ein System und bleiben Sie dabei. Zum Beispiel:

• icon-alert-filled.svg
• icon-alert-outline.svg
• logo-acme-primary.svg

Wenn Entwickler SVG-Dateinamen auf Komponentennamen abbilden, reduzieren konsistente Muster das Rätselraten.

5) Für die Bibliothek exportieren

Sobald das SVG die visuellen Prüfungen besteht, exportieren Sie es in dem Format, das Ihr System benötigt:

• Rohes SVG für die Inline-Verwendung
• PNG für Doku oder Figma-zu-Dev-Referenzen
• React-Komponenten für UI-Bibliotheken über SVG to React

Dokumentieren Sie die Export-Einstellungen, damit jedes Teammitglied dieselbe Ausgabe erhält.

6) Kurzer Review vor dem Merge

Ein schneller Review-Schritt spart später Zeit. Öffnen Sie im SVG Viewer das aktualisierte Asset neben einem bestehenden und vergleichen Sie:

• Visuelle Größe
• Ausrichtung
• Wahrgenommenes Gewicht

Wenn etwas nicht stimmt, beheben Sie es, bevor es im Repository landet.

Abschließendes Fazit

Das Ziel eines SVG-Viewer-Workflows ist nicht, zusätzliche Bürokratie einzuführen. Es geht darum, Überraschungen zu vermeiden. Ein kurzer visueller Check, ein konsistentes Artboard und vorhersehbare Exporte halten ein Design-System stabil, während es wächst. Wenn Ihr Team schon einmal ein Icon ausgeliefert hat, das in Figma richtig, in der Produktion aber falsch aussah, hilft dieser Workflow dabei, genau das künftig zu vermeiden.

Nächste Schritte

• Eingehende Assets im SVG Viewer prüfen.
• Die Bereinigung vor dem Export mit SVG Optimizer standardisieren.
• Komponentenfertige Ausgaben mit SVG to React erzeugen.