Traducciones automáticas en Figma con variables

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:12

Traducciones automáticas en Figma con variables

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 15 de 29

Clase 15 / 29

Comentarios (16)16 comentarios

Juliana Ordoñez

Hace 3 años

Sería beneficioso que proporcionara una explicación detallada del ejercicio desde el principio. Esto permitiría una comprensión más clara para todos los participantes. Dado que este curso se supone que continúa desde uno básico previo, sería apropiado enseñar desde cero para asegurar que todos tengan una base sólida.

Daniela Marchan

Hace 2 años

estoy de acuerdo. Como hacer unos ejercicios desde cero para ir practicando lo que ya hemos ido aprendiendo. Igual, el curso es entendible pero debo retroceder varias veces para entender muy bien las funciones

henry proaños

Hace 2 años

este es un curso avanzado, hay otro basico

Diego Escaño

Hace 3 años

Excelente curso Carmen, muchas gracias...

Marcela Roa

Hace 2 años

La verdad no le entiendo a esta profesora, he echo otros 5 cursos, y nunca me he sentido tan perdida y eso que ya se manejar figma a nivel intermedio.

David Aragón

Hace 2 años

Como puedo arreglar este problema de variantes? Cuando tomo instacias dependiendo si agarro izquierda o derecha y cambio las propiedades se las instancias se deforman de acuerdo a que componente agarre.

Cristina Belén Bascur

Hace 3 años

Cuando creo mi variable y quiero setearla en modo español o ingles no me deja. Cómo lo hago?

Carmen Ansio

Profesor

Hace 3 años

Hola Cristina! Tienes que crear una nueva columna justo donde aparece el icono +

Enrique Ellerker

Hace 3 años

¿Hay que tener la versión pro para poder sumar otra columna?

Gabriel Carpio Ochoa

Hace 2 años

Les dejo este link que encontré con los badge de descarga de Google y Apple para los que lo necesiten!

Thelma Martinez

Hace 3 años

hay alguna sugerencia de como realizar el ejercicio no he podido avanzar en este

Carolina Gómez

Hace un año

En esta clase se explica cómo trabajar con variables de texto para gestionar traducciones automáticamente en los componentes de un diseño.

Primero, se muestra que un componente en español puede cambiarse automáticamente al inglés si se configura correctamente. Para esto, se debe crear una colección de texto que contenga las versiones en diferentes idiomas.

Por ejemplo, se puede tener una colección con textos para "Google" y "Apple". Al definir un modo de idioma (español o inglés), se muestra el texto correspondiente en el componente según el idioma activo.

Luego, se enseña cómo vincular las variables de texto desde el panel correspondiente. Se busca la variable (por ejemplo "Google") y se aplica al texto del componente. Si el idioma predeterminado es español, ese será el texto que se muestre.

Para que los distintos idiomas funcionen correctamente, es necesario insertar el componente dentro de un Frame y definir ese Frame con un idioma específico. Si no se incluye el componente dentro del Frame, no será posible modificar el idioma desde el panel del Player.

También se ve cómo duplicar un Frame ya configurado en español, cambiar su idioma a inglés y verificar que el texto cambia automáticamente. Esto se logra porque se están utilizando variables de texto y modos que agrupan las traducciones.

Finalmente, se introduce el uso del plugin Sheets to Variables, que permite conectar Figma con una hoja de cálculo. Este plugin genera una plantilla en una spreadsheet donde se pueden gestionar fácilmente muchas traducciones fuera de Figma. Luego se importa esa hoja con un botón y se sincroniza automáticamente con las variables en Figma. Así, se pueden manejar proyectos grandes de forma más ordenada y eficiente.v

Andersson Rios Infante

Hace 2 años

Lo explica tan ligeramente y rápida que parece que estaría enseñando a expertos.

Claudia Agudelo

Hace 2 años

Para los que se perdieron en la clase, acá les va el paso a paso para crear el componente

Descargar los botones de Appstore y Gloogle play aca
Poner en texto donde dice "Disponible en y Descarga en", ya que están como imagenes
Crear cada uno como componente con jerarquía Google/light Google/dark Appstore/light Appstore/dark
Combinar como variantes

Hasta aca queda listo el componente para empezar el video como lo indica carmen y si lo hacen tal cual como ella lo explica, va a resultar.

Recuerden que por Platzi tenemos derecho a figma educacional, se debe tener en cuenta hacer el upgrade y les funciona lo de adicionar la casilla para poder poner los datos de ingles en Local variables.

Gabriel P

Hace 2 años

La opción de tener variaciones en una variable, es de figma pago...

Diana Marcela Herrera Pacheco

Hace 2 años

Hola si estas pagando platzi tienes la opción de aplicar a una cuenta educacional con figma: https://platzi.com/tutoriales/1961-figma/9683-crea-tu-cuenta-educacional-con-figma/

Javier Molina

Hace 3 años

