Animación de mascota en prototipos de Figma y handoff a desarrollo

¿Los prototipos de Figma pueden reproducir archivos de Rive?

No. En el foro de Figma hay solicitudes para insertar Rive y reproducirlo en prototipos desde marzo de 2024. En febrero de 2025, un desarrollador de la comunidad anunció un plugin beta de Rive, y en mayo de 2025 otra respuesta explicó que no puede reproducir animaciones de Rive en prototipos, transmitiendo la opinión del fundador de Rive de que "el código de Figma no permite el acceso donde se necesita para insertar archivos de Rive y reproducirlos". En el hilo no aparece ninguna respuesta del equipo de Figma.

Así que planifica el prototipo con sustitutos que Figma pueda reproducir y reserva el archivo interactivo real para el desarrollo. De todos modos, esa división es sana: el prototipo pone a prueba el flujo y los tiempos con las partes interesadas, y el .riv lleva la lógica de estados real a los desarrolladores.

¿Debo usar un GIF o un video en un prototipo de Figma?

Ambos funcionan, pero se comportan de forma distinta.

Dos consecuencias prácticas. Primero, un WebM VP9 con fondo transparente, el formato web habitual para un personaje con canal alfa, no está en la lista de Figma, y el artículo de Figma sobre video no menciona la transparencia, así que espera un fondo sólido e iguálalo con el del frame. Segundo, si las partes interesadas revisan en el teléfono con la app móvil de Figma, usa GIF, porque el video no se reproduce ahí.

¿Cómo hago el prototipo de una mascota que cambia de estado?

Convierte la mascota en un componente con una variante por estado (idle, loading, success, error), cada una con el GIF o el video de ese estado. Luego usa componentes interactivos, que agregan la acción Change to para cambiar entre variantes:

• Loops (idle, loading, listening): se repiten indefinidamente como GIF, o como videos con Loop activado.
• Reacciones puntuales (success, error, yes): deben reproducirse una vez y volver. Con video, desactiva Loop y conecta When video ends a Change to idle. Con un GIF, usa After delay con la duración del clip en milisegundos.
• Los eventos de pantalla controlan los cambios: tocar un botón cambia la mascota a loading, y un After delay en el frame simula la respuesta del servidor y la cambia a success.

Mantén las variantes del mismo tamaño y con el personaje en la misma posición, o saltará entre estados. Nombra las variantes según los estados reales (mood=loading, trigger=success) para que el prototipo ya hable el idioma de los desarrolladores.

¿Qué deberían entregar los diseñadores a los desarrolladores en lugar del GIF?

El .riv y un contrato de estados. Los GIF eran sustitutos; el desarrollo usa el archivo real, así que los desarrolladores necesitan saber qué máquina de estados ejecutar, qué propiedades existen, qué significa cada valor y qué evento de pantalla lo establece. Pon esto junto al frame como nota o anotación:

File:           character.riv
Artboard:       default
State machine:  CharacterViewModelMachine   (autoBind: true)
View model:     Character
  mood (number) 0 idle, 1 happy, 2 wave, 3 thinking, 4 sad,
                5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention
  triggers      success, error, yes, no, enter, exit
Screen events:
  Upload starts        -> mood = 5
  Upload succeeds      -> trigger success, then mood = 0
  Upload fails         -> trigger error, then mood = 4
  Empty inbox          -> mood = 8
Size:           120 x 120 pt, fit Contain
Reduced motion: autoplay off, show poster.png
Fallbacks:      poster.png, idle.mp4

Qué hace útil un contrato:

• Nombres exactos. Los nombres de la máquina de estados, del view model y de las propiedades distinguen entre mayúsculas y minúsculas en el código.
• Eventos, no animaciones. Los desarrolladores conectan los eventos de la app a las entradas; el archivo decide cómo se ven las transiciones.
• Tamaño y ajuste. El tamaño en puntos dentro del layout y cómo debe ajustarse el artboard a él.
• Movimiento reducido y alternativas. Qué mostrar cuando el movimiento está desactivado o el archivo no carga.

Las guías por plataforma muestran el otro lado del contrato: Data Binding en SwiftUI, React y Next.js y la introducción a la máquina de estados.

