Tutorial en vídeo: anima y exporta banners a HTML desde Figma
En este vídeo verás cómo animar y exportar en segundos banners HTML listos para producción desde Figma.
Genera el JSON de tu animación en bannerify.hypermatic.com
- Abre https://bannerify.hypermatic.com.
- En la sección Create Your Custom Bannerify Animation, describe la animación que quieres (por ejemplo: "Elastic slide in from left with slight rotation").
- Haz clic en Copy Prompt to Clipboard y pégalo en ChatGPT o Claude, o haz clic en Open Prompt in ChatGPT / Open Prompt in Claude.
- Después, copia el fragmento JSON de la animación generada.
- Abre tu archivo de Figma y ejecuta el plugin Bannerify.
- Abre el panel Custom Animations en Bannerify.
- Pega el JSON en el área de texto Paste generated JSON code here.
- Comprueba que la animación aparece en los menús desplegables de ajustes predefinidos de animación de tu línea de tiempo.
La animación se guarda automáticamente al pegarla y puedes seleccionarla como cualquier otro ajuste predefinido en los menús de animación de las capas de la línea de tiempo.
Las animaciones personalizadas se guardan en tu archivo de Figma actual. Si cambias a otro archivo de Figma, tendrás que volver a pegar el JSON allí.