Buenas tardes, el curso me esta gustando porque Carmen se nota que sabe mucho, eso lo primero, lo segundo es para saber si me podeis ayudar, no se porque no me funciona bien el plugin Sheets to Variables, hago los msmos pasos que Carmen, Open Template Spreadsheet, se abre google sheets, le doy a compartir, pengo enlace en el plugon, pongo el nombre de la colección, y cuando le doy al botón de importan y sincronizar me salta este mensaje.

Fernando Daniel Morales Torres

Hace 3 años

hola!!, encontraste como solucionarlo? es que me pasa lo mismo jeje

Wilson Giral

Hace 2 años

Es una explicación muy confusa, debería hacerla más comprensible desde el principio con un ejemplo de texto más sencillo

Miguel Alejandro Camacho Sánchez

Hace 2 años

Puntos Importantes de la clase

Uso de Variables de Texto:
- Permiten crear comportamientos automáticos en los componentes de Figma.
- Por ejemplo: cambiar el idioma de un componente automáticamente al cambiar de frame.
Creación de Colecciones:
- Crear colecciones de texto para gestionar múltiples idiomas (ej. Google y Apple en español e inglés).
Implementación de Componentes:
- Es necesario incluir el componente en el frame para poder aplicar la variable de texto.
- Los frames deben configurarse para mostrar el texto correspondiente según el idioma seleccionado.
Plugin "Sheets to Variables":
- Genera una spreadsheet para organizar y gestionar traducciones de forma más sencilla.
- Permite importar traducciones a Figma desde una URL de un archivo compartido.
Gestión de Traducciones en Proyectos Grandes:
- Usar el plugin para facilitar la gestión de numerosas traducciones en proyectos más complejos.
- La automatización de este proceso es más cómoda y útil para grandes volúmenes de texto.

José Miguel Tojil Gento

Hace 3 años

Excelente, Gracias!!!!!!!

CCEO Software Development

Hace un año•editado

No logro encontrar la opcion "LAYER" en la barra de herramientas, creo haberla encontrado pero se llama Appearance y el icono es distinto

Recursos

Trabajar con variables de texto en Figma te permite que un mismo componente cambie de idioma según el frame donde se ubique. Si diseñas para productos multilenguaje, esta técnica ahorra horas de duplicación y mantiene la consistencia visual entre versiones.

¿Cómo se crea una colección de variables para traducir componentes?

La lógica parte de algo simple: una colección de variables agrupa textos equivalentes en distintos idiomas y cada idioma se gestiona como un mode dentro de esa colección.

Para el ejemplo, imagina dos componentes: uno de Google Play y otro de Apple. Creas una colección llamada Google con el texto en modo español y su traducción en modo inglés. Lo mismo aplicas para Apple con su versión Descargar en. Cuando un frame esté configurado en modo español, el componente mostrará el texto en español; al cambiarlo a modo inglés, se traduce automáticamente.

¿Qué es una variable de texto en Figma? Es un valor de texto reutilizable que puedes vincular a capas y cambiar según el modo activo del frame, por ejemplo, idioma español o inglés.

¿Cómo vincular la variable al texto del componente?

Usa el componente Disponible en Google Play en su versión blanco. Selecciona la capa de texto y, desde el panel de propiedades del texto, aplica la variable buscando la colección Google y vinculándola a esa capa. El texto adopta el idioma del primer modo por defecto, que en este caso es español.

Este paso es donde muchos se atascan: la variable se conecta desde el panel lateral, no editando el texto manualmente.

¿Por qué necesito incluir el componente dentro de un frame?

Porque el modo de idioma se asigna al frame contenedor, no al componente suelto. Si arrastras el componente fuera de un frame, Figma no puede aplicar un mode sobre él.

El flujo correcto es así:

Arrastra el componente al lienzo y colócalo dentro de un frame.
Selecciona el frame y abre el panel de capa o layer.
Localiza el icono de variables y aplica el modo correspondiente, por ejemplo, badge en español.
Duplica el frame y, en el nuevo, cambia el modo a inglés.

Al seleccionar el frame en inglés verás cómo el texto del componente se traduce sin tocar nada más. Si retiras el componente del frame, el vínculo con la variable se pierde y el idioma deja de cambiar.

¿Por qué mi componente no cambia de idioma al mover el frame? Probablemente el componente no está dentro del frame o no le aplicaste el modo de variable desde el panel de capa. Sin esa jerarquía, el frame no puede sobrescribir el idioma.

¿Cómo se ven los dos idiomas funcionando juntos?

Con dos frames en el mismo lienzo, uno asignado al modo español y otro al modo inglés, el mismo componente aparece traducido en cada uno. Cambias el modo del frame y la traducción ocurre al instante, sin duplicar componentes ni mantener versiones separadas.

¿Cómo gestionar muchas traducciones con el plugin Sheets to Variables?

Cuando tu proyecto crece, escribir cada variable a mano en Figma se vuelve insostenible. Ahí entra el plugin Sheets to Variables, que conecta una hoja de cálculo externa con tu archivo y sincroniza las traducciones de forma automatizada.

El plugin genera una template base en Google Sheets donde organizas todas las traducciones por filas e idiomas por columnas. Mantienes el contenido fuera de Figma, lo editas con tu equipo y luego lo importas con un clic.

