Copies dinámicos en Figma con Google Sheets

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:006:43

Copies dinámicos en Figma con Google Sheets

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

Clase 13 de 29

Clase 13 / 29

Recursos

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.

Carolina Gómez

Hace un año

Resumen: Sincronización de copies dinámicos desde Google Sheets en Figma

Objetivo:

Aprender a conectar un archivo de Google Sheets con Figma para gestionar textos (copies) de forma dinámica y eficiente, especialmente útil para equipos de Marketing y Diseño.

Pasos para la integración:

Crear archivo en Google Sheets:

En la primera fila de la hoja, escribe los nombres de los elementos que vas a usar como campos: mathematicaCopiarEditarImage | Badge | Title | Content | Button

Nombrar las capas en Figma:

En Figma, nombra las capas exactamente igual, pero con # al inicio: lessCopiarEditar#image, #badge, #title, #content, #button

Instalar y usar el plugin de Google Sheets Sync:
- Comparte tu archivo de Google Sheets con permisos públicos (cualquier persona con el enlace puede ver).
- Copia el enlace.
- En Figma, abre el plugin "Google Sheets Sync" y pega el enlace.
Sincronizar los datos:
- Asegúrate de que los nombres de las capas y columnas coincidan exactamente.
- Haz una instancia del componente que quieres poblar con datos.
- Ejecuta el plugin con "Run" para cargar la información en Figma automáticamente.

Ventajas:

Ahorra tiempo: No necesitas insertar manualmente los textos cada vez.
Prueba de contenido multilingüe: Permite verificar cómo se ven los textos en otros idiomas (ej. alemán).
Visibilidad en tiempo real: Equipos de marketing y producto pueden ver el resultado directamente.
Control de caracteres: Puedes limitar la cantidad de texto para evitar desbordes de diseño.
Diseño adaptable: Útil para validar componentes como botones, badges, títulos, etc.

Tips útiles:

Puedes cambiar estilos según el contenido (ej. badge con color diferente si dice “nuevo”, “vendido” o “descatalogado”), configurando eso también desde la hoja de cálculo.
Al duplicar filas en Google Sheets, puedes probar con diferentes escenarios de contenido.
El orden de las filas en Sheets determina el orden en que se llenan los componentes en Figma.

Conclusión:

Este flujo de trabajo facilita la colaboración entre diseño y contenido, asegurando una fuente única de la verdad (Google Sheets), y permite validar diseños con contenido real o simulado (Lorem Ipsum).

Comentarios (33)33 comentarios

Pedro Isaac Aguilar

Hace 3 años

Donovan RM

Zulema Vicente Paca

Jhon Sebastian Arias Machado

Miranda María Guerrero

Cristina Belén Bascur

Aide Ruiz Rebolledo

Hace 2 años

Darwin Perez

David Aragón

Miguel Alejandro Camacho Sánchez

Liliana Perico

Eliseo Baquero

Hace 7 meses

Nayfer Carolina

Carmen Ansio

Profesor

Bernardo Gutierrez

David Pérez

Alexis Cova

Alejandra Gámez

Daniel Lince

Clever David Cardenas Medina

Hace 5 meses

Ester Sarai Galvez V.

Ivan Gonzalez Gonzalez

Hace 10 meses

Melissa Ortíz

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

Copies dinámicos en Figma con Google Sheets