Un frame padre rotado descoloca las capas
Esto suele ocurrir si el frame padre se ha rotado a un valor distinto de 0 grados (por ejemplo, "-90" o "180") antes de añadir el contenido, lo que descoloca la posición de las capas hijas. Para solucionarlo, crea un frame nuevo sin rotar con las mismas dimensiones y copia o arrastra las capas hijas del frame rotado original al frame nuevo, sin rotación.
Cuadro delimitador de las capas de texto (recortes)
Otra cosa que puede descolocar o recortar una capa de texto es que el tamaño del cuadro de texto no coincida con el tamaño del propio texto. Por ejemplo, si hay varias líneas de texto pero la altura del cuadro delimitador es muy pequeña, la posición se desplazará de forma incorrecta. Para solucionarlo, ajusta la altura del cuadro delimitador para que coincida con el tamaño del contenido de texto.
SVG con sombras borrosos en Safari
Hay un problema conocido en Safari con los SVG que contienen sombras paralelas: Safari rasteriza el vector en píxeles, y por eso se ve menos nítido.
Una de las sugerencias de ese hilo es separar la sombra y el botón o contenido en dos capas distintas; así, la capa del botón de arriba, sin sombra, se seguirá renderizando en Safari como un SVG nítido, y la capa de debajo solo servirá para añadir la sombra detrás.
También puedes cambiar desde el plugin el formato de imagen solo de la capa del botón CTA a "PNG" y cambiar además la escala de esa capa a @2x retina. Así, el CTA se exportará como una imagen PNG a 2x, que se seguirá viendo nítida y evitará el problema de las sombras SVG en Safari.
Los colores o degradados de los GIF se ven algo granulados
Los GIF son algo distintos de las imágenes JPG/PNG normales, porque solo pueden contener un máximo de 256 colores. Si usas imágenes muy detalladas o degradados con mucha variación de color, es normal que no se vean tan nítidos ni con la misma precisión de color que las imágenes originales usadas para crear el GIF, debido a esta limitación del formato GIF.
La transparencia no se ve en los GIF
El formato de archivo GIF admite una opacidad del 0 % o del 100 %, pero nada intermedio. Esto significa que puedes tener un GIF animado con un fondo completamente transparente detrás de elementos completamente opacos y visibles. Por tanto, las capas tienen que ser completamente transparentes o no serlo; las capas con una opacidad inferior al 50 % serán transparentes, y las capas con una opacidad superior al 50 % serán opacas.
Marcar GIF transparentes en Figma. De forma predeterminada, tus exportaciones GIF no incluyen transparencia. Si tu GIF necesita transparencia, añade la palabra transparent en cualquier parte del nombre de la capa en Figma.
Dónde alojar archivos de vídeo .mp4
Para añadir vídeos a Bannerify, el plugin carga cualquier URL que enlace directamente a un archivo .mp4, así que, por desgracia, en este caso no sirven las URL de Vimeo/YouTube ni los enlaces a reproductores web. Una buena opción para alojar vídeos es Backblaze B2: puedes crear una cuenta gratis que te da 10gb de almacenamiento gratis y, si creas un bucket de almacenamiento público, deberías poder copiar y pegar el enlace de cualquier vídeo que subas y usar ese enlace al .mp4 en Bannerify. Otra opción de alojamiento de archivos muy popular es Dropbox, que te permite subir tu archivo .mp4 y usar ese enlace en el plugin Bannerify; Bannerify cambia automáticamente ?dl=0 por ?raw=1 para que el enlace apunte directamente al archivo de vídeo (y no al reproductor de la web de Dropbox).
Línea blanca fina alrededor de las imágenes exportadas
A veces, algunas imágenes tienen una línea blanca fina y tenue en los bordes. Figma hace esto si una capa no está colocada en un valor de píxel redondo (por ejemplo, Y: 156.76 o X: 56.3), y eso hace que esta línea de subpíxel se incluya automáticamente en la exportación. Bannerify intenta redondear automáticamente estos valores en las capas que permiten cambiar de tamaño mediante la Figma Plugin API, pero, para solucionarlo a mano (si hace falta), asegúrate de que todas las posiciones de tus capas sean valores de píxel redondos.
Los banners de alta resolución no se exportan a MP4
Si exportas banners de alta resolución a vídeo MP4 desde el plugin, a veces Figma alcanza su límite de memoria de 2gb y no puede renderizar el vídeo directamente a .mp4. Para evitarlo, exporta tus banners desde Bannerify en formato WebM y, después, convierte los archivos de vídeo .webm exportados a .mp4 fuera de Figma con el transcodificador de vídeo Handbrake.
Google Ads no valida los anuncios
Hay un par de motivos habituales por los que un banner HTML no se sube o Google no lo valida. Normalmente, el tamaño de archivo del banner es demasiado grande o las dimensiones del banner no coinciden exactamente con los tamaños "estándar". Puedes usar estos servicios para validar tus banners para Google Ads o DoubleClick antes de subirlos.
El banner HTML exportado no se anima ni se reproduce en el navegador
Si tu banner HTML exportado parece congelado, no se anima o funciona en la vista previa de Bannerify pero no al abrir el archivo HTML exportado en un navegador, comprueba si tienes activado un bloqueador de anuncios o una extensión de privacidad en el navegador. Algunas extensiones pueden impedir que los archivos HTML locales o relacionados con anuncios funcionen correctamente. Desactiva temporalmente la extensión para el archivo de vista previa local, abre la exportación en otro navegador o sube el banner a tu entorno habitual de vista previa o staging y pruébalo allí.
Extensiones de archivo vacías en la app de escritorio de Figma en Windows
Hay un problema conocido en la app de escritorio de Figma (solo en Windows), que también ocurre con las exportaciones de archivos normales de Figma. Al guardar el archivo, puede que veas la etiqueta "all files". Si la ignoras y continúas haciendo clic en "Save", el archivo debería guardarse igualmente con la extensión correcta y podrás abrirlo con normalidad cuando se haya descargado en tu ordenador. Si aun así se guarda con la extensión vacía, puedes cambiarle el nombre y añadir a mano la extensión correcta al nombre del archivo.
El validador HTML de Google convierte en PNG los elementos SVG con sombra paralela (al subirlos desde el móvil)
Por algún motivo, cuando subes el .zip de un banner al DCM Validator desde el navegador de un dispositivo móvil (por ejemplo, un iPhone), el validador convierte automáticamente en PNG los elementos SVG que contienen una sombra paralela, y por eso se ven más pixelados en la vista previa.
Imágenes exportadas pixeladas
Si exportas banners mientras las imágenes de Figma todavía se están cargando progresivamente, puede que se exporten pixeladas, porque la imagen no se había cargado por completo en el archivo de Figma antes de exportarla. Para solucionarlo, asegúrate de que todas las imágenes se hayan cargado al 100 % y se vean nítidas en el archivo de Figma antes de exportar tus banners con el plugin Bannerify. Para ayudarte aún más con este problema, puedes usar la función "Downsizer" de TinyImage para reducir los rellenos de imagen al tamaño de su capa. Así se reduce su tamaño de archivo y se cargan mucho más rápido en tu archivo de Figma.
Añadir atributos aria-hidden='true' a las capas
Si necesitas incluir atributos aria-hidden por motivos de accesibilidad, puedes hacerlo capa a capa incluyendo aria-hidden en el nombre de la capa en Figma; así se añadirá automáticamente aria-hidden="true" a ese elemento HTML cuando los banners se exporten a HTML.
Puede que necesites una VPN en China
Ten en cuenta que, si estás en China, es posible que "el Gran Cortafuegos de China" bloquee el servidor de cuentas. Si ves un error de activación aunque uses una clave válida, seguramente tendrás que usar una VPN para solucionarlo.
'An error occurred while loading the plugin environment'
Esto puede ocurrir en la app de escritorio de Figma si el ajuste de depuración Use Developer VM de Figma está activado por error. Para asegurarte de que está desactivado, haz clic derecho en cualquier parte del lienzo de Figma, pasa el ratón por encima de Plugins y luego de Development, y comprueba que Use Developer VM está desmarcado. Cuando esté desmarcado (y no tenga una marca de verificación al lado), al volver a ejecutar el plugin de Figma debería funcionar con normalidad.