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.
Empezar desde una página de Figma en blanco
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
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.
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.
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
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
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
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
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
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
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.