Tutorial en vídeo: añade HTML, CSS y JavaScript propios a las exportaciones de banners de Figma

Este vídeo muestra cómo añadir HTML, CSS y JavaScript propios a las exportaciones de banners de Figma con el plugin Bannerify.

Si necesitas añadir tu propio código HTML/CSS/JavaScript a todas tus exportaciones de banners HTML, activa el interruptor Inject Custom Code en los ajustes de exportación. Así podrás añadir HTML propio antes de las etiquetas de cierre </body> (para añadir contenido) o </head> (para añadir metaetiquetas o enlaces a recursos), añadir CSS propio en una nueva etiqueta style o añadir código JavaScript propio dentro de una nueva etiqueta <script></script>.

Ejemplo de superposición con aviso legal desplegable. Puedes usar este ejemplo de código HTML/CSS/JS en CodePen como ejemplo básico de un uso habitual de esta función: inserta sobre tus banners un aviso legal emergente que se puede abrir y cerrar. Puedes copiar y modificar los estilos y el contenido como necesites.

Ajustes predefinidos de código guardados (opcional)

La función Saved Custom Code Presets te permite guardar y reutilizar distintas configuraciones de código HTML, CSS y JavaScript propio al exportar banners. Para usarla, rellena con tu código las cuatro áreas disponibles (Head HTML, Body HTML, CSS y JavaScript), escribe un nombre descriptivo y haz clic en Save as New Preset para guardar esa configuración y usarla más adelante.

Una vez guardado, puedes cargar rápidamente cualquier ajuste predefinido desde el desplegable Load Saved Preset (Optional) para rellenar al instante todas las áreas de código con tu configuración guardada. Así no tienes que copiar y pegar fragmentos de código a mano cada vez que exportas banners con requisitos distintos. Puedes gestionar tus ajustes predefinidos borrando los que ya no necesites o actualizando los existentes: cárgalos, haz los cambios y guárdalos con el mismo nombre. Todos los ajustes predefinidos se guardan localmente en tu aplicación de Figma actual (con la API clientStorage de Figma) y se conservan cada vez que vuelves a abrir el panel de código de Bannerify, en cualquier archivo de Figma, así que es fácil mantener el mismo código en varias sesiones de exportación.

Añadir fuentes personalizadas al texto HTML editable

Usa un archivo de fuente web para cada grosor y estilo que use tu texto editable. Instalar una fuente en Figma no la incluye en una exportación HTML.

1. Consigue los archivos .woff2 o .woff aprobados por la marca para uso web.
2. Activa la exportación del texto como párrafo. Deja desbloqueado en Figma el texto editable.
3. En el panel de exportación HTML, activa Inject Custom Code y elige Add custom CSS styles.
4. Pega una regla @font-face en el campo CSS sin la etiqueta <style> alrededor. Sustituye la familia de ejemplo por el nombre exacto de la familia que se usa en Figma y en la declaración font-family del texto exportado, y haz que coincidan el grosor y el estilo reales de la fuente.

@font-face {
  font-family: "Your Brand Font";
  src: url("fonts/brand-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

5. Añade una regla aparte para cada grosor o estilo adicional (por ejemplo, 700 para la negrita o italic para un archivo en cursiva).
6. Exporta y descomprime el banner. Coloca los archivos de fuente en una carpeta fonts junto al archivo HTML de cada banner y vuelve a comprimir todo el contenido de ese banner. Bannerify inserta el CSS, pero no copia estos archivos de fuente locales en el ZIP. Las URLs relativas de las fuentes se resuelven desde la ubicación de la hoja de estilos; ajusta la ruta si el CSS se guarda en otra carpeta.
7. Prueba el paquete con un servidor web local o con la vista previa de la plataforma de destino, también en un dispositivo que no tenga la fuente instalada. Comprueba la carga de la fuente, los saltos de línea y los textos de sustitución más largos. Los archivos de fuente cuentan para el tamaño del paquete, y el destino tiene que admitirlos.

Si tu plataforma publicitaria permite solicitudes de fuentes externas, también puedes usar la URL HTTPS directa de un archivo de fuente alojado. El servidor de la fuente debe permitir la carga de fuentes entre orígenes (CORS). Consulta la referencia de font-face de MDN.