Plugin Google Sheets Sync: Sirve para gestionar los copies de los componentes haciéndolos dinámicos por medio de Google Sheets, de tal modo que el equipo de marketing, los copywriters y UX writers puedan modificar directamente los contenidos de texto de componentes como cards. Con lo cual se podrá tener una única fuente de verdad que son los copies fuera de Figma y que asÃ, los contenidos dependan de su edición directa desde Google Sheets.
.
¡¡Valioso asset hemos aprendido en esta clase!!
Cómo iniciar los proyectos en Figma
Landing Page responsive
Atomic Design en Figma
Uso de librerÃas en Figma
Quiz: Cómo iniciar los proyectos en Figma
Diseño Responsive y Técnicas Avanzadas
Uso de Grids
Uso de Constraints
Constraints y Layout
Propiedades Wrap, Min y Max en Autolayout
Sistemas de Diseño
Prototipado mobile
Prototipado Desktop
Quiz: Diseño Responsive y Técnicas Avanzadas
Crea componentes avanzados
Uso de Variants
Component properties
Implementa Component properties
Quiz: Crea componentes avanzados
Variables en Figma
Cómo usar las variables de Figma para colores y tamaños
Cómo usar las variables de texto en Figma: traducciones automáticas
Quiz: Variables en Figma
Inteligencia Artificial para Figma
Funcionalidades de Inteligencia Artificial (IA) en Figma
Inteligencia Artificial para proyectos de diseño Figma
Crear Landing Pages con Figma
Diseño de una Landing Page para el sector de Banca: briefing de diseño con IA
Diseño de una Landing Page para el sector de banca: paleta de colores
Diseño de una Landing Page para el sector de Banca
Diseño de una Landing Page para el sector de Banca: prototipado
Interacción Avanzada con Prototipos
Cómo crear interacciones con los componentes
Interacciones en la card
Prototipado de navegación
Quiz: Interacción Avanzada con Prototipos
Prototipado avanzado con Figma
¡Comparte tu landing page, entrega y recibe feedback de la comunidad!
Las mejores landings creadas con Figma
Documentación para el desarrollo en Figma
Quiz: Prototipado avanzado con Figma
Cómo trabajar con los equipos de desarrollo
Colaboración con desarrollo: Dev Mode de Figma
Colaboración con Desarrollo: Figma y Visual Studio Code
Quiz: Cómo trabajar con los equipos de desarrollo
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Implementa Component properties
13/30Recursos
Aportes 20
Preguntas 9
Ordenar por:
Excelente Plugin!!
Nombre del plugin: Google Sheets Sync
muy bueno el plugin, me gusto
En lo personal, el plugin me resultó muy complicado. HabÃa veces que funcionaba, pero otras fallaba…
Qué gozo! :), gracias.![]()
**ERROR FETCHING IMAGE**
Al parecer el error se debe al bloqueo de imágenes por parte del banco de imágenes, en el ejemplo de la clase se uso un link que trae imágenes random, de esa forma sà funciona pero si copias uno en especifico puede darte error y más si es de un banco de imágenes (hice la prueba con los más comunes), da error hasta con google drive.
**¡Solución!**
Leyendo la documentación del plugin sugiere que las imágenes terminen en formato ‘.jpg’, ‘.png’ o ‘.gif’ (dejo al final el link del ejemplo en figma del creador)
En mi caso utilicé un "lorem ipsum" de imágenes y problema resuelto, imagino que en un proyecto real se tendrán las imágenes alojadas en un sitio donde no de este problema.
Los links que usé
* <https://picsum.photos/700/400?random>
* <https://api.lorem.space/image/game?w=150&h=220>
**Archivo figma creador**
<https://www.figma.com/file/mkrEZ5349ZMYln2S5BsxVO/Google-Sheets-Sync-%E2%80%93-Demo-file?type=design&node-id=6-66&mode=design&t=H7RIgIsR3aoguWRT-0>
### **Puntos importantes de la clase:**
1. **Google Sheets Plugin**:
* Este plugin permite conectar un archivo de Google Sheets con Figma para obtener copies dinámicos.
* Los textos (copies) y otros elementos del diseño se sincronizan directamente desde Google Sheets, evitando la necesidad de gestionar manualmente en Figma.
2. **Creación de una página en Google Sheets**:
* Se debe crear una página con columnas que representen cada capa del componente en Figma (imagen, tÃtulo, contenido, botón, etc.).
* Compartir el archivo para que sea accesible públicamente.
3. **Configuración en Figma**:
* Cada capa de Figma debe llevar el mismo nombre que la columna correspondiente en Google Sheets (usando hashtags, por ejemplo, #Image, #Title, etc.).
* Se crea una instancia del componente y luego se sincroniza con Google Sheets a través del plugin.
4. **Ventajas**:
* Facilita el trabajo en equipo, especialmente con el equipo de marketing, ya que pueden editar el contenido desde Google Sheets.
* Es útil para trabajar con copias en varios idiomas, ya que permite probar el diseño con textos más largos o cortos.
* Permite establecer lÃmites de caracteres para asegurar que los textos no se desborden en el diseño.
5. **Pruebas con Variantes**:
* Se pueden crear varias filas en Google Sheets para representar distintas variantes de una misma carta (por ejemplo, con distintos textos y etiquetas).
* Sincronizar el contenido actualizado con Figma es sencillo y rápido.
6. **Limitaciones y Consejos**:
* Es fundamental que los nombres de las columnas en Google Sheets coincidan exactamente con los nombres de las capas en Figma.
* El plugin permite testear no solo textos sino también variaciones de imágenes, etiquetas y botones.
7. **Plugin adicional: "Hatch Specs"**:
* Se menciona la utilidad de este plugin para documentar variantes y propiedades de los componentes, permitiendo a otros miembros del equipo ver cómo se comportan los diferentes elementos del diseño.
Aquà está mi prueba del plugin, muy interesante la verdad 
Yo hice la prueba con cada una de las columnas y me funciono fenomenal, gracias excelente plugins
muy buen plugin
no pude usar el plugin :cc
Excelente plugin:
Mi aporte de esta clase:
Me gusto mucho este plugin
![]()![]()
![]()
 9.42.09 p. m.>)
![]()![]()
```js
```
He aprendido muchÃsimo en estas clases!! Me encanta este curso. Super gracias Carmen <3
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?