--- url: "/de/bannerify/faq/troubleshooting.md" description: "Anleitung zur Fehlerbehebung in Bannerify: Exporte, Darstellungsprobleme und Vorgaben der Plattformen." --- # Fehlerbehebung für Bannerify > Anleitung zur Fehlerbehebung in Bannerify: Exporte, Darstellungsprobleme und Vorgaben der Plattformen. ## Gedrehter übergeordneter Frame verschiebt Ebenen Das passiert meist, wenn der **übergeordnete Frame** auf einen anderen Wert als **0 Grad** gedreht wurde (zum Beispiel „-90“ oder „180“), bevor die Inhalte hinzugefügt wurden. Dadurch geraten die Positionen der untergeordneten Ebenen durcheinander. Um das zu beheben, erstellst du einen neuen, **ungedrehten** Frame mit denselben Abmessungen und kopierst oder ziehst die untergeordneten Ebenen aus dem ursprünglichen gedrehten Frame in den neuen Frame ohne Drehung. ## Begrenzungsrahmen von Textebenen (Zuschnitt) Eine weitere mögliche Ursache dafür, dass eine Textebene verschoben oder abgeschnitten wird: Die Größe des Textfelds passt nicht zur Größe des Texts selbst. Wenn der Text zum Beispiel mehrere Zeilen hat, der „Begrenzungsrahmen“ aber nur sehr niedrig ist, wird die Position falsch versetzt. Um das zu beheben, passt du die Höhe des Begrenzungsrahmens an die Größe des Textinhalts an. ## Unscharfe SVGs mit Schatten in Safari Es gibt ein [bekanntes Problem](https://forum.figma.com/t/pixelization-of-the-drop-shadow-of-my-svg-on-safari/36410/7) mit SVGs, die Schlagschatten enthalten: Safari rastert den Vektor dann in Pixel, wodurch er weniger scharf aussieht. Ein Vorschlag aus dem Thread oben: Teile den Schatten und den Button bzw. Inhalt auf zwei verschiedene Ebenen auf. Die obere Button-Ebene ohne Schatten wird in Safari dann weiterhin als scharfes SVG dargestellt, und die Ebene darunter sorgt nur für den Schatten dahinter. Alternativ kannst du im Plugin das Bildformat nur für die CTA-Button-Ebene auf „PNG“ überschreiben und zusätzlich die Skalierung dieser Ebene auf @2x Retina setzen. Dann wird der CTA als 2x-PNG-Bild exportiert, bleibt scharf und das Problem mit SVG-Schatten in Safari tritt nicht auf. ## Farben oder Verläufe in GIFs wirken etwas körnig GIFs unterscheiden sich etwas von normalen JPG- oder PNG-Bildern, denn sie können höchstens 256 Farben enthalten. Wenn du sehr detailreiche Bilder oder Verläufe mit vielen Farbabstufungen verwendest, ist zu erwarten, dass das GIF wegen dieser Einschränkung des Formats nicht so scharf und farbgetreu aussieht wie die Ausgangsbilder. ## Transparenz wird in GIFs nicht angezeigt Das GIF-Format unterstützt entweder 0 % oder 100 % Deckkraft, aber nichts dazwischen. Du kannst also ein animiertes GIF mit vollständig transparentem Hintergrund hinter vollständig deckenden, sichtbaren Elementen haben. Ebenen müssen daher entweder ganz transparent sein oder gar nicht: Ebenen mit weniger als 50 % Deckkraft werden transparent, Ebenen mit mehr als 50 % Deckkraft werden deckend. **Transparente GIFs in Figma kennzeichnen**. Standardmäßig enthalten deine GIF-Exporte keine Transparenz. Wenn dein GIF Transparenz braucht, füg das Wort **transparent** an beliebiger Stelle in den Namen deiner Figma-Ebene ein. ## Wo du .mp4-Videodateien hosten kannst Wenn du Videos zu Bannerify hinzufügst, lädt das Plugin jede URL, die direkt auf eine .mp4-Datei verweist. URLs zu Vimeo oder YouTube und andere Links auf webbasierte Player funktionieren hier leider nicht. Eine gute Option zum Hosten von Videos ist [Backblaze B2](https://www.backblaze.com/b2/cloud-storage.html): Mit einem kostenlosen Konto bekommst du 10gb Speicherplatz gratis. Wenn du einen öffentlichen Storage-Bucket anlegst, kannst du die Links zu allen hochgeladenen Videodateien kopieren und den Link zur .mp4-Datei in Bannerify einfügen. Eine weitere beliebte Option zum Hosten von Dateien ist [Dropbox](https://www.dropbox.com/): Dort lädst du deine `.mp4`-Datei hoch und nutzt den Link im Plugin Bannerify. Bannerify ändert `?dl=0` automatisch in `?raw=1`, damit der Link direkt auf die Videodatei zeigt (und nicht auf den Player der Dropbox-Website). ## Dünne weiße Linie um exportierte Bilder Gelegentlich haben Bilder eine schwache, dünne weiße Linie an den Rändern. Figma [macht das](https://twitter.com/Skcrub/status/1255544876701270017), wenn eine Ebene nicht auf einem ganzzahligen Pixelwert liegt (zum Beispiel Y: 156.76 oder X: 56.3); diese Subpixel-Linie landet dann automatisch im Export. Bannerify versucht, diese Werte bei Ebenen, deren Größe sich über die Figma Plugin API ändern lässt, automatisch zu runden. Um das Problem bei Bedarf von Hand zu beheben, achte darauf, dass alle Positionen deiner Ebenen ganzzahlige Pixelwerte sind. ## Hochauflösende Banner lassen sich nicht als MP4 exportieren Wenn du hochauflösende Banner aus dem Plugin als MP4-Video exportierst, stößt Figma manchmal an seine Speichergrenze von 2gb und kann die Videodatei nicht direkt als `.mp4` rendern. Als Workaround exportierst du deine Banner aus Bannerify stattdessen im WebM-Format und konvertierst die exportierten `.webm`-Videodateien außerhalb von Figma mit dem Video-Transcoder [Handbrake](https://handbrake.fr/) in `.mp4`. ## Google Ads validiert die Banner nicht Es gibt ein paar häufige Gründe, warum ein HTML-Banner nicht hochgeladen oder von Google nicht validiert wird. Meist ist die Dateigröße des Banners zu groß oder die Bannerformate entsprechen nicht genau den „Standardgrößen“. Mit diesen Diensten kannst du deine Banner vor dem Upload für [Google Ads](https://h5validator.appspot.com/adwords/asset) oder [DoubleClick](https://h5validator.appspot.com/dcm/) validieren. ## Exportiertes HTML-Banner wird im Browser nicht animiert oder abgespielt Wenn dein exportiertes HTML-Banner eingefroren wirkt, sich nicht bewegt oder zwar in der Vorschau von Bannerify funktioniert, aber nicht, wenn du die exportierte HTML-Datei im Browser öffnest, prüf, ob ein Werbeblocker oder eine Datenschutz-Erweiterung im Browser aktiv ist. Manche Erweiterungen verhindern, dass lokale oder werbebezogene HTML-Dateien richtig laufen. Deaktiviere die Erweiterung vorübergehend für die lokale Vorschaudatei, öffne den Export in einem anderen Browser oder lade das Banner in deine gewohnte Vorschau- oder Staging-Umgebung hoch und teste es dort. ## Leere Dateiendungen in der Figma-Desktop-App unter Windows Es gibt ein bekanntes Problem mit der Figma-Desktop-App (nur unter Windows), das auch bei normalen Dateiexporten aus Figma auftritt. Beim Speichern der Datei siehst du eventuell die Bezeichnung „all files“. Wenn du das ignorierst und auf „Save“ klickst, sollte die Datei trotzdem mit der richtigen Endung gespeichert werden und sich nach dem Download wie erwartet öffnen lassen. Falls die Datei doch ohne Endung gespeichert wird, kannst du sie umbenennen und die richtige Endung von Hand an den Dateinamen anhängen. ## Googles HTML-Validator wandelt SVG-Elemente mit Schlagschatten in PNG um (beim Upload über ein Mobilgerät) Aus irgendeinem Grund wandelt der [DCM Validator](https://h5validator.appspot.com/dcm/asset) beim Upload einer Banner-.zip über den Browser eines Mobilgeräts (zum Beispiel eines iPhones) alle SVG-Elemente mit Schlagschatten automatisch in PNG um. Dadurch wirken sie in der Vorschau pixeliger. ## Verpixelte Bildexporte Wenn du Banner exportierst, während die Bilder in Figma noch schrittweise laden, können sie verpixelt exportiert werden, weil das Bild vor dem Export noch nicht vollständig in der Figma-Datei geladen war. Um das zu beheben, achte darauf, dass alle Bilder zu 100 % geladen sind und in der Figma-Datei scharf aussehen, bevor du deine Banner mit dem Plugin Bannerify exportierst. Zusätzlich kannst du die [Funktion „Downsizer“](/de/tinyimage/downsize) in [TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) nutzen, um deine Bildfüllungen auf die Größe ihrer Ebene zu verkleinern. Das reduziert die Dateigröße und sorgt dafür, dass die Bilder in deiner Figma-Datei viel schneller laden. ## Ebenen das Attribut aria-hidden='true' hinzufügen Wenn du aus Gründen der Barrierefreiheit aria-hidden-Attribute brauchst, kannst du das pro Ebene tun, indem du `aria-hidden` in den Namen deiner Figma-Ebene aufnimmst. Beim HTML-Export der Banner bekommt das entsprechende HTML-Element dann automatisch `aria-hidden="true"`. ## In China ist eventuell ein VPN nötig Hinweis: Wenn du dich in China befindest, wird der Kontoserver _möglicherweise_ von der „Great Firewall“ blockiert. Wenn du trotz eines gültigen Schlüssels einen Aktivierungsfehler siehst, brauchst du wahrscheinlich ein [VPN](https://protonvpn.com/free-vpn/), um das Problem zu lösen. ## 'An error occurred while loading the plugin environment' Das kann in der Figma-Desktop-App passieren, wenn die Debug-Einstellung [Use Developer VM](https://www.figma.com/plugin-docs/debugging/#developer-vm) in Figma versehentlich aktiviert ist. So stellst du sicher, dass sie ausgeschaltet ist: **Rechtsklick** an einer beliebigen Stelle auf deinem Figma-Canvas, mit der Maus auf **Plugins** und dann auf **Development** zeigen und prüfen, dass **Use Developer VM** _nicht_ angehakt ist. Sobald die Option deaktiviert ist (und _kein_ Häkchen daneben steht), sollte das Figma-Plugin beim erneuten Ausführen wie erwartet funktionieren.