--- url: "/fr/bannerify/design/figma-frames.md" description: "Bannerify charge chaque frame ou instance de premier niveau de la page active comme une bannière, y compris les éléments d’un ensemble de variantes." --- # Concevoir vos bannières dans Figma > Bannerify charge chaque frame ou instance de premier niveau de la page active comme une bannière, y compris les éléments d’un ensemble de variantes. ### Tutoriel vidéo : animez et exportez vos bannières en HTML depuis Figma Cette vidéo montre comment animer et exporter en quelques secondes des bannières HTML prêtes pour la production depuis Figma. [Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA) ## Partir d’une page Figma vierge {#starting-from-a-blank-figma-page} [Video](/assets/videos/bannerify/design/blank-frames.mp4) Pour vous aider à concevoir rapidement vos propres bannières, Bannerify propose de créer automatiquement quelques formats de bannière standard lorsque vous lancez le plugin sur une page Figma vide. ## Structurer les calques de vos frames de bannière Figma {#structuring-your-figma-banner-frame-layers} [Video](/assets/videos/bannerify/design/frame-children.mp4) Les **calques enfants directs** de chaque frame servent par défaut d’**éléments** de chaque bannière. Comme vous le verrez dans les sections ci-dessous, chacun de ces éléments peut être animé individuellement dans le plugin Bannerify pour créer vos bannières. > **Note:** **Les calques enfants masqués sont inclus dans vos frames de bannière.** Tout calque enfant direct **masqué** dans Figma apparaît quand même dans la timeline des calques de Bannerify. Cela vous permet de masquer visuellement des calques enfants pendant que vous concevez des bannières dont certains éléments doivent apparaître et disparaître en plusieurs étapes. Bannerify affiche automatiquement ces calques masqués comme s’ils étaient visibles. > **Tip:** **Masquer des calques Figma dans la timeline**. Si vous ne voulez pas inclure un calque de votre frame Figma dans la timeline, renommez-le avec le préfixe **hide-** (par exemple _hide-RectangleBackground_). Ce calque ne sera alors inclus ni dans la timeline du plugin ni dans les exports de vos bannières. ## Partir de bannières déjà conçues {#starting-with-banners-you-ve-already-designed} [Video](/assets/videos/bannerify/design/loading-existing.mp4) Si vous avez déjà conçu des bannières dans Figma, lancer le plugin Bannerify sur votre page charge automatiquement la liste des frames ou instances de votre fichier qui peuvent servir de bannières. Vous pouvez cocher ou décocher uniquement les bannières que le plugin doit charger, puis cliquer sur le bouton **Load Checked Banners**, ou cliquer sur le bouton **Load All Banners** pour les charger toutes automatiquement. ## Actualiser ou recharger plusieurs bannières ou toutes les bannières {#refreshing-or-re-loading-multiple-all-banners} [Video](/assets/videos/bannerify/design/refreshing-all-banners.mp4) Si vous ajoutez ou modifiez des calques dans votre fichier Figma alors que Bannerify est déjà ouvert, ils ne sont pas mis à jour automatiquement. Il existe toutefois deux façons d’actualiser vos bannières. Pour actualiser toutes les bannières de votre timeline ou charger de nouvelles bannières depuis votre fichier Figma, cliquez sur l’icône **Refresh** dans le menu de l’en-tête principal du plugin. L’écran initial de sélection des bannières s’affiche de nouveau : vous pouvez cocher ou décocher uniquement les bannières que le plugin doit charger, puis cliquer sur le bouton **Load Checked Banners**, ou cliquer sur le bouton **Load All Banners** pour les charger toutes automatiquement. Les calques modifiés apparaissent dans la timeline de Bannerify et dans les aperçus en temps réel. ## Actualiser une seule bannière {#refreshing-a-single-banner} [Video](/assets/videos/bannerify/design/refreshing-single-banners.mp4) Si vous ajoutez ou modifiez des calques dans votre fichier Figma alors que Bannerify est déjà ouvert, ils ne sont pas mis à jour automatiquement. Il existe toutefois deux façons d’actualiser vos bannières. Pour actualiser rapidement une seule bannière, cliquez sur l’icône **Refresh** dans la barre d’en-tête de cette bannière : seuls ses calques sont actualisés, et les calques modifiés apparaissent dans la timeline de Bannerify et dans les aperçus en temps réel. ## Définir une couleur de fond unie pour la bannière {#setting-a-solid-banner-background-fill} [Video](/assets/videos/bannerify/design/setting-background-fill.mp4) Pour définir la couleur de fond unie d’une bannière, réglez le **Fill** uni de ce frame sur la couleur voulue dans Figma. Cette couleur peut être visible brièvement avant le chargement de vos images. ## Faire défiler automatiquement les bannières jusqu’à l’affichage {#auto-scrolling-banners-into-view} [Video](/assets/videos/bannerify/design/scroll-layers.mp4) Pour passer facilement d’une bannière à l’autre, Bannerify fait automatiquement défiler la timeline jusqu’à une bannière lorsque vous cliquez sur le calque correspondant (ou sur l’un de ses calques enfants) dans la page Figma. Cela fonctionne aussi dans l’autre sens : si vous cliquez sur l’icône **frame** ou **instance** au-dessus de l’aperçu d’une bannière dans la timeline, Figma fait automatiquement défiler et zoomer la page jusqu’au calque correspondant. ## Redimensionner la fenêtre du plugin {#resizing-the-plugin-window} [Video](/assets/videos/bannerify/design/resize-window.mp4) Si vous utilisez un écran plus grand (ou plus petit), Bannerify vous permet de redimensionner la fenêtre du plugin pour l’utiliser plus confortablement et mieux voir la timeline selon la taille de votre écran. Vous pouvez choisir une taille de fenêtre, de la plus petite à la plus grande (4K), dans la liste déroulante des tailles du menu de l’en-tête principal du plugin.