Bilder im Stapel in mehrere Größen zuschneiden und skalieren

Schneide Bilder im Stapel zu und skaliere sie – mit Presets, eigenen Größen, smarten Fokuspunkten und Exportoptionen.

Video-Tutorial: Bilder zuschneiden und skalieren

Dieses Video zeigt, wie du Bilder mit dem Plugin HyperCrop in Figma im Stapel zuschneidest und skalierst.

Wenn du die Figma-Seite wechselst, werden die für diese Seite gespeicherten Zuschnittgrößen und Exporteinstellungen geladen. Eine Seite ohne gespeicherte Zuschnittgrößen startet mit den Standard-Presets.

HyperCrop bringt Dutzende Größen-Presets mit. So kannst du deine Bilder ganz einfach für beliebte Plattformen und Geräte im Stapel zuschneiden und exportieren, ohne die Maße für jede Größe selbst recherchieren und eingeben zu müssen.

Du kannst jede dieser Größen hinzufügen (und wieder entfernen), indem du durch die Liste scrollst und auf die Checkbox neben dem jeweiligen Eintrag klickst. Wenn du eine Größe anhakst, wird sie zu deiner Liste selected sizes hinzugefügt; entfernst du den Haken, wird sie wieder entfernt.

Du kannst aus Dutzenden Presets in diesen Kategorien wählen:

  • Facebook
  • Google Ads
  • Instagram
  • LinkedIn
  • Papier
  • Smartphones
  • Pinterest
  • Bildschirme
  • Snapchat
  • Tablets
  • Twitch
  • Twitter (X)
  • YouTube.

Eigene Presets für Zuschnittgrößen hinzufügen ​

Du kannst jede dieser Größen hinzufügen (und wieder entfernen), indem du durch die Liste scrollst und auf die Checkbox neben dem jeweiligen Eintrag klickst. Wenn du eine Größe anhakst, wird sie zu deiner Liste sizes hinzugefügt; entfernst du den Haken, wird sie wieder entfernt.

„Auto“ für Breite oder Höhe verwenden ​

Wenn du entweder eine Breite oder eine Höhe festlegen und HyperCrop den anderen Wert automatisch bestimmen lassen möchtest, füllst du das Feld Crop Width oder Crop Height aus und lässt das andere leer. Der Platzhalter des leeren Felds zeigt dann Auto an. Wenn die feste Breite oder Höhe passt, klick auf Add Custom Crop Size +, um sie zu deinen verfügbaren eigenen Zuschnittgrößen hinzuzufügen.

Ein eigenes Zuschnitt-Preset löschen ​

Um ein eigenes Preset aus der Liste der verfügbaren Zuschnitte zu entfernen, klick neben der eigenen Zuschnittgröße auf das Symbol Trash und bestätige dann mit Delete. Dadurch wird es aus deiner Liste selected sizes entfernt und vollständig aus der Liste der verfügbaren Zuschnitte gelöscht.

Bilder für den Stapelzuschnitt auswählen ​

Alle Bilder, die du im Stapel zuschneiden kannst, erscheinen auf der rechten Seite des Plugins HyperCrop. Mit der Checkbox neben einem Bild in der Liste legst du fest, ob HyperCrop das Bild beim Stapelzuschnitt einbezieht oder auslässt.

Die Anzahl der ausgewählten Bilder wird mit der Anzahl der ausgewählten Bildgrößen multipliziert. Das ergibt die Gesamtzahl der Bilder, die HyperCrop exportiert.

Bilder brauchen Exporteinstellungen, damit sie in HyperCrop erscheinen. Damit deine Bilder bzw. Ebenen aus Figma im Plugin HyperCrop angezeigt werden, füge der Ebene, die du zuschneiden möchtest, mindestens eine Exporteinstellung hinzu. Klick dazu in der rechten Spalte von Figma unter der Überschrift Export auf das Symbol +.

Schnell auswählen und abwählen. Um alle Bilder auf einmal ab- (oder wieder an-)zuwählen, klick ganz oben in der Liste auf die Checkbox neben der Beschriftung X of XX Images Selected.

Fokuspunkte für den Zuschnitt festlegen ​

Standardmäßig schneidet und skaliert HyperCrop Stapelbilder mit der Bildverankerung Center/Center. Der Fokuspunkt liegt dann immer genau in der Mitte des Bildes.

Manchmal soll der Fokuspunkt aber an einer anderen Stelle im Bild liegen, zum Beispiel Top/Left oder Center/Right.

Bewege dazu die Maus über das Bild, dessen Fokuspunkt du ändern möchtest, klick auf die Auswahlfelder für vertikal (↕) und horizontal (↔) und wähle jeweils die gewünschte Option.

Smart-Cropping-Funktionen aktivieren ​

Wenn du den Fokuspunkt nicht manuell über die Auswahlfelder für vertikal (↕) und horizontal (↔) festlegen möchtest, kannst du die Schalter Content Aware und Detect Faces verwenden.

Du kannst eine (oder beide) dieser Funktionen aktivieren, indem du die Maus über das Bild bewegst, für das du sie aktivieren (oder deaktivieren) möchtest, und auf den jeweiligen Schalter klickst.