El proceso es directo:

Abre el plugin desde el panel de plugins de Figma.
Copia la URL del archivo de Google Sheets desde el botón compartir.
Pega la URL en la casilla del plugin y asigna un nombre, por ejemplo, traducciones.
Pulsa import and sync variables y espera el mensaje de confirmación.

Al cerrar el plugin y abrir el panel de variables, verás una nueva colección llamada traducciones con todas las variables ya creadas y listas para vincular a tus componentes.

¿Qué hace el plugin Sheets to Variables? Importa traducciones desde una hoja de Google Sheets y las convierte en variables dentro de una colección de Figma, sincronizando los cambios sin trabajo manual.

¿Cuándo conviene usar el plugin en lugar de crear variables manualmente?

Si tu proyecto tiene pocas cadenas de texto, crear las variables a mano es suficiente. Pero en productos con decenas o cientos de textos, especialmente cuando colaboras con equipos de localización, gestionar las traducciones desde una spreadsheet centraliza el trabajo y reduce errores. Editas en Sheets, sincronizas en Figma y todos los componentes vinculados se actualizan.

Esta combinación de variables, modos y plugin convierte un diseño multilenguaje en algo escalable. ¿Ya probaste este flujo en alguno de tus proyectos? Cuéntame en los comentarios cómo lo estás aplicando.

Resumen

¿Cómo se crea una colección de variables para traducir componentes?

La lógica parte de algo simple: una colección de variables agrupa textos equivalentes en distintos idiomas y cada idioma se gestiona como un mode dentro de esa colección.

¿Qué es una variable de texto en Figma? Es un valor de texto reutilizable que puedes vincular a capas y cambiar según el modo activo del frame, por ejemplo, idioma español o inglés.

¿Cómo vincular la variable al texto del componente?

Este paso es donde muchos se atascan: la variable se conecta desde el panel lateral, no editando el texto manualmente.

¿Por qué necesito incluir el componente dentro de un frame?

Porque el modo de idioma se asigna al frame contenedor, no al componente suelto. Si arrastras el componente fuera de un frame, Figma no puede aplicar un mode sobre él.

El flujo correcto es así:

Arrastra el componente al lienzo y colócalo dentro de un frame.
Selecciona el frame y abre el panel de capa o layer.
Localiza el icono de variables y aplica el modo correspondiente, por ejemplo, badge en español.
Duplica el frame y, en el nuevo, cambia el modo a inglés.

¿Por qué mi componente no cambia de idioma al mover el frame? Probablemente el componente no está dentro del frame o no le aplicaste el modo de variable desde el panel de capa. Sin esa jerarquía, el frame no puede sobrescribir el idioma.

¿Cómo se ven los dos idiomas funcionando juntos?

¿Cómo gestionar muchas traducciones con el plugin Sheets to Variables?

El proceso es directo:

Abre el plugin desde el panel de plugins de Figma.
Copia la URL del archivo de Google Sheets desde el botón compartir.
Pega la URL en la casilla del plugin y asigna un nombre, por ejemplo, traducciones.
Pulsa import and sync variables y espera el mensaje de confirmación.

Al cerrar el plugin y abrir el panel de variables, verás una nueva colección llamada traducciones con todas las variables ya creadas y listas para vincular a tus componentes.

¿Qué hace el plugin Sheets to Variables? Importa traducciones desde una hoja de Google Sheets y las convierte en variables dentro de una colección de Figma, sincronizando los cambios sin trabajo manual.

¿Cuándo conviene usar el plugin en lugar de crear variables manualmente?

Cómo iniciar los proyectos en Figma

Diseño responsivo en Figma con Atomic Design

Cómo construir una card con Atomic Design

Estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Cómo crear una grid de 12 columnas en Figma

Constraints en Figma para diseño responsive

Menú responsive con Auto Layout y constraints

Wrap y min/max width en Figma Auto Layout

Cómo usar el design system en Figma

Ensamblando una interfaz mobile en Figma

Breakpoints y Responsively para probar diseño responsive

Crea componentes avanzados

Componentes y variantes en Figma con Atomic Design

Propiedades de Componentes en Figma para Diseños Flexibles

Copies dinámicos en Figma con Google Sheets

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Traducciones automáticas en Figma con variables

Inteligencia Artificial para Figma

Genera iconos, copies e imágenes con Magician

Muse y Builder contra la página en blanco

Crear Landing Pages con Figma

Crea briefings y sitemaps con IA en Figma

Paleta de Colores Corporativos para Banco Transfer

Wireframes de landing page en tres secciones

Landing page responsive con Auto Layout en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Microinteracciones con variantes en Figma

Prototipado de Navegación en Figma: Interacciones y Animaciones

Prototipado avanzado con Figma

Cómo dar y recibir feedback constructivo en proyectos de diseño

Diseño Web Responsive con Figma y Atomic Design

Documentación de Diseño en Figma: Elementos y Plugins Esenciales

Cómo trabajar con los equipos de desarrollo

Dev Mode de Figma para desarrolladores

Figma dentro de Visual Studio Code

Traducciones automáticas en Figma con variables