--- url: "/es/bannerify/design/figma-frames.md" description: "Bannerify recorre todos los **frames e instancias de nivel superior** de la página activa de Figma y usa cada uno como un **banner**. También carga como banners los elementos de nivel superior de un conjunto de componentes (o capa de 'variantes')." --- # Diseñar tus banners en Figma > Bannerify recorre todos los **frames e instancias de nivel superior** de la página activa de Figma y usa cada uno como un **banner**. También carga como banners los elementos de nivel superior de un conjunto de componentes (o capa de 'variantes'). ### Tutorial en vídeo: Anima y exporta banners a HTML desde Figma Este vídeo muestra cómo animar y exportar en segundos banners HTML listos para producción desde Figma. [Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA) ## Empezar desde una página de Figma en blanco {#starting-from-a-blank-figma-page} [Video](/assets/videos/bannerify/design/blank-frames.mp4) Para que empieces a diseñar tus banners rápidamente, Bannerify se ofrece a crear automáticamente algunos tamaños de banner estándar cuando ejecutas el plugin en una página de Figma vacía. ## Estructurar las capas de los frames de banner en Figma {#structuring-your-figma-banner-frame-layers} [Video](/assets/videos/bannerify/design/frame-children.mp4) Las **capas hijas directas** de cada frame se usan como los **elementos** predeterminados de cada banner. Como verás en las secciones siguientes, cada uno de estos elementos se puede animar por separado en el plugin Bannerify para crear tus banners. > **Note:** **Las capas hijas ocultas se incluyen en tus frames de banner** Cualquier capa hija directa que esté **oculta** en Figma seguirá apareciendo en la línea de tiempo de capas de Bannerify. Así puedes mantener ocultas algunas capas hijas mientras diseñas banners con elementos que tienen que aparecer y desaparecer en varias fases. Bannerify muestra automáticamente estas capas ocultas como si fueran visibles. > **Tip:** **Ocultar capas de Figma en tu línea de tiempo**. Si no quieres incluir una capa concreta de tu frame de Figma en la línea de tiempo, puedes cambiar el nombre de cualquier capa de Figma con el prefijo **hide-** (por ejemplo, _hide-RectangleBackground_). Así te aseguras de que esa capa no se incluya en la línea de tiempo del plugin ni en las exportaciones de tus banners. ## Empezar con banners que ya has diseñado {#starting-with-banners-you-ve-already-designed} [Video](/assets/videos/bannerify/design/loading-existing.mp4) Si ya has creado diseños de banners en Figma, al ejecutar el plugin Bannerify en tu página se cargará automáticamente una lista de los frames o instancias de tu archivo que se pueden usar como banners. Puedes marcar o desmarcar solo los banners que quieres que cargue el plugin y hacer clic en el botón **Load Checked Banners**, o hacer clic en el botón **Load All Banners** para cargarlos todos automáticamente. ## Actualizar o volver a cargar varios banners o todos {#refreshing-or-re-loading-multiple-all-banners} [Video](/assets/videos/bannerify/design/refreshing-all-banners.mp4) Si añades o actualizas capas en tu archivo de Figma mientras Bannerify ya está en ejecución, no se actualizarán automáticamente. Sin embargo, hay dos formas de actualizar tus banners. Para actualizar todos los banners de tu línea de tiempo o cargar banners nuevos de tu archivo de Figma, haz clic en el icono **Refresh** del menú de la cabecera principal del plugin. Volverá a aparecer la pantalla inicial de selección de banners, donde puedes marcar o desmarcar solo los banners que quieres que cargue el plugin y hacer clic en el botón **Load Checked Banners**, o hacer clic en el botón **Load All Banners** para cargarlos todos automáticamente. Las capas actualizadas aparecerán en la línea de tiempo de Bannerify y en las vistas previas en tiempo real. ## Actualizar un solo banner {#refreshing-a-single-banner} [Video](/assets/videos/bannerify/design/refreshing-single-banners.mp4) Si añades o actualizas capas en tu archivo de Figma mientras Bannerify ya está en ejecución, no se actualizarán automáticamente. Sin embargo, hay dos formas de actualizar tus banners. Para actualizar rápidamente un solo banner, haz clic en el icono **Refresh** de la barra de cabecera de ese banner; así solo se actualizan las capas de ese banner, y las capas actualizadas aparecerán en la línea de tiempo de Bannerify y en las vistas previas en tiempo real. ## Definir un relleno de fondo sólido para el banner {#setting-a-solid-banner-background-fill} [Video](/assets/videos/bannerify/design/setting-background-fill.mp4) Puedes definir un color de fondo sólido para cualquier banner configurando en Figma el **Fill** sólido de ese frame con el color que necesites; puede verse un momento antes de que se carguen tus elementos de imagen. ## Desplazar automáticamente los banners a la vista {#auto-scrolling-banners-into-view} [Video](/assets/videos/bannerify/design/scroll-layers.mp4) Para que puedas cambiar de un banner a otro mientras editas, Bannerify desplaza automáticamente un banner a la vista en la línea de tiempo cuando haces clic en su capa correspondiente (o en una capa hija) en la página de Figma. También funciona al revés: si haces clic en el botón del icono **frame** o **instance** que hay encima de cualquiera de las vistas previas de tus banners en la línea de tiempo, la capa de Figma correspondiente se desplaza y se amplía automáticamente en tu página de Figma. ## Redimensionar la ventana del plugin {#resizing-the-plugin-window} [Video](/assets/videos/bannerify/design/resize-window.mp4) Si usas un monitor más grande (o más pequeño), Bannerify te permite redimensionar la ventana del plugin para que sea más fácil de usar y ver la línea de tiempo según el tamaño de tu pantalla. Puedes cambiar el tamaño de la ventana, de tamaños más pequeños a más grandes (4K), con el desplegable de tamaño del menú de la cabecera principal del plugin.