Content Aware ​

Mit der Option Content Aware nutzt HyperCrop Smart-Cropping-Modelle, um die wichtigen bzw. interessanten Bereiche deines Bildes zu erkennen. Wenn dein Bild keinen schwierigen Satz an Größen hat, für den Gesichter zugeschnitten werden müssen, brauchst du diese Einstellung nicht zu aktivieren, denn mit ihr dauert das Zuschneiden länger.

Detect Faces ​

Mit der Option Detect Faces nutzt HyperCrop Gesichtserkennungsmodelle, um zu ermitteln, wo sich Gesichter in deinem Bild befinden. Wenn dein Bild keine Gesichter enthält oder keinen schwierigen Satz an Größen hat, für den Gesichter zugeschnitten werden müssen, brauchst du diese Einstellung nicht zu aktivieren, denn mit ihr dauert das Zuschneiden länger.

Browser-Unterstützung. Wegen Kompatibilitätsproblemen der Browser wird die Funktion Detect Faces von HyperCrop in Safari nicht unterstützt. Führe das Plugin stattdessen in einem anderen Browser (zum Beispiel Chrome) oder in der Figma-Desktop-App aus.

Exporteinstellungen für den Stapelzuschnitt festlegen ​

Wenn du deine Zuschnittgrößen und Bilder ausgewählt hast und mit den Zuschnitteinstellungen der einzelnen Bilder zufrieden bist, kannst du den Stapelzuschnitt und Export vorbereiten.

Klick in der Kopfzeile von HyperCrop auf Batch Crop, um die Einstellungen zu öffnen.

In den Einstellungen für den Stapelzuschnitt wählst du unter anderem Image Format (JPG oder PNG), Image Compression (für Bildqualität bzw. Dateigröße) und Image Fill (gilt nur für Zuschnitte ohne Smart Cropping).

Ein eigenes Dateinamenformat hinzufügen ​

Für Stapelzuschnitte kannst du in HyperCrop ein eigenes Dateinamenformat festlegen, das auf alle exportierten Bilder angewendet wird. Damit erhältst du eine einheitliche Namenskonvention oder sortierst deine Bilder in sinnvolle Unterordner.

Dieses Feld ist optional. Wenn du es leer lässt, gilt standardmäßig #{collection}/#{name}_#{width}x#{height}.

Verfügbare Variablen für deine Dateinamen ​

Du kannst alle unten aufgeführten Variablen in deinem eigenen Muster für Unterordner und Dateinamen beliebig kombinieren, auch mit normalem Text und Zeichen (wie Unterstrichen oder Buchstaben und Zahlen).

  • #{name} Der Name der Figma-Ebene (zum Beispiel „My Figma Layer Name“)
  • #{collection} Der Name der Preset-Sammlung (zum Beispiel „facebook“)
  • #{label} Die Bezeichnung der Preset-Sammlung (zum Beispiel „profile“)
  • #{width} Die Breite des skalierten Bildes (zum Beispiel „1024“)
  • #{height} Die Höhe des skalierten Bildes (zum Beispiel „768“)

Unterordner anlegen. Um einen Unterordner anzulegen, füge an beliebiger Stelle in deinem Dateinamenformat ein „/“ ein. Zum Beispiel erzeugt #{collection}-crops/#{width}x#{height}/#{name} eine dynamische Ordnerstruktur wie facebook-crops/1024x768/my_figma_layer_name.jpg (die Variablen werden für jede Sammlung und jede Kombination aus Breite und Höhe ersetzt).

Stapelbilder auf deinen Computer herunterladen ​

Wenn du alle Optionen und dein Dateinamenformat wie gewünscht eingestellt hast, klick auf Crop & Download Images, um den Stapelzuschnitt und die Skalierung mit HyperCrop zu starten.

Dabei werden alle ausgewählten Größen für jedes ausgewählte Bild verarbeitet. Je mehr Bilder und Größen du hast, desto länger dauert es also.

Sobald der Stapelzuschnitt abgeschlossen ist, siehst du eine Bestätigung, dass deine Bilder zum Herunterladen bereit sind. Um die .zip-Datei aus Figma auf deinen Computer herunterzuladen, klick im Plugin HyperCrop auf Download your .zip file.

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 ​

Wenn du die .zip-Datei aus Figma auf deinen Computer heruntergeladen hast, öffne in deinem Dateimanager den Ordner, in dem sie gespeichert wurde. Mit einem Doppelklick auf die exportierte .zip-Datei entpackst du die Bilder in einen Ordner mit allen Bildern und Unterordnern (gemäß dem Muster für Unterordner und Dateinamen aus den Exporteinstellungen von HyperCrop).

Stapelbilder in deine aktuelle Figma-Datei einfügen ​

Alternativ kannst du die zugeschnittenen Bilder, sobald alle Optionen und dein Dateinamenformat wie gewünscht eingestellt sind, direkt in Figma einfügen. Klick dazu auf Crop & Insert to Figma. Dadurch wird in deiner aktuellen Figma-Datei eine neue Seite angelegt, auf der alle zugeschnittenen Bildebenen eingefügt werden.