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:

1. Abre el plugin desde el panel de plugins de Figma.
2. Copia la URL del archivo de Google Sheets desde el botón compartir.
3. Pega la URL en la casilla del plugin y asigna un nombre, por ejemplo, traducciones.
4. 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.