Rive: animación interactiva para producto, sin programar cada estado
Rive es una herramienta de animación con máquinas de estados que responden al usuario. Qué hace bien, cuánto cuesta y cuándo conviene algo más simple.
¿Qué es Rive y qué lo diferencia?
En una animación tradicional, el movimiento tiene un inicio y un fin. En Rive, el archivo contiene estados (reposo, hover, carga, éxito, error) y transiciones entre ellos. Un botón puede estar quieto, reaccionar al cursor, cambiar cuando se pulsa y volver a su reposo, todo dentro del mismo archivo.
Rive se presenta hoy como un motor 2D y 3D «nativo para agentes» para juegos, apps e interfaces interactivas, con un editor donde el diseñador afina el resultado a mano (Rive, página principal). Presenta las máquinas de estados como «interactividad sin código». Esa es la idea central: el diseñador define el comportamiento y el desarrollador lo integra, sin tener que escribir cada estado a mano.
¿Cuánto cuesta?
En noviembre de 2026, la página oficial de precios de Rive muestra cuatro planes: Free, Cadet, Voyager y Enterprise (Rive, “Pricing”). Free cuesta 0 dólares, permite tres archivos colaborativos y hasta 10 MB por recurso importado, y sus exportaciones muestran una pantalla de presentación de Rive. Cadet quita esa pantalla, ofrece archivos ilimitados y admite un máximo de tres asientos. Voyager admite hasta 25 asientos e incluye bibliotecas. Enterprise está pensado para organizaciones con más de 10 millones de dólares de ingresos anuales.
Los precios por asiento que muestra la página corresponden a la facturación anual. La documentación de Rive los detalla (Rive, documentación de precios):
| Plan | Facturación mensual | Facturación anual (equivale a) |
|---|---|---|
| Cadet | 17 USD por asiento | 108 USD al año (9 USD al mes) |
| Voyager | 49 USD por asiento | 384 USD al año (32 USD al mes) |
| Enterprise | no se ofrece | 1.440 USD al año (120 USD al mes) |
La facturación anual se paga completa por adelantado. Confirma el precio vigente en la página antes de presupuestar.
¿Por qué le importa a un diseñador?
Porque hay microinteracciones que cambian la percepción de un producto: un botón de envío que confirma, un icono de carga que anima un progreso real, un personaje que reacciona a un error. Con herramientas que solo reproducen vídeo, cada una exige que el desarrollador programe la lógica. Con Rive, el diseñador puede prototipar el comportamiento y entregar un archivo que ya tiene estados.
El formato Lottie sigue siendo útil para animaciones de solo reproducción. Rive destaca cuando la animación depende de la interacción. Según Rive, en Lottie JSON la interactividad debe programarse a mano, mientras que su state machine vive dentro del archivo (Rive, “Rive as a Lottie alternative”). El propio artículo reconoce que dotLottie también puede incluir state machines, así que la comparación conviene leerla con cuidado.
¿Cómo se usa en un flujo real?
Un flujo sencillo para un equipo de producto:
- Define los estados. Reposo, interacción, carga, éxito y error. Escríbelos antes de animar.
- Dibuja en el editor. Usa formas vectoriales, huesos si el personaje los necesita y textos que cambian con datos.
- Conecta las transiciones. Qué evento dispara cada cambio de estado: un clic, un valor que llega, un tiempo.
- Prueba en el entorno real. Si el archivo funciona en el editor pero no en la app, el problema suele estar en el tamaño del recurso o en la integración.
- Documenta los estados. Para que desarrollo sepa qué entradas espera el archivo.
Si ya diseñas en Figma para Diseñadores UX: Guía Completa, piensa el estado del componente allí y la animación en Rive. Así la intención visual queda en un lugar y el comportamiento en otro.
Ejemplo
Ejemplo ilustrativo: una app de transferencias quiere que el botón «Enviar» muestre el progreso de la operación. La versión inicial usa un spinner genérico. El equipo crea en Rive un botón con tres estados: reposo, cargando con una barra que avanza con el dato real y éxito con una marca que se dibuja. El desarrollador conecta la entrada de progreso y el estado final. Cuando la transferencia falla, el botón vuelve a reposo con un texto que explica qué pasó. El cambio es pequeño, pero la persona sabe en todo momento en qué punto está.
¿Cuándo NO conviene usar Rive?
- Para una animación que solo se reproduce. Si tienes un export de After Effects que no necesita interacción, Lottie es más simple y ya tiene un ecosistema.
- Si el equipo no tiene a alguien que la mantenga. Un archivo con estados complejos necesita dueño, como cualquier componente.
- Cuando la animación es decorativa. Una animación que no aporta información ni feedback puede ser un costo sin beneficio.
- Sin probar el peso en tu app. Rive afirma archivos más pequeños, pero mide con tus propios recursos y dispositivos.
Errores comunes
- Animar sin definir los estados primero.
- Usar animaciones largas para feedback que debería ser inmediato.
- Crear un archivo gigante con todos los casos en lugar de uno por componente.
- No revisar cómo se ve y se comporta con movimiento reducido.
- Elegir Rive por moda sin haber comparado con lo que ya tiene el equipo.
Cómo empezar mañana
Elige una microinteracción de tu producto que hoy sea un spinner o un cambio brusco. Escribe sus estados en una lista de tres o cuatro. Crea el archivo con el plan gratuito y pruébalo con un desarrollador que pueda integrarlo en un entorno de prueba. Antes de decidir si lo llevas a producción, compara el peso del recurso con la versión actual. Si la animación tiene que respetar el movimiento reducido, revisa también las estrategias para movimiento reducido de la wiki.