En este tutorial rehaceré y traduciré al español un flujo completo para crear animaciones Lottie en Figma, explicando desde la creación de marcos iniciales hasta la exportación usando LottieFiles. Es ideal para diseñadores y desarrolladores que quieran integrar animaciones ligeras en aplicaciones y sitios web, y sirve como guía práctica si trabajas en proyectos de aplicaciones a medida o software a medida.

Requisitos previos: una cuenta gratuita de Figma y el plugin LottieFiles para exportar animaciones. También es útil conocer conceptos básicos de prototipado y componentes en Figma.

Crear los marcos y formas iniciales de la animación Lottie Empieza con la herramienta Frame tecla F y crea un marco de 850 x 850 px. Con la herramienta Elipse tecla O agrega un círculo de 500 px y rellénalo con un color oscuro. Duplica ese círculo con Control-D y cambia el segundo relleno a un amarillo vibrante. Renombra las capas para mantener consistencia durante la animación.

Duplica el marco original cuatro veces para obtener cinco estados. Ajusta el espaciado entre marcos para que la vista no esté congestionada y modifica el tamaño de los círculos amarillos en los primeros tres marcos, centrando cada círculo en su marco. Cambia el color de ciertos círculos entre marcos para definir las etapas principales; así Smart Animate podrá interpolar los fotogramas intermedios correctamente.

Añadir una estrella a la animación Usa la herramienta Estrella para colocar una estrella de 350 px en el centro del primer marco. Mantén 5 puntas, ratio 50 por ciento y radio 20. Copia esa estrella a los demás marcos y cambia el color de las copias intermedias a amarillo. En el segundo marco reduce el tamaño de la estrella a 250 px y ajusta su radio para dar sensación de profundidad.

Organizar correctamente los activos Al tercer marco agrégale varios círculos pequeños alrededor de la estrella usando la herramienta Elipse. Copia esos círculos al cuarto marco y cámbialos a blanco. Pégalos también en el segundo marco y colócalos detrás de la estrella para que parezca que emergen desde atrás hacia su posición final en el tercer marco. Copia los mismos pequeños círculos a los marcos primero y quinto y asegúrate de que las estrellas estén por delante usando la orden de apilar en Figma.

Consejo importante: los nombres de las capas deben ser idénticos en todos los marcos para que Smart Animate identifique correctamente los elementos que deben interpolarse. Mantén el mismo orden de objetos en cada capa para evitar saltos inesperados en la animación.

Crear la animación en Figma Cambia de modo Design a Prototype. Conecta el primer marco con el segundo y configura la interacción usando Smart Animate como tipo de animación, ajustando easing y duración a tus necesidades. Repite el proceso conectando el segundo con el tercero, el tercero con el cuarto, el cuarto con el quinto y finalmente el quinto con el primero para crear un bucle. Smart Animate rellenará las transiciones entre estados.

Exportar a Lottie con LottieFiles Para convertir la animación, abre el menú de Acciones rápidas Control-/ y busca el plugin LottieFiles. Ejecuta el plugin y crea una cuenta en lottiefiles.com si no la tienes. Asegúrate de añadir un Flow en Prototype para el primer marco y selecciona ese Flow dentro del plugin. Previsualiza la animación y guarda en tu carpeta de proyectos en LottieFiles si todo está listo. Ten en cuenta que LottieFiles puede imponer un límite de exportaciones gratuitas antes de solicitar un plan de pago.

Uso de texto en animaciones Lottie con Figma Añade texto con la herramienta Texto tecla T, por ejemplo la palabra Loading, elige un tamaño de fuente adecuado y activa la opción Cap height to baseline si tu tipografía la soporta. Crea tres pequeños círculos de 10 px con colores distintos y colócalos junto al texto. Convierte el texto y los puntos en un compound path o componente para controlarlos como unidad.

Animación de texto con un conjunto de componentes Crea un componente principal con variantes que representen cada estado de los puntos de carga. En la variante por defecto haz invisibles los puntos ajustando la opacidad al 0 por ciento. Crea variantes sucesivas moviendo cada punto hacia la derecha dejando espacios de 8 px entre ellos. Añade variantes que simulen el desplazamiento o la aparición de cada punto y enlaza las variantes en Prototype usando Smart Animate para conseguir la animación de los puntos de carga.

Previsualización y exportación final Desde Prototype abre de nuevo el plugin LottieFiles y previsualiza el resultado final. Guarda la animación si estás conforme. Si necesitas usar la animación dentro de Figma recuerda que Figma no reproduce directamente archivos JSON Lottie; puedes insertar animaciones como GIF o MP4, aunque la importación de MP4 requiere suscripción y hay límites de tamaño para GIF si no tienes plan en LottieFiles.

Limitaciones y alternativas Si tu animación Lottie proviene de After Effects tienes la opción de exportarla como GIF de mayor tamaño y luego importarla en Figma para previsualizar dentro del diseño. Para producción en web o aplicaciones lo recomendable es usar el JSON Lottie en el front end con librerías como lottie-web o integrarlo en apps móviles nativas para mantener ligereza y rendimiento.

Aplicaciones empresariales y servicios relacionados en Q2BSTUDIO En Q2BSTUDIO desarrollamos soluciones a medida que integran animaciones Lottie en aplicaciones y experiencias interactivas. Ofrecemos servicios de software a medida y aplicaciones a medida que incluyen diseño de UI, animaciones optimizadas y despliegue en entornos cloud. Si buscas una solución completa para llevar tus prototipos animados a productos reales visita nuestra página de desarrollo de aplicaciones y software multiplataforma Desarrollo de aplicaciones y software multiplataforma.

Además, en Q2BSTUDIO combinamos inteligencia artificial y automatización para mejorar flujos de trabajo y experiencias de usuario. Si quieres incorporar IA en tus productos o explorar agentes IA para atención y automatización, conoce nuestros servicios de inteligencia artificial para empresas en Inteligencia artificial. También cubrimos necesidades de ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, asegurando soluciones robustas y escalables.

Palabras clave y posicionamiento Para mejorar el posicionamiento de tu proyecto considera integrar términos como aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi en la documentación, metadatos y descripciones de producto. Estos términos ayudan a conectar búsquedas técnicas con servicios reales que ofrecemos en Q2BSTUDIO.

Resumen rápido y buenas prácticas Mantén nombres y orden de capas consistente, aprovecha Smart Animate para interpolaciones, organiza tus activos en cada marco, usa componentes y variantes para animaciones repetibles y exporta con LottieFiles cuidando límites de cuenta. Para producción usa el JSON Lottie en el front end para mantener calidad y rendimiento.

Si deseas que implementemos animaciones Lottie dentro de una aplicación a medida, que integremos IA para personalizar la experiencia o que despleguemos la solución en entornos cloud seguros, contáctanos en Q2BSTUDIO. Podemos acompañarte desde la idea hasta la puesta en producción, incluyendo pruebas de ciberseguridad, integración con Power BI para inteligencia de negocio y despliegue en servicios cloud AWS y Azure.

Esperamos que este tutorial te ayude a dominar Lottie en Figma y a aplicar estas técnicas en tus proyectos profesionales y productos digitales. Si quieres más guías avanzadas sobre animaciones, optimización y flujos de trabajo para equipos de producto, consulta nuestros recursos y habla con nuestro equipo para una solución a medida.