--- url: "/es/bannerify/faq/troubleshooting.md" description: "Guía de solución de problemas de Bannerify: exportaciones, problemas de renderizado y limitaciones de las plataformas." --- # Solución de problemas de Bannerify > Guía de solución de problemas de Bannerify: exportaciones, problemas de renderizado y limitaciones de las plataformas. ## 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](https://forum.figma.com/t/pixelization-of-the-drop-shadow-of-my-svg-on-safari/36410/7) 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](https://www.backblaze.com/b2/cloud-storage.html): 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](https://www.dropbox.com/), 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](https://twitter.com/Skcrub/status/1255544876701270017) 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](https://handbrake.fr/). ## 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](https://h5validator.appspot.com/adwords/asset) o [DoubleClick](https://h5validator.appspot.com/dcm/) 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](https://h5validator.appspot.com/dcm/asset) 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"](/es/tinyimage/downsize) de [TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) 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](https://protonvpn.com/free-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](https://www.figma.com/plugin-docs/debugging/#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.