Contenido del curso

Copies dinámicos en Figma con Google Sheets

Resumen

Conectar Figma con Google Sheets te permite gestionar copies dinámicos sin depender del equipo de diseño para cada cambio textual. Con el plugin Google Sheets Sync, marketing edita los textos en una hoja de cálculo y tú los sincronizas en segundos dentro de tus componentes.

Esto es útil para equipos que trabajan con varios idiomas, prueban variaciones de copy o necesitan una única fuente de verdad para los textos del producto.

Qué es Google Sheets Sync y cómo funciona en Figma

Google Sheets Sync es un plugin que conecta una hoja de cálculo compartida con tus capas en Figma usando nombres con hashtag como identificadores. Cada columna de la hoja corresponde a una capa del componente, y el plugin reemplaza el contenido al sincronizar [00:25].

¿Qué hace el plugin Google Sheets Sync? Lee una URL pública de Google Sheets y reemplaza el texto e imágenes de las capas de Figma cuyos nombres coincidan con los encabezados de la hoja.

Cómo preparar el archivo de Google Sheets

Antes de ir a Figma, necesitas configurar tu hoja para que sea legible por el plugin. El paso clave está en compartir el archivo con permisos abiertos para que el plugin pueda leerlo [00:50].

  • Crea una hoja en Google Sheets con los copies que vas a usar.
  • Pulsa Compartir y permite que cualquier persona con el enlace pueda acceder.
  • En la primera fila, escribe el nombre de cada capa: image, badge, title, content, button.
  • Copia la URL del archivo para pegarla en Figma.

Cada columna funciona como una variable, y cada fila representa una instancia diferente del componente.

Cómo nombrar las capas en Figma

El plugin necesita que el nombre de la capa coincida exactamente con el encabezado de la columna, precedido por un hashtag. Si escribes mal el nombre, el plugin no reconocerá la capa [01:30].

  • La capa de imagen se llama #image.
  • El badge se llama #badge.
  • El título se llama #title.
  • El contenido se llama #content.
  • El botón se llama #button.

Este detalle es la parte más sensible del flujo: un error tipográfico rompe la conexión entre la hoja y la capa.

Cómo sincronizar copies dinámicos entre Sheets y Figma

Una vez que la hoja y las capas comparten nombres, abres el plugin desde el menú de plugins de Figma, pegas la URL y pulsas Fetch & Sync. El archivo queda conectado y el contenido se pinta sobre tu instancia [02:10].

Para probarlo, puedes usar imágenes del servicio de Unsplash en la columna image, palabras como nuevo en badge, un lorem ipsum en content y enviar en button. Al ejecutar el plugin, la card refleja todos esos valores al mismo tiempo.

¿Cómo sincronizo varias cards a la vez? Selecciona todas las instancias en Figma, ejecuta Fetch & Sync, y el plugin asignará cada fila de la hoja a una card siguiendo el orden de arriba hacia abajo.

Cómo testear copies en distintos idiomas

Uno de los usos más potentes es validar cómo se comporta un componente con textos largos, como traducciones al alemán o etiquetas extensas. Puedes ver en directo si el botón se desborda o si el badge pequeño aguanta una palabra como descatalogado [03:30].

  • Prueba con tres filas distintas: nuevo, vendido y descatalogado.
  • Observa qué pasa con un lorem ipsum tipo namin velit malesuada.
  • Detecta desbordes antes de entregar el diseño a desarrollo.

Esta validación visual ahorra rondas de revisión con el equipo de producto.

Cómo limitar caracteres y personalizar estilos

En la propia hoja puedes establecer un límite de caracteres por columna, lo que ayuda al equipo de marketing a entender cuánto texto cabe en cada capa sin romper el diseño [04:15].

La documentación del plugin permite ir más allá: puedes definir códigos hexadecimales en la hoja para que un badge cambie de color según su estado. Así, nuevo aparece en un color, vendido en otro y descatalogado en uno distinto, todo controlado desde Sheets.

Por qué usar una única fuente de verdad para copies

Centralizar los textos en Google Sheets evita que cada diseñador tenga su propia versión dentro de Figma. Marketing edita una vez, y todos los archivos de diseño se actualizan al sincronizar.

Este flujo combina bien con cards que ya usan variantes y component properties, porque añade una capa más de flexibilidad sin tocar la estructura del componente. Deja tu card en los comentarios para que la comunidad la revise contigo.