Bildexporte aus Figma komprimieren

So wählst du Exporteinstellungen aus und komprimierst deine Bildexporte aus Figma mit TinyImage.

TinyImage erkennt die Exporteinstellungen und -formate, die du für Ebenen auf deiner Figma-Seite festgelegt hast, und exportiert diese Ebenen mit dem TinyImage-Plugin als komprimierte Bilder.

Automatische Scans der Seite überspringen Ebenen in ausgeblendeten Containern. In Figma ausdrücklich ausgewählte Ebenen werden weiterhin anhand ihrer eigenen Sichtbarkeit und Exporteinstellungen geprüft. Deine gespeicherten Exporteinstellungen musst du nicht ändern.

Eine ausführliche Anleitung zu den Exporteinstellungen in Figma und ihrer Funktionsweise findest du in der offiziellen Figma-Hilfe im Guide to exports in Figma.

Jede Ebene, die du komprimieren möchtest, braucht mindestens eine Exporteinstellung. Hat eine Ebene keine Exporteinstellungen, weiß TinyImage nicht, dass du sie komprimieren und exportieren möchtest, und sie erscheint nicht in der Liste der exportierbaren Bilder im Plugin.

Exporteinstellungen hinzufügen und aktualisieren ​

Bevor du komprimierte Bilder aus Figma exportierst, musst du zuerst für alle Ebenen, die du komprimieren möchtest, Exporteinstellungen für Bilder festlegen.

Exporteinstellungen zu Figma-Ebenen hinzufügen ​

Um einer Ebene (oder mehreren Ebenen) Exporteinstellungen hinzuzufügen, wähle die Ebene(n) in Figma aus und klick dann im Eigenschaften-Panel von Figma auf das Symbol + neben Export. Mit jedem weiteren Klick auf + fügst du der Ebene eine weitere Exporteinstellung hinzu, so viele du möchtest. So kannst du eine einzelne Ebene gleichzeitig in mehrere Formate und Größen exportieren (zum Beispiel SVG, JPG @1x, JPG @2x, PDF usw.).

Figma-Ebenen nach dem Ändern der Exporteinstellungen aktualisieren ​

Wenn du einer Ebene bereits Exporteinstellungen hinzugefügt hast und bei laufendem TinyImage-Plugin welche hinzufügen oder entfernen möchtest, geh wie im vorherigen Schritt vor. Wenn die neuen Exporteinstellungen deiner Ebene passen, klick in der TinyImage-Symbolleiste auf das Symbol Refresh. Damit werden deine Figma-Ebenen aktualisiert, und die geänderten Exportoptionen erscheinen in der Liste der exportierbaren Bilder in TinyImage.

Komprimierungsqualität in Prozent oder Zielgröße festlegen ​

In TinyImage legst du für deine Bildexporte entweder die Qualität der Komprimierung in Prozent von 1 %–100 % fest oder eine maximale Zielgröße (in Kilobyte). Ein niedrigerer Wert führt zu kleineren Dateien, aber auch zu geringerer Bildqualität. Ein höherer Wert führt zu größeren Dateien, aber auch zu höherer Bildqualität.

  • 0 %–50 % niedrige Qualität (72 dpi bei PDFs)
  • 50 %–75 % gute Qualität (150 dpi bei PDFs)
  • 75 %–100 % beste Qualität (300 dpi bei PDFs)

Qualitätsstufe der Komprimierung in Prozent anpassen ​

Mit dem Komprimierungsregler in der TinyImage-Symbolleiste legst du die Qualitätsstufe für alle deine Bildexporte von 1 %–100 % fest. Klick auf den Regler, halte ihn gedrückt und zieh ihn, um die gewünschte Qualitätsstufe einzustellen. Diese Einstellung gilt für alle deine Exporte mit TinyImage.

Maximale Dateigröße (KB) als Komprimierungsziel festlegen ​

Du kannst auch eine maximale Zielgröße für Dateien (in Kilobyte) festlegen. Aktiviere dazu den Schalter Size Target und gib im Eingabefeld für die Größe einen Wert in Kilobyte ein. TinyImage versucht dann, jedes deiner Bilder unter diese maximale Dateigröße zu bringen.

Das ist oft langsamer als der Qualitätsregler, weil jedes Bild schrittweise komprimiert werden muss, bis das gewünschte Limit erreicht ist.

Du legst die maximale Dateigröße für TinyImage lieber in Figma statt in der Plugin-Oberfläche fest? Dann nutze das Suffix in den Exporteinstellungen von Figma bei jeder exportierbaren Ebene. Füge einen Unterstrich und eine Zahl mit der Endung kb hinzu (zum Beispiel _250kb), und TinyImage verwendet diesen Wert als maximale Größe für diese Ebene. Gültige Suffixe sind zum Beispiel: _250kb, @2x_500kb, @1x_300kb

Zielgrößen gelten nicht für PDF- oder GIF-Exporte. Die Komprimierung auf eine Zielgröße wirkt sich nicht auf PDF- oder GIF-Exporte aus TinyImage aus; sie gilt nur für JPG-, PNG-, SVG-, AVIF- und WebP-Bilder.

Qualität bzw. Zielgröße pro Export überschreiben ​

Neben der Qualitätsstufe über den Regler kannst du in TinyImage für jedes Bildformat eine eigene Qualität bzw. Zielgröße festlegen. Sie überschreibt den globalen Wert, der über den Qualitätsregler oder das Eingabefeld für die Zielgröße im Kopfbereich des Plugins festgelegt ist.

