--- url: "/de/bannerify/design/figma-frames.md" description: "Bannerify durchsucht alle **Frames und Instanzen der obersten Ebene** auf der aktiven Figma-Seite und nutzt jeden davon als eigenes **Banner**. Auch Elemente der obersten Ebene in einem Komponentenset (Varianten) lädt Bannerify als Banner." --- # Banner in Figma gestalten > Bannerify durchsucht alle **Frames und Instanzen der obersten Ebene** auf der aktiven Figma-Seite und nutzt jeden davon als eigenes **Banner**. Auch Elemente der obersten Ebene in einem Komponentenset (Varianten) lädt Bannerify als Banner. ### 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. [Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA) ## Mit einer leeren Figma-Seite beginnen {#starting-from-a-blank-figma-page} [Video](/assets/videos/bannerify/design/blank-frames.mp4) 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 {#structuring-your-figma-banner-frame-layers} [Video](/assets/videos/bannerify/design/frame-children.mp4) 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. > **Note:** **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. > **Tip:** **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 {#starting-with-banners-you-ve-already-designed} [Video](/assets/videos/bannerify/design/loading-existing.mp4) 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 {#refreshing-or-re-loading-multiple-all-banners} [Video](/assets/videos/bannerify/design/refreshing-all-banners.mp4) 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 {#refreshing-a-single-banner} [Video](/assets/videos/bannerify/design/refreshing-single-banners.mp4) 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 {#setting-a-solid-banner-background-fill} [Video](/assets/videos/bannerify/design/setting-background-fill.mp4) 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 {#auto-scrolling-banners-into-view} [Video](/assets/videos/bannerify/design/scroll-layers.mp4) 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 {#resizing-the-plugin-window} [Video](/assets/videos/bannerify/design/resize-window.mp4) 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.