Video-Tutorial: Eigenes HTML, CSS und JavaScript zu Banner-Exporten aus Figma hinzufügen

Dieses Video zeigt, wie du mit dem Plugin Bannerify eigenes HTML, CSS und JavaScript zu Banner-Exporten aus Figma hinzufügst.

Wenn du eigenes HTML, CSS oder JavaScript in alle deine HTML-Banner-Exporte einfügen musst, aktiviere in den Exporteinstellungen den Schalter Inject Custom Code. Damit kannst du eigenes HTML vor dem schließenden </body>-Tag (für Inhalte) oder </head>-Tag (für Meta-Tags oder Links zu Assets) einfügen, eigenes CSS in einem neuen style-Tag hinzufügen oder eigenen JavaScript-Code in einem neuen <script></script>-Tag ergänzen.

Beispiel für ein umschaltbares Hinweis-Overlay. Als einfaches Beispiel für einen häufigen Anwendungsfall dieser Funktion kannst du dieses HTML/CSS/JS-Codebeispiel auf CodePen nutzen. Es fügt über deinen Bannern ein ein- und ausblendbares Popup mit einem Hinweistext ein. Du kannst Stile und Inhalte nach Bedarf kopieren und anpassen.

Gespeicherte Presets für eigenen Code (optional)

Mit der Funktion Saved Custom Code Presets kannst du verschiedene Konfigurationen aus eigenem HTML-, CSS- und JavaScript-Code speichern und beim Export von Bannern wiederverwenden. Fülle dazu die vier verfügbaren Bereiche (Head HTML, Body HTML, CSS und JavaScript) mit deinem Code, gib einen aussagekräftigen Namen ein und klick auf Save as New Preset, um diese Konfiguration für später zu speichern.

Danach kannst du jedes Preset schnell über das Dropdown-Menü Load Saved Preset (Optional) laden, um alle Bereiche für eigenen Code sofort mit der gespeicherten Konfiguration zu füllen. So musst du Code-Snippets nicht jedes Mal von Hand kopieren und einfügen, wenn du Banner mit unterschiedlichen Anforderungen exportierst. Du kannst Presets verwalten, indem du nicht mehr benötigte löschst oder bestehende aktualisierst: Lade sie, ändere sie und speichere sie unter demselben Namen. Alle Presets werden lokal in deiner aktuellen Figma-App gespeichert (über die clientStorage-API von Figma) und bleiben erhalten, wenn du das Code-Panel von Bannerify in anderen Figma-Dateien wieder öffnest. So hältst du deinen Code über mehrere Exportsitzungen hinweg einheitlich.

Eigene Schriften zu bearbeitbarem HTML-Text hinzufügen

Nutze für jeden Schriftschnitt und Stil deines bearbeitbaren Texts eine eigene Webfont-Datei. Eine in Figma installierte Schrift wird nicht in einen HTML-Export gepackt.

1. Besorg dir die freigegebenen .woff2- oder .woff-Dateien der Marke für die Nutzung im Web.
2. Aktiviere den Export von Text als Absatz. Lass bearbeitbaren Text in Figma entsperrt.
3. Aktiviere im HTML-Exportpanel Inject Custom Code und wähle dann Add custom CSS styles.
4. Füg eine @font-face-Regel ohne umschließendes <style>-Tag in das CSS-Feld ein. Ersetze die Beispielfamilie durch den exakten Familiennamen aus Figma und aus der font-family-Deklaration des exportierten Texts und gib die tatsächliche Schriftstärke und den Stil an.

@font-face {
  font-family: "Your Brand Font";
  src: url("fonts/brand-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

5. Füg für jede weitere Stärke bzw. jeden weiteren Stil eine eigene Regel hinzu (zum Beispiel 700 für Fett oder italic für eine Kursiv-Datei).
6. Exportiere und entpacke das Banner. Leg die Schriftdateien in einen Ordner fonts neben der HTML-Datei jedes Banners und zippe dann den kompletten Inhalt dieses Banners erneut. Bannerify fügt das CSS ein, kopiert diese lokalen Schriftdateien aber nicht in die ZIP-Datei. Relative Schrift-URLs werden vom Speicherort des Stylesheets aus aufgelöst; passe den Pfad an, wenn das CSS in einem anderen Ordner liegt.
7. Teste das Paket über einen lokalen Webserver oder die Vorschau der Zielplattform, auch auf einem Gerät, auf dem die Schrift nicht installiert ist. Prüfe das Laden der Schrift, die Zeilenumbrüche und längere Ersatztexte. Schriftdateien zählen zur Paketgröße, und das Ziel muss diese Dateien zulassen.

Alternativ kannst du eine direkte, gehostete HTTPS-URL zur Schriftdatei verwenden, wenn deine Werbeplattform externe Schriftanfragen erlaubt. Der Schriftserver muss das Laden von Schriften über verschiedene Ursprünge (CORS) erlauben. Siehe die MDN-Referenz zu font-face.