Um die Qualität für ein bestimmtes Bildformat festzulegen, klick auf das Zahlenfeld für die Qualität neben dem Bild, dessen Qualität du ändern möchtest. Du kannst jede Zahl zwischen 1 %–100 % eingeben; mit dieser Qualität wird dein Bild dann exportiert.

Wenn du eine maximale Dateigröße ansteuerst, kannst du sie überschreiben, indem du auf das KB-Zahlenfeld neben dem Bild klickst, dessen Zielgröße du ändern möchtest. Du kannst jede Zahl zwischen 1–9999 (KB) eingeben; diese Zahl wird dann zur Zielgröße, mit der dein Bild exportiert wird.

Bilder zum Komprimieren auswählen ​

Sobald du den Ebenen, die du komprimieren möchtest, Exporteinstellungen hinzugefügt hast, erscheinen sie in der Liste der exportierbaren Bilder in TinyImage. Du musst aber nicht jedes einzelne Bild auf deiner Figma-Seite gleichzeitig exportieren, wenn du das nicht möchtest. Mit Kontrollkästchen wählst du in TinyImage die exportierbaren Bilder aus (oder ab), die du komprimieren möchtest.

Exportierbare Bilder an- und abhaken ​

Um ein Bild für den Export auszuwählen (oder abzuwählen), klick in der Liste der exportierbaren Bilder in TinyImage auf das Kontrollkästchen neben dem Vorschaubild. Ein abgehaktes Bild wird nicht komprimiert und exportiert; ein angehaktes Bild wird in den Export aufgenommen.

Alle Ebenen schnell aus- oder abwählen. Um alle Bilder in der Liste auf einmal aus- oder abzuwählen, klick in der TinyImage-Symbolleiste über der Liste der exportierbaren Bilder auf das Kontrollkästchen.

Beim Öffnen von TinyImage nur ausgewählte Ebenen laden ​

Damit TinyImage beim Start keine große Seite durchsuchen muss, markiere die benötigten exportierbaren Ebenen in Figma, bevor du das Plugin öffnest. TinyImage lädt dann zunächst nur die ausgewählten Ebenen, die bereits Exporteinstellungen haben.

Wenn du die Auswahl in Figma bei geöffnetem TinyImage änderst, kann das die bereits geladenen Ebenen filtern; es löst aber keinen neuen Scan aus und lädt keine neuen Ebenen im Hintergrund. Enthält die neue Auswahl Ebenen außerhalb der ursprünglich geladenen Menge, fordert TinyImage dich auf, auf Refresh All Exportable Layers zu klicken. Damit wird die aktuelle Seite nach exportierbaren Ebenen durchsucht, einschließlich neu hinzugefügter Ebenen und Exporteinstellungen; Ebenen in ausgeblendeten Containern werden dabei übersprungen.

Findet TinyImage auch nach dieser Aktualisierung keine exportierbare Ebene in der aktuellen Auswahl, bleibt die vollständige Liste der Seite sichtbar, damit du weiterarbeiten kannst. Wenn du die Auswahl änderst oder die Seite wechselst, filtert TinyImage wieder wie gewohnt nach der Auswahl.

Exporteinstellungen für die Bildauswahl aktualisieren ​

Wenn eine oder mehrere ausgewählte Ebenen noch keine Exporteinstellungen haben, klick im Eigenschaften-Panel von Figma auf das Symbol + neben Export und füge die benötigten Einstellungen hinzu.

Wenn die neuen Exporteinstellungen passen, klick in der TinyImage-Symbolleiste auf das Symbol Refresh. TinyImage durchsucht die aktuelle Seite erneut und zeigt die geänderten Exportoptionen in der Liste der exportierbaren Bilder an.

Komprimierte Bilder exportieren ​

Sobald du die exportierbaren Bilder ausgewählt hast, die du komprimieren möchtest, klick in der TinyImage-Symbolleiste auf Export. Damit beginnt die Komprimierung deiner ausgewählten Bilder, eines nach dem anderen. Eine Fortschrittsanzeige zeigt, welches Bild gerade komprimiert wird, und nach jeder abgeschlossenen Komprimierung die eingesparte Dateigröße. Warte bitte, bis alle Bilder komprimiert sind: Je mehr Bilder du hast und je größer sie sind, desto länger dauert es.

Geschwindigkeit der PNG- und PDF-Komprimierung. Das Komprimieren von PNG- und PDF-Exporten kann länger dauern als bei JPG- und SVG-Exporten, besonders wenn sie sehr detailreich sind oder große Abmessungen haben. TinyImage warnt dich, wenn ein Bild zu groß zum Komprimieren ist.

Die exportierte ZIP-Datei speichern ​

Sobald alle Bilder verarbeitet sind, siehst du eine Bestätigung, dass deine Bilder komprimiert wurden, und der Download deiner .zip-Datei startet automatisch.

Export eines einzelnen Bilds Wenn du nur ein einzelnes komprimiertes Bild exportierst, packt TinyImage es nicht in eine .zip-Datei; du kannst die einzelne Bilddatei direkt auf deinem Computer speichern.

Downloads aus Figma speichern Wenn du die Desktop-App von Figma nutzt, erscheint eine Aufforderung zum Herunterladen deiner Datei. Wenn du Figma dagegen im Webbrowser nutzt, wird deine Datei standardmäßig automatisch auf deinen Computer heruntergeladen (meist in den Ordner Downloads).

Die exportierte ZIP-Datei öffnen ​

Sobald die .zip-Datei aus Figma auf deinem Computer gespeichert ist, öffne im Dateimanager den Ordner, in dem sie gespeichert wurde. Mit einem Doppelklick auf die exportierte .zip-Datei entpackst du den Inhalt und kannst alle deine komprimierten Bilder verwenden.