Plantillas de animación UI para After Effects, editadas antes de llegar a tu composición
Las plantillas de animación UI para After Effects son pantallas de apps, widgets, burbujas de chat y gráficos ya hechos con capas de After Effects, para promos de producto y explainers. El mouzeclick workspace tiene 81 plantillas animadas en nueve categorías, la mayoría con un look oscuro y otro claro. Cambias el texto, el icono, los colores y la entrada en Template studio y luego pulsas Build template. El workspace funciona en Windows.
- 81 plantillas animadas (Templates 2.0) en nueve categorías: redes sociales, widgets, UI kit, chat, productividad, multimedia, comercio, gráficos y 3D
- 80 de las 81 tienen selector de look, la mayoría con versión oscura y clara; 63 conservan además su versión original 1.x, que se crea al instante con Alt-clic
- Una vista previa en directo que puedes pausar y recorrer, con las pestañas Content, Style y Motion; los colores del tema se convierten en Color Controls
- Efectos de interfaz SaaS en Motion lab, más las extensiones mouzesaas y mouzeicons, que también funcionan en Mac
- Forma parte del mouzeclick workspace para After Effects (solo Windows), incluido en el plan único
¿Qué son las plantillas de animación UI para After Effects?
Son piezas de interfaz ya construidas, como una notificación, una tarjeta de precios, una conversación de chat o un gráfico, hechas con capas de forma y de texto de After Effects y con la entrada ya animada. Sueltas una en una composición, cambias el texto y los colores, y se reproduce como algo que un diseñador animó a mano con keyframes.
Los editores las usan en vídeos de lanzamiento SaaS, previews para tiendas de apps, explainers y el momento de "aparece una notificación" en un vídeo a cámara. Una buena plantilla cumple cuatro requisitos.
- Está hecha con capas reales, no es un clip renderizado, así que escala a 4K y acepta los colores de tu marca.
- El texto es texto que puedes reescribir, no una imagen de texto.
- Los colores están expuestos como controles, así que un rebranding es cuestión de un minuto, no de rehacerla entera.
- La entrada es corta. Quince fotogramas de easing se ven pulidos; cuarenta parecen una presentación de diapositivas.
¿Qué plantillas de animación UI vienen con el mouzeclick workspace?
81 plantillas animadas en nueve categorías. 80 tienen selector de look, la mayoría con versión oscura y clara, y 63 conservan además su versión original Classic 1.x. Aquí están por categoría.
| Categoría | Plantillas | Ejemplos |
|---|---|---|
| Redes sociales | 17 | Perfil de creador, publicación social, pantalla de historia, mensaje directo, comentarios de vídeo corto, hilo largo, barra de suscripción |
| Widgets | 14 | Analítica, batería, calendario semanal, puntuación de crédito, subida de archivos, dock flotante, pila de notificaciones, anillos de actividad, clima |
| UI kit | 11 | Banner de cookies, cuenta atrás, resultados de búsqueda, insignia de directo, formulario de inicio de sesión, rótulo inferior, introducción de código, tarjetas de encuesta y valoración |
| Chat | 10 | Mensaje de chat, cuatro variantes de chat de mensajería, chat de equipo, chat en directo, un cuadro de prompt |
| Productividad | 8 | Bandeja de entrada de correo, archivo de diseño, pull request, editor de código, tablero kanban, pasos de progreso, ventana de terminal, checklist |
| Multimedia | 7 | Reproductor de audio, pantalla de llamada, dynamic island, reproductor de streaming, reproductor de música, controles de vídeo, videollamada |
| Comercio | 6 | Tarjeta de checkout, tarjeta de crédito, tarjeta de precios, anuncio de inmueble, notificación de pago, recibo de viaje |
| Gráficos | 5 | Gráficos de barras, de donut y de líneas, gráfico del mercado inmobiliario, ticker de precios |
| 3D | 3 | Pila de tarjetas 3D, notificaciones de teléfono en 3D, interfaz flotante |
Los nombres y números de cada plantilla son contenido de ejemplo. Sustitúyelos todos antes de entregar; un cliente se dará cuenta si aparece el nombre de un desconocido en su tarjeta de checkout.
¿Cómo se crea una plantilla UI en After Effects con Template studio?
Ábrela, edítala en la vista previa y luego créala. Nada llega a tu composición hasta que pulsas Build template.
- Abre Window › Extensions › mouzeclick workspace y ve a Shape studio › Templates.
- Busca o filtra por categoría. Las más nuevas están en New in 2.0.
- Abre una plantilla. La vista previa en directo se reproduce y puedes pausarla y recorrerla.
- Pestaña Content: reescribe el texto y conserva el icono de la plantilla, sustitúyelo o usa material que hayas seleccionado en la composición.
- Pestaña Style: ajusta los colores. Los colores del tema se convierten en Color Controls en After Effects, así que puedes seguir cambiándolos en Effect Controls después de crearla.
- Pestaña Motion: elige uno de los ocho estilos de entrada (entre ellos fade, scale, slide up, slide left, pop y overshoot) y ajusta la posición.
- Pulsa Build template.
Si vas con prisa, créala directamente desde la cuadrícula con los valores por defecto y corrige en la composición. Las 63 plantillas que conservan una versión Classic 1.x se crean al instante con Alt-clic.
Yo suelo poner Motion en None para la tarjeta principal y animarla con una curva de los presets de easing, para que se mueva como el resto del montaje. Las entradas predefinidas las dejo para las tarjetas secundarias.
¿Cómo se anima un mock-up de UI en After Effects sin plantillas?
Construye cada tarjeta con capas de forma y de texto, precomponla y anima posición, escala y opacidad con keyframes suavizados.
- Dibuja la tarjeta con la herramienta Rectangle y sube Roundness para las esquinas. Añade una sombra paralela desde el menú Effect.
- Añade las capas de texto y un icono, y alinéalos con el panel Align.
- Selecciona las piezas y usa Layer › Pre-compose para que la tarjeta se mueva como una sola.
- Pon keyframes de Position, Scale y Opacity en la precomposición, suaviza los keyframes y ajusta la velocidad en el Graph Editor.
- Desplaza cada tarjeta siguiente unos fotogramas para escalonarlas.
- Si la vas a reutilizar, abre Window › Essential Graphics y expón el texto y los colores.
Es la opción correcta para una tarjeta principal que tiene que coincidir exactamente con un frame de Figma del diseñador. Es lenta para un vídeo de lanzamiento con doce pantallas, donde la mayoría de tarjetas solo necesitan verse bien y llegar a tiempo.
¿Qué más ayuda con vídeos SaaS y promos de producto en After Effects?
Los rigs SaaS de Motion lab, tres herramientas más del workspace y dos extensiones se encargan del movimiento alrededor de las tarjetas. En el workspace de After Effects, Motion lab tiene efectos de interfaz SaaS, entre ellos UI stagger, Depth reveal (de profundidad a foto y vuelta), 3D cursor, Proximity hover, Halftone wave, un revelado de puntos, UI carousel, Glass panel, glifos de código y un barrido degradado. Selecciona capas, elige un rig y pulsa Create; varios mantienen sus ajustes editables en un null o en Essential Graphics.
- Glass morph pone una tarjeta de cristal esmerilado detrás de las capas seleccionadas, y puedes quitarla después.
- Layout builder organiza las capas seleccionadas en una de 39 cuadrículas con nombre según el número de capas, con una cuadrícula automática a partir de cinco capas.
- Motion showcases convierte de 2 a 20 capas en un showcase de tarjetas 3D en bucle (Orbit ring, Helix stream, Depth stack) en 16:9, 4:3, 1:1, 4:5 o 9:16, de 5 a 30 segundos, listo para la cola de render.
Dos extensiones cubren el resto, y ambas funcionan en Windows y Mac. mouzesaas es un kit de animación SaaS con pantallas de apps que flotan y se inclinan, marcos de navegador, portátil y teléfono, un cursor que hace clic con ondas, texto que se escribe, contadores, gráficos de barras, líneas y donut, notificaciones y páginas con scroll, en cinco paletas o con tus propios colores. mouzeicons tiene 90 iconos de UI originales como capas de forma que se dibujan, aparecen con pop o suben con fade, en Outline, Filled o Duotone. Ambas están en la página de extensiones. Los titulares sobre la UI salen de los presets de animación de texto, y un momento de "clientes en 40 países" es trabajo para la animación de mapas.
¿Puedes meter tus propias pantallas de app en una animación UI?
Sí, de tres formas, según lo que te envíe el diseñador.
- Un icono o una imagen dentro de una plantilla. En la pestaña Content, elige tu material seleccionado en lugar del icono de la plantilla.
- Una captura de pantalla completa. mouzesaas hace flotar pantallas de apps con esquinas redondeadas y sombras suaves, dentro de un marco de navegador, portátil o teléfono.
- Un archivo por capas. Ss to ae (beta), en Motion lab, toma una captura de UI o un archivo de Photoshop o Illustrator por capas y lo reconstruye como capas de After Effects que entran animadas: slide, from centre, pop and overshoot, scale and rotate, Z-depth fade, corner o fade only, en orden de capas, de arriba abajo, de izquierda a derecha, desde el centro o aleatorio.
Pide el PSD o el archivo de Illustrator por capas además del PNG plano, para tener las capas originales del diseñador como respaldo si la reconstrucción necesita un arreglo. Ss to ae está marcado como beta, así que revisa cada capa reconstruida antes de animar encima.
¿Usar estas plantillas o comprar un pack de UI?
Usa las plantillas cuando quieras piezas editables rápido dentro de un plan que ya pagas; compra un pack cuando necesites un mismo estilo visual en decenas de pantallas. Si lo que buscas es cantidad de recursos, mira cómo se compara mouzeclick como alternativa a AEJuice. El workspace te da 81 plantillas, la mayoría en look oscuro y claro, que editas en un panel junto a las herramientas de texto, color y easing.
Para una marca con la que trabajas cada mes, crea sus tarjetas una vez, guarda la composición en el Comp Saver de la Library (por categoría, con vista previa en GIF animado) e impórtala en el siguiente proyecto. Así el vídeo del mes que viene empieza con tarjetas que ya siguen la marca.
Las plantillas vienen con el resto del workspace todo en uno para After Effects por $25 al mes, $249 al año o $499 de por vida, con una prueba de 3 días sin tarjeta. Consulta los precios.
¿Funcionan las plantillas UI en Mac?
No. Templates, los efectos de interfaz SaaS, Layout builder y Motion showcases están en el mouzeclick workspace, que forma parte de mouzeclick en Windows; la app de Mac no lo incluye. mouzesaas y mouzeicons son extensiones, así que funcionan en Windows y Mac. La página de Mac muestra lo que tiene la app de Mac.
Crea tu próxima promo de producto con las plantillas UI. Un solo plan con todo incluido: $25 al mes o $249 por un año.
Preguntas frecuentes
¿Cómo animo un mock-up de pantalla de teléfono en After Effects?
Pon la grabación de pantalla o la captura dentro de un marco de teléfono y mueve el marco, no la pantalla. mouzesaas tiene marcos de teléfono, portátil y navegador que flotan y se inclinan con esquinas redondeadas y sombras suaves, y las plantillas incluyen una dynamic island, una pantalla de llamada y notificaciones de teléfono en 3D. A mano, precompón la pantalla, enmascárala con el radio de esquina del marco y emparéntala con el marco.
¿Puedo cambiar los colores de una plantilla después de crearla?
Sí. Los colores del tema se convierten en Color Controls en After Effects, así que abre Effect Controls en la plantilla creada y cámbialos ahí. Para una paleta de marca completa, elige primero los colores en Color desk y luego crea la plantilla, para que cada tarjeta empiece con los colores de la marca.
¿Qué diferencia hay entre Templates 2.0 y Classic 1.x?
Templates 2.0 abre un editor con vista previa en directo y las pestañas Content, Style y Motion, y solo crea la plantilla cuando pulsas Build template. Classic 1.x es la versión original de 63 de las plantillas, con texto editable; un Alt-clic en una de ellas la crea al instante con sus valores por defecto.
¿Puedo hacer versiones verticales de una animación UI?
Sí. La extensión mouzeresize hace copias de una composición en 9:16, 1:1, 4:5, 4:3, 16:9, 21:9 o en tu propio tamaño, y Comp resizer en Motion lab redimensiona varias composiciones a la vez manteniendo el contenido en su sitio. Motion showcases también crea directamente en 9:16 o 4:5.
¿Puedo usar mi propio easing en una plantilla?
Sí. Pon la entrada en None en la pestaña Motion, crea la plantilla y anima tú la precomposición con una curva de Easing lab. Así el movimiento de la tarjeta va a juego con el resto de tu montaje en lugar de quedarse en un pop genérico.
¿Qué versiones de After Effects admiten las plantillas?
Los archivos del panel del workspace admiten After Effects CC 2018 o posterior. Aun así, instala la prueba de 3 días, que no pide tarjeta, y crea unas cuantas plantillas en la versión exacta de After Effects con la que entregas antes de comprometer un trabajo para un cliente con ellas.
¿Las plantillas necesitan conexión a internet?
Las plantillas se crean dentro de After Effects. mouzeclick en sí necesita conexión a internet mientras funciona, así que mantén la app conectada. Si también usas Icons in Editors, esa herramienta busca en bibliotecas de iconos online; los 90 iconos de mouzeicons vienen con la extensión.
Fuentes
Revisado el 2026-10-31. Los precios y las funciones cambian: cada enlace lleva a la página del propio fabricante.