Wenn du in Figma bereits einen oder mehrere Banner-Frames gestaltet hast, kann Bannerify daraus ganz neue Banner-Frames in mehreren Größen generieren.
Das ist praktisch, wenn du eine gelungene Mastergröße fertig hast und Bannerify einen ersten Entwurf für weitere Standard-Werbeformate erstellen lassen willst, ohne jedes Layout von Grund auf neu zu bauen.
Was diese Funktion macht
- Dupliziert ausgewählte Figma-Frames oder -Instanzen der obersten Ebene in neue Frames.
- Lässt dich mehrere Standard-Bannergrößen auf einmal auswählen.
- Unterstützt eigene Ausgabegrößen.
- Kann Texte, Logos, CTAs und Grafiken optional für jedes neue Seitenverhältnis neu anordnen.
- Lässt deine ursprünglichen Quell-Frames unverändert.
Nutze die Funktion als Abkürzung in der Produktion, nicht als Ersatz für das kreative Review. Bannerify bringt dich schnell sehr nah ans Ziel, und letzte Designanpassungen nimmst du direkt in Figma vor.
Schritt 1: Den Generate-Tab öffnen
Öffne Bannerify in Figma und wechsle vom normalen Tab Load Banners from Figma Frames zum Tab Generate New Banner Sizes from Figma Frames.
Bannerify durchsucht die aktuelle Seite nach Figma-Frames und -Instanzen der obersten Ebene, die sich als Quellbanner eignen.
Schritt 2: Quell-Frames auswählen
Markiere den oder die Quell-Frames, die du als Ausgangspunkt verwenden willst.
Gut geeignet sind:
- fertige Bannerdesigns
- eine gelungene Mastergröße wie
300x250oder1200x628 - Frames mit sauberer Struktur und klar gruppierten Elementen
Bannerify generiert neue Frames aus den ausgewählten Quellen und überschreibt die Originale nicht.
Schritt 3: Ausgabegrößen wählen
Aktiviere die Bannergrößen, die du generieren willst.
Der Generate-Tab enthält eine Reihe gängiger Werbeformate, zum Beispiel:
- Leaderboard (
728x90) - Medium Rectangle (
300x250) - Large Rectangle (
336x280) - Skyscraper (
120x600) - Wide Skyscraper (
160x600) - Half-Page Skyscraper (
300x600) - Banner (
468x60) - Square (
250x250)
Für eine Größe außerhalb des Standards gibst du eine eigene Breite und Höhe ein und klickst auf Add Custom Size.
Schritt 4: Optional Smart Layout aktivieren
Wenn Bannerify den Inhalt jedes neuen Banners automatisch anpassen soll, aktiviere:
- Auto re-layout new Figma frame content layers (BETA)
Wenn die Option aktiv ist, versucht Bannerify, den Inhalt in jedem neuen Frame so zu skalieren und neu zu positionieren, dass er natürlicher in das Zielseitenverhältnis passt. Außerdem versucht Bannerify, den Inhalt näher an seiner ursprünglichen Ausrichtung im Frame zu halten, sodass Layouts, die oben betont oder am Rand ausgerichtet waren, seltener zur Mitte hin verrutschen.
Wenn die Option deaktiviert ist, erstellt Bannerify zwar trotzdem die neuen Frame-Größen, ändert aber nur die Größe des äußeren Frames und lässt die Anordnung des Inhalts näher am ursprünglichen Quelllayout.
Schritt 5: Auf Generate klicken
Klick auf den Button Generate, um die ausgewählten Größen zu erstellen.
Bannerify legt auf der Seite neue Figma-Frames an und benennt sie nach dem Quell-Frame und der Ausgabegröße, zum Beispiel:
Homepage Promo / Leaderboard (728x90)Homepage Promo / Medium Rectangle (300x250)Homepage Promo / Half-Page Skyscraper (300x600)
Was Smart Layout anzupassen versucht
Wenn der Schalter für die Neuanordnung aktiv ist, versucht Bannerify:
- Textblöcke zu skalieren und neu zu positionieren
- Überschriften in schmalen, hohen oder sehr flachen breiten Formaten besser lesbar zu halten
- oben, mittig oder unten ausgerichteten Inhalt näher an seiner ursprünglichen Position zu halten
- die gesamte Komposition nicht zu stark zu verkleinern, wenn die neue Größe nah am ursprünglichen Seitenverhältnis bleibt
- Abstände um breitere Textbereiche zu erhalten
- dekorative Elemente und Formen an das neue Seitenverhältnis anzupassen
- gruppierte Inhalte nach Möglichkeit zusammenzuhalten
- offensichtliche Überlappungen und Überläufe zu verringern
Das genaue Ergebnis hängt von der Struktur des Quell-Frames und vom Unterschied zwischen dem ursprünglichen und dem Zielseitenverhältnis ab.
Wann du die Neuanordnung aktivierst oder deaktivierst
Aktiviere sie, wenn
- du schnell einen ersten Entwurf für mehrere neue Größen willst
- dein Quellbanner klar strukturierte Inhalte hat
- Bannerify vor dem letzten Feinschliff die Hauptarbeit übernehmen soll
Lass sie deaktiviert, wenn
- du nur schnell die neuen Frame-Größen erstellen willst
- du alles selbst in Figma neu positionieren willst
- das Quelllayout sehr individuell ist und du die volle manuelle Kontrolle willst
Best Practices für bessere Ergebnisse
Die einheitlichsten Ergebnisse erhältst du, wenn deine Quellbanner in Figma klar strukturiert sind.
Wichtige Elemente als direkte untergeordnete Ebenen oder logische Gruppen anlegen
Zum Beispiel:
- Gruppe für die Überschrift
- Gruppe für den Fließtext
- Gruppe für CTA oder Button
- Gruppe für das Logo
- Gruppe für das Produktbild
So erkennt Bannerify leichter, welche Aufgabe jedes Element hat, und kann es sinnvoll neu anordnen.
Keinen riesigen flachen Frame mit unzusammenhängenden Ebenen verwenden
Wenn jedes Element lose im Haupt-Frame liegt und nicht logisch gruppiert ist, hat Bannerify weniger inhaltliche Anhaltspunkte.
Langen Texten ein passendes Textfeld geben
Wenn dein Banner lange Rechtstexte oder Haftungsausschlüsse enthält, gib der Textebene im Quell-Frame eine realistische Breite.
Wenn der Text in HTML-Exporten scrollbar bleiben soll, sieh dir Scrollbare Textebenen an.
Sections nur für Banner mit mehreren Szenen verwenden
Die Generate-Funktion erstellt neue Größen aus vorhandenen Frames.
Wenn du mehrere Frames zu einer animierten Bannerabfolge kombinieren willst, sieh dir Banner mit mehreren Szenen an.
Nach dem Generieren
Die generierten Banner sind normale Figma-Frames. Du kannst:
- das Layout von Hand anpassen
- sie in Bannerify animieren
- sie als HTML, GIF, MP4, WebM oder in anderen unterstützten Formaten exportieren
Wenn du später das ursprüngliche Quelldesign änderst, generiere einfach einen neuen Satz.
Tipps zur Fehlerbehebung
- Wenn die generierten Layouts zu viel Nacharbeit brauchen, deaktiviere den Schalter für die Neuanordnung und passe die Größen der Varianten von Hand an.
- Wenn textlastige Größen weiterhin Anpassungen brauchen, vereinfache das Quelllayout und generiere erneut.
- Wenn generierte Banner für sehr kleine Größen zu viel Text enthalten, kürze den Quelltext oder nutze scrollbare Texte oder Popup-Texte.
- Wenn Bannerify mehrere Frames als ein Banner behandeln soll, nutze statt der Generate-Funktion Figma-Sections.
Zusammenfassung
Mit der Generate-Funktion machst du am schnellsten aus einem oder mehreren fertigen Figma-Bannern einen vollständigen Satz neuer Bannergrößen.
Wähle deine Quell-Frames und deine Ausgabegrößen, entscheide, ob du Auto re-layout new Figma frame content layers (BETA) aktivierst, und lass Bannerify die neuen Frames direkt auf der Seite generieren.