# General Translation Knowledge Base: ¿Cómo traduzco animaciones Lottie? URL: https://generaltranslation.com/es/kb/translate-lottie-animations.mdx Docs index: https://generaltranslation.com/llms.txt Description: Traduce las cadenas de las capas de texto de la animación, almacenadas en el JSON de Lottie en t.d.k[].s.t, y después comprueba que cada traducción quepa en su cuadro, que las fuentes cubran el nuevo sistema de escritura y que ningún texto se haya exportado como formas. Puedes volver a exportar por idioma, sustituir el texto en tiempo de ejecución o modificar el JSON con un script; la CLI de General Translation traduce archivos .lottie de dotLottie 1.0 y reajusta el layout. Category: Traducción Last updated: 2026-10-28 Authors: General Translation Team Published: 2026-10-28 Una animación Lottie es un JSON, normalmente exportado desde After Effects con el plugin Bodymovin, y sus textos se encuentran dentro de capas de texto, no en un archivo de cadenas aparte. Traducirla consiste en reemplazar ese texto para cada idioma sin romper la animación. Las palabras son lo fácil; lo difícil es todo lo que las rodea: los tamaños fijos de los cuadros, las fuentes y glifos incrustados y los sistemas de escritura right-to-left. ## Dónde se encuentra el texto en un archivo Lottie El tipo de cada capa se indica con `ty`, y las capas de texto son de tipo `5`. Cada capa de texto tiene un objeto `t` cuyo documento, `t.d`, almacena los fotogramas clave en `k`; el `s` de cada fotograma clave es un documento de texto cuyo `t` es la propia cadena, con los saltos de línea representados como `\r`. Un documento de texto también especifica su fuente (`f`), su tamaño (`s`) y, en el caso del texto de un cuadro, el tamaño (`sz`) y la posición (`ps`) de la caja. El texto que cambia a mitad de la animación tiene un fotograma clave por cada cambio ([Documentación de Lottie: Text](https://lottiefiles.github.io/lottie-docs/text/), [Layers](https://lottiefiles.github.io/lottie-docs/layers/)): ```json title="animation.json (excerpt)" { "fonts": { "list": [ { "fName": "Inter-Bold", "fFamily": "Inter", "fStyle": "Bold", "origin": 0 } ] }, "layers": [ { "ty": 5, "nm": "Headline", "t": { "d": { "k": [ { "t": 0, "s": { "t": "Start your free trial", "f": "Inter-Bold", "s": 48, "sz": [600, 80], "ps": [-300, -40] } } ] } } } ] } ``` Hay otros tres lugares que conviene revisar: * **Precomposiciones.** Las composiciones anidadas guardan sus capas en `assets[].layers`, así que también puede haber capas de texto ahí, no solo en el array `layers` de nivel superior. * **Fuentes y glifos.** `fonts.list` indica el nombre de cada fuente. Si el diseñador activó la opción **Glyphs** de Bodymovin, el archivo también incluye un array `chars` con el contorno de cada carácter que utiliza; si está desactivada, el reproductor necesita el propio archivo de fuente ([Lottie: After Effects export settings](https://lottie.airbnb.tech/#/after-effects)). Los glifos se renderizan en Android y en la web, pero no en iOS, que necesita las fuentes ([Lottie: Supported features](https://lottie.airbnb.tech/#/supported-features)). * **Texto convertido en formas.** Si un diseñador convirtió el texto en formas en After Effects, este pasa a ser una capa de forma (`ty` 4) y ya no queda ninguna cadena que traducir. Hay que volver a convertirlo en capa de texto en After Effects. Un archivo `.lottie` es un paquete dotLottie: un archivo ZIP con un `manifest.json` y uno o varios archivos JSON de animación, además de imágenes y fuentes opcionales ([dotLottie 2.0 spec](https://dotlottie.io/spec/2.0/)). El texto se ubica en el mismo lugar dentro de cada JSON de animación. ## Qué falla al traducir una animación * **Expansión del texto.** Las traducciones rara vez tienen la misma longitud que el texto de origen. En el [sitio de General Translation](https://generaltranslation.com), "Save changes" ocupa un 63 % más de ancho en alemán que en inglés. Una capa de texto de un cuadro tiene un `sz` fijo, así que el texto más largo se reparte en líneas adicionales que el diseño nunca contempló, y el texto de punto (sin cuadro) puede salirse del fotograma. * **Caracteres que faltan.** Una fuente que solo incluye caracteres latinos no tiene caracteres japoneses, chinos ni árabes. Si se exportan los glifos, el archivo solo contiene los contornos de los caracteres que usaba el texto en inglés; los mantenedores de lottie-web señalan que todos los glifos del nuevo texto "must have been exported from AE" ([wiki de lottie-web](https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData)). * **Texto right-to-left.** La compatibilidad varía según el reproductor. lottie-android tiene incidencias abiertas sobre el texto right-to-left ([#1145](https://github.com/airbnb/lottie-android/issues/1145)) y sobre letras árabes que se renderizan sin ligar ([#2279](https://github.com/airbnb/lottie-android/issues/2279)). (Para la página que rodea la animación, consulta [¿Cómo admito idiomas RTL (right-to-left) en CSS?](/kb/right-to-left-css)). * **Texto generado por expresiones.** Las expresiones de After Effects son código JavaScript almacenado en el archivo (la propiedad `x`). Una capa de texto cuyo contenido proviene de una expresión se calcula mientras se reproduce la animación, así que no hay ninguna cadena fija que traducir. Antes de traducir, prueba la animación de origen con texto más largo y con acentos. (Consulta [¿Qué es la pseudolocalización?](/kb/pseudo-localization)). ## Formas de traducir una animación Lottie | Enfoque | Dónde cambia el texto | Gestiona el ajuste y las fuentes | Repetible en cada lanzamiento | Lo que queda a tu cargo | | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | Volver a exportar cada idioma desde After Effects | Un diseñador duplica la composición, edita cada capa de texto y exporta un archivo por idioma | Un diseñador ajusta cada versión a ojo | No; cada cambio de texto hay que repetirlo en cada idioma | Un archivo por idioma y horas de diseño para cada uno | | Sustituir el texto en tiempo de ejecución | El reproductor reemplaza las cadenas mientras renderiza la animación | En parte; lottie-web puede reducir el texto de un cuadro para que quepa, pero la fuente, los glifos y las capas circundantes no cambian | Sí; las cadenas provienen de las traducciones de tu app | Ajuste, cobertura de fuentes y glifos en cada idioma, además de claves estables (texto de origen o nombres de capa) | | Editar el JSON mediante un script | Un script reemplaza cada valor `s.t`, a menudo con traducción automática o un LLM | No | Sí | Saltos de línea, ajuste, fuentes, glifos y volver a comprimir los archivos `.lottie` | | CLI de General Translation | [`gt stage`](/docs/cli/reference/commands/stage) y [`gt download`](/docs/cli/reference/commands/download) generan un archivo `.lottie` traducido por idioma | El procesamiento de layout reajusta el texto y las capas cercanas con las fuentes que subas | Sí | Revisar cada animación, eliminar las expresiones y el consumo de procesamiento de layout | La sustitución en tiempo de ejecución viene integrada en los reproductores. En lottie-android, un `TextDelegate` asocia el texto de origen con el texto de reemplazo, y `LottieProperty.TEXT` lo aplica mediante propiedades dinámicas ([Lottie for Android](https://lottie.airbnb.tech/#/android)): ```kotlin // Sustituye el texto en inglés de la animación por el recurso de cadena localizado. val textDelegate = TextDelegate(animationView) textDelegate.setText("Start your free trial", getString(R.string.trial_cta)) animationView.setTextDelegate(textDelegate) ``` En lottie-ios, asigna a `animationView.textProvider` un `DictionaryTextProvider` cuyas claves sean el keypath de la capa de texto ([código fuente de lottie-ios](https://github.com/airbnb/lottie-ios/blob/master/Sources/Public/TextProvider/AnimationTextProvider.swift)). En lottie-web, llama a `updateDocumentData` sobre el elemento de la capa de texto. El método `setTextSlot` del reproductor web de dotLottie reemplaza el texto que el diseñador haya expuesto como slot ([slots de dotLottie](https://docs.lottiefiles.com/en/runtimes/distributions/js/v0.x/core-concepts/slots)). lottie-web también puede reducir el texto de un cuadro para que quepa: [`canResizeFont(true)`](https://github.com/airbnb/lottie-web/wiki/TextLayer.canResizeFont) reduce el tamaño de fuente de una capa de texto hasta que la cadena quepa en su cuadro, sin bajar del mínimo que definas con [`setMinimumFontSize`](https://github.com/airbnb/lottie-web/wiki/TextLayer.setMinimumFontSize). Ninguna de estas API mueve ni redimensiona las capas que rodean el texto, como la forma de un botón detrás de una etiqueta. Vuelve a exportar desde After Effects cuando una animación se publique en uno o dos idiomas y un diseñador quiera ajustar cada fotograma. Reemplaza el texto en tiempo de ejecución cuando las palabras provengan de tu aplicación, como el nombre de un usuario, y el cuadro tenga espacio para la traducción más larga. Elige General Translation cuando las animaciones se publiquen en muchos idiomas, cambien con cada lanzamiento y haya que reajustar los layouts para cada idioma. Modifica el JSON con tus propios scripts solo si vas a encargarte tú mismo de comprobar el ajuste del texto y las fuentes. ## Cómo traducir archivos Lottie con General Translation La CLI de General Translation, `gt`, traduce archivos dotLottie mediante la clave de archivo `lottie` (a partir de `gt` 2.16.0). Agrega una entrada `lottie` con un marcador de posición `[locale]` en la ruta: ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["es", "ja"], "files": { "lottie": { "include": ["animations/[locale]/**/*.lottie"] } }, "fonts": { "include": ["assets/fonts/**/*.{ttf,otf}"] } } ``` Las animaciones de origen se toman de `animations/en/`, y las traducciones se guardan en `animations/es/` y `animations/ja/`. La traducción de Lottie se ejecuta de forma asíncrona, así que envía las animaciones con [`npx gt stage`](/docs/cli/reference/commands/stage) y luego ejecuta [`npx gt download`](/docs/cli/reference/commands/download) hasta que todas las configuraciones regionales estén listas; las que aún se están procesando se omiten y se descargan en una ejecución posterior. [`gt translate`](/docs/cli/reference/commands/translate) no puede completar en una sola ejecución un trabajo de Lottie que no se haya preparado, y te indicará que lo prepares. Las descargas son archivos `.lottie` completos; no se publican en el CDN. General Translation lee el JSON de la animación desde la carpeta `animations/` del paquete, que corresponde al layout de dotLottie 1.0. Los paquetes de dotLottie 2.0 lo guardan en `a/`, y una animación `.json` sin más ni siquiera es un paquete. En ambos casos, conviértelos con [`@dotlottie/dotlottie-js`](https://github.com/dotlottie/dotlottie-js), cuyos `toDotLottieV1` y `DotLottieV1` generan el layout de 1.0. Tras la traducción, el procesamiento del layout conserva los tamaños de fuente de la animación, redistribuye el texto y desplaza las capas cercanas para que quepa cada etiqueta. Si una etiqueta sigue sin caber, puede acortarse o reformularse en el idioma de destino sin alterar su significado, y los puntos suspensivos quedan como último recurso; los tokens de código monoespaciados nunca se acortan. Si los cambios de layout no se pueden renderizar ni verificar, recibirás la animación traducida sin ajustes. Revisa cada descarga antes de publicarla. (Consulta la [referencia de Lottie](/docs/cli/reference/formats/lottie-files)). La opción de nivel superior [`fonts`](/docs/cli/reference/config#fonts) sube tus archivos `.ttf` y `.otf` para que el procesamiento del layout pueda usar las fuentes reales de la animación; cuando la animación incrusta glifos, General Translation añade los contornos de los caracteres que necesita cada traducción, a partir de las fuentes que hayas subido, siempre que los incluyan. Las fuentes son recursos de la Organization, así que para subirlas necesitas haber iniciado sesión (con la sesión guardada) o una Clave de API de la Organization con `org:assets:write`; una Clave de API de proyecto no puede subirlas, y en ese caso la traducción continúa con fuentes alternativas y muestra una advertencia. Los archivos con expresiones de After Effects se rechazan, porque las expresiones son código ejecutable; vuelve a exportarlos sin expresiones o con las expresiones convertidas en fotogramas clave. ### Qué cambió el procesamiento de layout en una prueba Creamos una animación de 480 × 160 de un botón en forma de píldora: un icono de 18px seguido de la etiqueta "Download invoice" en Arial Bold de 22px, con un relleno de entre 16 y 18px. La tradujimos al alemán, al francés y al japonés con `gt` 2.26.11 y una clave de API de proyecto, así que no se subió ninguna fuente y el procesamiento de layout recurrió a sus fuentes alternativas. Medimos cada etiqueta en el renderizador SVG de lottie-web 5.13 con las fuentes del navegador. Las filas de traducción completa son las traducciones que General Translation hizo de cada etiqueta como cadena simple, fuera de la animación, colocadas en el botón original para poder compararlas: | Versión | Texto de la etiqueta | Ancho de la etiqueta | Ancho del botón | Resultado | | ---------------------------- | ---------------------- | -------------------- | --------------- | ---------------------------------------------------------------------------------- | | Origen en inglés | Download invoice | 187px | 251px | Cabe, a 11px del icono | | Alemán, traducción completa | Rechnung herunterladen | 260px | 251px | Tapa el icono 25px y sobresale 18px del borde | | Alemán, General Translation | Rechnung laden | 171px | 251px | Cabe | | Francés, traducción completa | Télécharger la facture | 229px | 251px | Tapa el icono 9px y sobresale 2px del borde | | Francés, General Translation | Télécharger facture | 204px | 273px | Cabe; el botón se amplió 22px hacia la derecha y la etiqueta queda a 3px del icono | | Japonés, traducción completa | 請求書をダウンロード | 220px | 251px | Tapa el icono 5px | | Japonés, General Translation | 請求書取得 | 111px | 251px | Cabe | Todas las etiquetas conservaron su tamaño de 22px y cupieron. En alemán y en japonés se optó por formulaciones más cortas en lugar de ensanchar el botón: *Rechnung laden* ("cargar factura") y 請求書取得 ("obtener factura") son más escuetas que las etiquetas habituales. En francés se mantuvo el verbo, se eliminó el artículo y se ensanchó el botón, aunque la etiqueta quedó más pegada al icono que en el original. Decidir si es aceptable una formulación más corta o un espacio más reducido le corresponde a quien revise, y los resultados pueden variar de una ejecución a otra. Otra animación de la misma prueba tenía un botón "Save changes" de 180px. El resultado fue *Speichern*, *Enregistrer* y 保存, las etiquetas cortas habituales, que cupieron sin ningún cambio de layout. En esa misma ejecución, su encabezado, "Your changes are ready", se tradujo al japonés como 変更内容を保存できます ("Puedes guardar tus cambios"), un cambio de significado que solo detectaría una persona al leer el resultado. La traducción de Lottie conlleva un cargo de procesamiento de layout, que se cobra aparte de la traducción y se calcula según el número de propiedades animadas de la animación ([medición del uso](/docs/platform/dashboard/guides/managing-billing#usage-metering), [precios](https://generaltranslation.com/pricing)). Los términos del glosario y los prompts personalizados de tu [grupo de contexto](/docs/platform/dashboard/guides/defining-context-for-translations) también se aplican al texto de las animaciones, de modo que el nombre de una funcionalidad en una animación de onboarding coincide con el de tu aplicación y tus [archivos de configuración regional JSON](/kb/translate-json-files). ## Preguntas frecuentes ### ¿Por qué mi animación traducida muestra recuadros vacíos o letras que faltan? La fuente o los glifos incrustados no incluyen los nuevos caracteres. Distribuye una fuente que admita el sistema de escritura. Si exportas glifos, el archivo necesita un contorno para cada carácter que use la traducción, así que vuelve a exportar ese idioma desde After Effects con el texto traducido ya incorporado. ### ¿Necesito un archivo independiente para cada idioma? Con la sustitución en tiempo de ejecución, no: un único archivo sirve para todos los idiomas. Tanto la reexportación como la CLI de General Translation generan un archivo por idioma, que se carga según la configuración regional. ### ¿Puedo traducir texto que se haya convertido en formas? No. Las formas no contienen ninguna cadena que reemplazar, así que vuelve a crear la capa de texto en After Effects y exporta de nuevo. ## Conclusiones clave * El texto de Lottie se encuentra en las capas de texto (`ty` 5), en `t.d.k[].s.t`, incluidas las capas de texto de las precomposiciones dentro de `assets`. * Las exportaciones de glifos solo incluyen los contornos de los caracteres del texto de origen, e iOS no renderiza glifos; comprueba que haya fuentes para cada sistema de escritura que agregues. * Las API de tiempo de ejecución (`TextDelegate`, `DictionaryTextProvider`, `updateDocumentData`, `setTextSlot`) reemplazan cadenas; la opción `canResizeFont` de lottie-web puede reducir el texto de un cuadro para que quepa, pero ninguna de ellas desplaza las capas de alrededor. * La CLI de General Translation traduce archivos `.lottie` de dotLottie 1.0 mediante [`gt stage`](/docs/cli/reference/commands/stage) y [`gt download`](/docs/cli/reference/commands/download), reajusta los layouts con las fuentes que subas y rechaza los archivos que contienen expresiones. * En nuestra prueba, el procesamiento de layout conservó los tamaños de fuente y logró que cupieran todas las etiquetas, ya fuera ensanchando un botón o acortando el texto; revisa cada descarga para comprobar la redacción y el espaciado. * El procesamiento de layout para Lottie se cobra aparte, en función de las propiedades animadas de la animación. ## Related questions - [¿Cómo traduzco archivos JSON de i18n?](https://generaltranslation.com/es/kb/translate-json-files.mdx): Traduce solo los valores de cadena de un archivo JSON de configuración regional. No modifiques las claves no plurales, los marcadores de posición como {{name}} ni las etiquetas, pero ten en cuenta que las claves plurales varían según el idioma: el polaco necesita inbox_few e inbox_many. Usa una herramienta o API que reconozca el formato y, después, analiza y valida el resultado antes de revisarlo. - [¿Cómo doy soporte a idiomas RTL (right-to-left) en CSS?](https://generaltranslation.com/es/kb/right-to-left-css.mdx): Coloca dir="rtl" y lang en el elemento html, ya que lang por sí solo no cambia la dirección, y luego sustituye el CSS físico, como margin-left, por propiedades lógicas, como margin-inline-start. Las filas flex, las columnas de grid y la alineación de texto predeterminada se invierten solas; translateX(), left y right, no. - [¿Qué es la pseudolocalización?](https://generaltranslation.com/es/kb/pseudo-localization.mdx): La pseudolocalización es una prueba que sustituye tu texto de origen por una versión alterada (con acentos, alrededor de un 40 % más larga y entre corchetes) para que las cadenas codificadas de forma fija, el truncamiento, las fuentes rotas y las oraciones concatenadas salgan a la luz antes de que exista ninguna traducción. Android incluye para ello las pseudoconfiguraciones regionales en-XA y ar-XB. - [¿Cómo traduzco Google Slides?](https://generaltranslation.com/es/kb/translate-google-slides.mdx): Copia la presentación una vez por idioma, reemplaza el texto de cada cuadro de texto, celda de tabla y nota del orador, y ajusta el tamaño del texto que se desborde. La integración de Google Drive de General Translation guarda cada idioma en su propia copia junto a la presentación de origen y aplica una pasada de formato para adaptar el nuevo texto a cada diapositiva. - [¿Cómo traduzco subtítulos SRT sin alterar la sincronización?](https://generaltranslation.com/es/kb/translate-srt-subtitles.mdx): Traduce solo el texto de los subtítulos de un archivo SRT; conserva los números de subtítulo, los códigos de tiempo, las líneas en blanco que los separan y las etiquetas de formato tal como aparecen en el origen. Después, comprueba que la longitud de línea y la velocidad de lectura cumplan los requisitos de tu destino: la guía de Netflix para inglés, por ejemplo, admite 42 caracteres por línea y 20 caracteres por segundo en programas para adultos. ## Previous and next questions - Previous question: [¿Cómo mantengo la coherencia terminológica en la traducción con IA?](https://generaltranslation.com/es/kb/ai-translation-glossary.mdx) - Next question: [¿Cómo traduzco archivos .resx en una aplicación .NET?](https://generaltranslation.com/es/kb/translate-resx-files.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.