Visión General del Plugin de Diseño
El Plugin de Diseño de Percus conecta las herramientas de diseño que usa nuestro equipo con la plataforma Percus. La primera implementación es un plugin para Adobe After Effects que permite a los motion designers preparar, validar y subir templates de video personalizado directamente desde su entorno de diseño — sin exportaciones manuales, pasos técnicos complejos ni coordinación con desarrolladores para cada cambio.
Por qué existe
En el flujo de trabajo actual, mover un template desde After Effects a la plataforma requiere múltiples pasos manuales: exportar archivos, escribir documentos de mapeo de capas, probar la inyección de datos por separado y coordinar con desarrolladores en cada cambio. Esto genera fricción, ralentiza los proyectos y es una fuente frecuente de errores.
El plugin hace este proceso fluido: el diseñador marca las capas variables directamente en AE, valida la inyección de datos en tiempo real y publica en la plataforma con un clic.
Especificación principal
Describe en qué se busca convertir al plugin. Para lo que el plugin hace hoy, ver El panel más abajo. Lo que aún no está construido está marcado.
1. Exportación compatible con Smart-Render
- Exporta metadatos en JSON que describen la estructura del template — no un video final renderizado
- La exportación está diseñada para ser compatible con la arquitectura de renderizado del lado del cliente (Percus Player)
- Los campos variables, el timing y la lógica se capturan en un formato que el motor de bindings puede consumir
- Este enfoque garantiza que los datos PII nunca necesiten enviarse a un servidor de renderizado
2. Herramientas de personalización y datos
- Mapeo de capas a API — los diseñadores etiquetan capas directamente en After Effects para marcarlas como variables (texto, imagen, audio)
- Lógica de "Película Programable" — define secuencias condicionales (reglas if/else) que determinan qué escenas se reproducen según los valores de los datos
- Etiquetado de PII — los campos de datos sensibles se marcan para que el runtime aplique el manejo de seguridad adecuado
3. Diferenciación con IA (no implementado)
Ninguna de las capacidades de esta sección está construida. Hoy no hay funcionalidad de IA en el plugin.
- Módulo de compliance de industria — verificaciones asistidas por IA para asegurar que el contenido cumpla con los requisitos regulatorios financieros
- Asistente de QA con IA — genera automáticamente casos de prueba y verifica que todas las combinaciones de variables rendericen correctamente antes de publicar
- Locución multilingüe — integración con motores de voz con IA (ej. ElevenLabs) para generar locuciones naturales en múltiples idiomas y acentos regionales directamente desde el proyecto de AE
- Autenticación de contenido — verificación con IA de que el contenido publicado no ha sido alterado
- Generador de casos de prueba con IA — crea automáticamente conjuntos de datos representativos para hacer stress-test de todas las variantes de la animación
4. Higiene y usabilidad
- Subida directa a la consola de Percus sin salir de After Effects
- Gestor interactivo de assets (no implementado) — navegar y gestionar recursos de la plataforma desde el panel del plugin
- Soporte para A/B testing (no implementado) — definir múltiples variantes de animación y etiquetarlas para pruebas de campaña
Principios de diseño UX / UI
Estética nativa de AE
La interfaz del plugin imita el look and feel de los paneles de Adobe After Effects — tema oscuro, dimensiones estándar de panel, controles familiares — para que los diseñadores se sientan cómodos y la fricción de adopción sea mínima.
Gestión visual de variables
- Etiquetado con un clic — marcar cualquier capa como campo variable con un solo clic
- Preview en vivo con datos — inyectar valores de datos de muestra para ver cómo se ve la animación con contenido real antes de publicar
- El panel de variables muestra todas las capas marcadas con su tipo de dato y valor de prueba actual
Sistema de QA "Semáforo"
Cada campo variable se marca con un indicador de estado:
| Estado | Significado |
|---|---|
| 🟢 Verde | El campo está correctamente vinculado y los datos de prueba renderizan sin problemas |
| 🟡 Amarillo | El campo está vinculado pero puede tener casos borde (ej. desbordamiento de texto) |
| 🔴 Rojo | El campo tiene un error de binding o no renderiza correctamente |
Esto da a los diseñadores retroalimentación visual inmediata sin necesidad de ejecutar el pipeline de render completo.
Librería de Componentes Inteligentes (nice-to-have)
Una librería curada de componentes de animación pre-construidos (intros, visualizaciones de datos, CTAs, outros) que los diseñadores pueden arrastrar a su proyecto y personalizar — acelerando la creación de templates para casos de uso comunes.
Flujo de publicación en un clic
- El diseñador marca todas las capas variables
- El plugin valida los bindings y ejecuta el QA con IA
- Se muestran los flags rojos/amarillos con una descripción
- El diseñador resuelve los problemas y dispara la subida
- El template aparece en la plataforma Percus listo para usar
Accesibilidad automática
- Subtítulos — pistas de subtítulos generadas automáticamente por IA a partir de datos de audio/guión
- Transcripción — se genera una transcripción de texto y se adjunta al template para soporte de lectores de pantalla
Flujo de trabajo del diseñador
Proyecto de After Effects
└── 1. Marcar capas variables (texto, imagen, audio) usando el panel del plugin
└── 2. Preview con datos en vivo — verificar que todas las variantes rendericen correctamente
└── 3. Ejecutar QA con IA — revisión semáforo de todos los bindings
└── 4. Resolver cualquier flag rojo/amarillo
└── 5. Publicar con un clic → el template aparece en la plataforma Percus
Estado actual
El plugin está construido y en uso productivo. Los motion designers autoran, exportan y publican templates con él hoy; es el único camino soportado desde After Effects hasta un template publicado en Percus.
El plugin de After Effects sigue siendo el único entorno objetivo. La integración con otras herramientas de diseño (Figma, Adobe Premiere) podrá considerarse en fases posteriores según la demanda.
El panel
El plugin agrega un panel en After Effects con seis pestañas, siguiendo el orden de autoría.
| Pestaña | Qué hace |
|---|---|
| Template | Configuración del proyecto, formato de render y autoría por capa — seleccionar una capa y darle un nombre de CTA, un link de CTA u otro rol de personalización |
| Data | Declara los datos que el template espera, sus tipos y fallbacks, y las expresiones que calculan valores derivados |
| Composition Manager | Registra qué composiciones pertenecen al template y cómo coinciden con un viewer, que es lo que impulsa el ruteo de variantes |
| Subtitles | Pistas de subtítulos temporizados por idioma, y la transcripción completa usada como alternativa de accesibilidad |
| Export | Produce la exportación Lottie desde las composiciones registradas, o reutiliza una exportación existente |
| Publish | Selecciona organización, proyecto y ambiente, revisa las composiciones y bindings que se enviarán, y publica en la plataforma |
La pestaña Publish enlaza de vuelta al backoffice para que el diseñador confirme qué llegó.
Qué produce el plugin
Publicar produce los assets que consume el player, descritos en la Referencia del manifiesto del player:
- la animación Lottie y cualquier animación por variante,
- el video de fondo y las pistas de audio,
- los artefactos de fuentes vectorizadas, para que el texto personalizado se renderice sin webfont en tiempo de ejecución,
- el manifiesto que declara el esquema de datos, los campos computados, las reglas de ruteo de variantes, las interacciones y las pistas de accesibilidad.
El diseñador no escribe el manifiesto a mano — las decisiones de autoría del panel son las que lo generan.