Figma Dev Mode: Grafiken und SVGs exportieren
Von: Jonas Figma bietet im Dev Mode verschiedene Export-Optionen, die je nach Anwendungsfall unterschiedlich effizient sind. Wir zeigen die unterschiedlichen Möglichkeiten vom Export von Pixelgrafiken bis zum gezielten SVG-Export.
Video
Pixelgrafiken (PNG, JPG) aus Figma exportieren
Beim Umsetzen von Designs müssen regelmäßig Grafiken exportiert werden – von Hintergrundbildern über Logos bis hin zu Icons. Figma bietet dafür im Dev Mode mehrere Wege an, die je nach Anwendungsfall unterschiedlich effizient sind.
Für den Export als Pixelgrafik (PNG, JPG) muss das zu exportierende Element in einem Frame liegen. Frames sind in der Ebenenpalette am Rauten-Symbol erkennbar. Nach Auswahl des Frames erscheint rechts unten die Export-Funktion mit Einstellungen für Format, Auflösung (1x, 2x, 3x) und Farbprofil (sRGB, Display P3). Eine Vorschau zeigt das Ergebnis vor dem Download. Moderne Bildformate wie WebP oder AVIF werden aktuell noch nicht nativ unterstützt, können aber über Plugins ergänzt werden.
SVG exportieren
In der Praxis dominiert der SVG-Export, insbesondere für Icons, Logos und grafische Formen. Figma erkennt innerhalb einer Auswahl automatisch enthaltene Assets – ein Icon innerhalb eines Buttons wird als eigenständiges Element identifiziert und kann separat heruntergeladen werden. Bei Vektorformen zeigt die rechte Seitenleiste einen SVG-Abschnitt mit dem vollständigen Quellcode.
Der effizienteste Workflow für SVGs die im Code eingefügt werden sollen: Per Rechtsklick auf das Element und »Copy as SVG« den Code direkt in die Zwischenablage kopieren. Anschließend lässt sich der Code in einem Optimierungstool wie SVG Viewer einfügen, dort auf Korrektheit prüfen und in der Dateigröße reduzieren. Das optimierte SVG wird dann direkt in die Codebasis übernommen – ohne den Umweg über eine gespeicherte Datei. Alternativ steht der SVG-Code auch in der rechten Seitenleiste zum Kopieren bereit. Verschachtelte Komponenten – etwa ein Button, der ein Icon als eigene Instanz enthält – lassen sich durch Klicken auf die tiefere Ebene einzeln inspizieren. So kann das Icon isoliert exportiert werden.
