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 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: 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: 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, 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 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 oder DoubleClick 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 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“ in TinyImage 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, 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 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.