¿Cómo paso el arte de una mascota de marca de Figma a Rive?

Copia y pega. La documentación de Rive dice: "Puedes usar Copy as SVG y pegarlo directamente en el editor de Rive", y Rive anunció este flujo de trabajo en su blog en febrero de 2023. Lo que pegas se convierte en objetos vectoriales nativos de Rive que puedes riggear y animar.

• Acopla o convierte en contorno los efectos que Rive podría no interpretar igual; la documentación de Rive sugiere convertir esas partes primero "en trazados editables en tu herramienta de diseño".
• Nombra las capas en Figma antes de copiar; los nombres se conservan y facilitan el rigging.
• Pega un personaje a la vez en lugar de una pantalla completa.

El plugin "Rive for Figma" del hilo del foro es un proyecto de la comunidad, no un lanzamiento oficial de Rive, y no agrega reproducción en prototipos.

¿Qué exportaciones de Charmotion funcionan en Figma?

Charmotion entrega cada una de sus 17 animaciones como archivos separados, lo que se corresponde directamente con una variante por estado. El GIF (480 px, fondo sólido) está en cada set de Charmotion y se reproduce en la app móvil de Figma; iguala el color del frame con el fondo del GIF o colócalo sobre un mosaico. El MP4 de 1080×1080 sirve para rellenos de video cuando quieres un movimiento más fluido, y el MP4 9:16 encaja con momentos a pantalla completa como un inicio. El .riv con su view model Character (mood de 0 a 9 y triggers success, error, yes, no, enter y exit) más el código web, React y SwiftUI es el archivo de entrega, así que el contrato de arriba ya está casi completo. El .riv está en todos los planes de pago (desde $20/mes), junto con el MP4, el GIF y el video de inicio 9:16 con fondo sólido.

Cómo prototipar una mascota de marca en Figma y entregar el archivo de Rive

1. Exporta sustitutos. Exporta un GIF o un MP4 H.264 por estado, todos del mismo tamaño y con el personaje en la misma posición.
2. Crea el componente. Crea un componente de mascota con una variante por estado y coloca cada GIF o video en su variante.
3. Conecta los estados. Usa Change to con toques, After delay y When video ends para cambiar de variante.
4. Revisa en la vista de presentación. Reproduce el prototipo en la vista de presentación, donde los GIF se animan.
5. Escribe el contrato. Junto al frame, enumera la máquina de estados, el view model, las propiedades, los triggers y los eventos de pantalla que los activan.
6. Haz el traspaso. Adjunta el .riv y los archivos de respaldo, y enlaza a los desarrolladores con la guía de la plataforma de su stack.

Preguntas frecuentes

¿Por qué mi GIF no se mueve en Figma?

Figma solo reproduce GIF animados en modo presentación. Según su centro de ayuda, en el editor aparecen como imágenes estáticas. Abre el prototipo con el botón de presentar para ver la animación. Además, los GIF no se pueden exportar desde Figma como animaciones; Figma los exporta como imágenes estáticas.

¿Puedo usar un WebM con fondo transparente en un prototipo de Figma?

Figma admite .webm con codificación VP8, mientras que los videos de personajes con fondo transparente suelen ser VP9, y su artículo sobre video no menciona compatibilidad con canal alfa. Usa un MP4 H.264 o un GIF con un fondo que coincida con el frame, y reserva los archivos transparentes para la versión real.

¿Los videos de los prototipos de Figma se reproducen en la app móvil de Figma?

No. El centro de ayuda de Figma indica que actualmente los videos no son compatibles con la app móvil de Figma. Si quienes revisan van a abrir el prototipo en el teléfono, usa GIF animados para los estados de la mascota, que se reproducen en modo presentación, o comparte un enlace de escritorio para el video.

Respuestas rápidas de esta guía

• ¿Los prototipos de Figma pueden reproducir archivos de Rive?

Fuentes

• Rive animation embed, Figma Forum
• Use videos in prototypes, Figma Learn
• Use animated GIFs in prototypes, Figma Learn
• Create interactive components with variants, Figma Learn
• Prototype triggers, Figma Learn
• SVG and vector assets, Rive
• Copy and paste from Figma to Rive, Rive