Video-Tutorial: Banner in Figma animieren und als HTML exportieren
Dieses Video zeigt, wie du in Sekunden produktionsreife HTML-Banner aus Figma animierst und exportierst.
Mit einer leeren Figma-Seite beginnen
Damit du schnell mit dem Gestalten deiner eigenen Banner loslegen kannst, bietet Bannerify an, automatisch einige Standard-Bannergrößen für dich anzulegen, wenn du das Plugin auf einer leeren Figma-Seite ausführst.
Ebenen deiner Banner-Frames in Figma strukturieren
Die direkten untergeordneten Ebenen jedes Frames dienen standardmäßig als Elemente des jeweiligen Banners. Wie du in den folgenden Abschnitten siehst, kannst du jedes dieser Elemente im Bannerify-Plugin einzeln animieren, um deine Banner zu erstellen.
Ausgeblendete untergeordnete Ebenen werden in deine Banner-Frames aufgenommen Direkte untergeordnete Ebenen, die du in Figma auf ausgeblendet gesetzt hast, erscheinen trotzdem in der Ebenen-Zeitleiste von Bannerify. So kannst du untergeordnete Ebenen beim Gestalten von Bannern ausblenden, deren Elemente in mehreren Phasen ein- und ausgeblendet werden. Bannerify zeigt diese ausgeblendeten Ebenen automatisch im sichtbaren Zustand an.
Figma-Ebenen in der Zeitleiste ausblenden. Wenn eine bestimmte Ebene deines Figma-Frames nicht in der Zeitleiste erscheinen soll, kannst du sie mit dem Präfix hide- umbenennen (zum Beispiel hide-RectangleBackground). Dann wird die Ebene weder in die Zeitleiste des Plugins noch in deine Banner-Exporte aufgenommen.
Mit bereits gestalteten Bannern beginnen
Wenn du in Figma bereits Bannerdesigns erstellt hast und das Bannerify-Plugin auf deiner Seite ausführst, lädt es automatisch eine Liste der Frames oder Instanzen in deiner Datei, die du als Banner verwenden kannst.
Du kannst nur die Banner markieren, die das Plugin laden soll, und dann auf den Button Load Checked Banners klicken, oder du klickst auf den Button Load All Banners, um automatisch alle zu laden.
Mehrere oder alle Banner aktualisieren oder neu laden
Wenn du Ebenen in deiner Figma-Datei hinzufügst oder änderst, während Bannerify bereits läuft, werden sie nicht automatisch aktualisiert. Es gibt aber zwei Möglichkeiten, deine Banner zu aktualisieren.
Um alle Banner in deiner Zeitleiste zu aktualisieren oder ganz neue Banner aus deiner Figma-Datei zu laden, klick im Hauptmenü in der Kopfzeile des Plugins auf das Symbol Refresh.
Daraufhin erscheint wieder der Startbildschirm zur Bannerauswahl. Dort kannst du nur die Banner markieren, die das Plugin laden soll, und dann auf den Button Load Checked Banners klicken, oder du klickst auf den Button Load All Banners, um automatisch alle zu laden. Alle geänderten Ebenen erscheinen in der Bannerify-Zeitleiste und in den Echtzeit-Vorschauen.
Ein einzelnes Banner aktualisieren
Wenn du Ebenen in deiner Figma-Datei hinzufügst oder änderst, während Bannerify bereits läuft, werden sie nicht automatisch aktualisiert. Es gibt aber zwei Möglichkeiten, deine Banner zu aktualisieren.
Um schnell ein einzelnes Banner zu aktualisieren, klick in der Kopfleiste des Banners auf das Symbol Refresh. Dann werden nur die Ebenen dieses Banners aktualisiert, und alle geänderten Ebenen erscheinen in der Bannerify-Zeitleiste und in den Echtzeit-Vorschauen.
Eine einfarbige Hintergrundfüllung für das Banner festlegen
Du kannst für jedes Banner eine einfarbige Hintergrundfarbe festlegen, indem du in Figma die einfarbige Fill des Frames auf die gewünschte Farbe setzt. Sie ist unter Umständen kurz zu sehen, bevor deine Bildelemente geladen sind.
Banner automatisch in den sichtbaren Bereich scrollen
Damit du leichter zwischen Bannern wechseln kannst, scrollt Bannerify ein Banner in der Zeitleiste automatisch in den sichtbaren Bereich, wenn du auf der Figma-Seite auf die zugehörige Ebene (oder eine ihrer untergeordneten Ebenen) klickst.
Das funktioniert auch umgekehrt: Wenn du in der Zeitleiste über einer deiner Bannervorschauen auf den Icon-Button Frame oder Instanz klickst, wird auf deiner Figma-Seite automatisch zur zugehörigen Figma-Ebene gescrollt und auf sie gezoomt.
Größe des Plugin-Fensters ändern
Wenn du einen größeren (oder kleineren) Monitor nutzt, kannst du in Bannerify die Größe des Plugin-Fensters ändern, damit sich die Zeitleiste je nach Bildschirmgröße leichter bedienen und überblicken lässt. Über das Größen-Dropdown im Hauptmenü in der Kopfzeile des Plugins stellst du das Fenster von kleineren bis zu größeren Formaten (4K) ein.