Sincronización de Google Sheets con Figma para gestión de copies

Clase 13 de 30 • Curso de Figma: Técnicas Avanzadas de Diseño

Pedro Isaac Aguilar

student•

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!!

Donovan RM

student•

Excelente Plugin!!

Zulema Vicente Paca

student•

Nombre del plugin: Google Sheets Sync

Jhon Sebastian Arias Machado

student•

muy bueno el plugin, me gusto

Miranda María Guerrero

student•

En lo personal, el plugin me resultó muy complicado. Había veces que funcionaba, pero otras fallaba...

Cristina Belén Bascur

student•

Falla xq seguro te confundiste al nombrar los elementos.

Aide Ruiz Rebolledo

student•

Qué gozo! :), gracias.

Darwin Perez

student•

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é

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

David Aragón

student•

La otra es abrir la imagen en otra ventana y copiar el link

Aide Ruiz Rebolledo

student•

En Unsplash das click derecho, copy image adress.

Miguel Alejandro Camacho Sánchez

student•

Puntos importantes de la clase:

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.
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.
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.
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.
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.
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.
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.

Liliana Perico

student•

Nayfer Carolina

student•

¿Cómo solucionar cuándo sale error en la imagen (Error fetching image)?

Carmen Ansio

teacher•

¡Hola Nayfer!

¿Te refieres al utilizar el plugin de Google Sheets sync?

Bernardo Gutierrez

student•

Hola buenas tardes 2 consultas:

¿cómo genero el cambio de color en el budge? Agregué una columna en el google sheets y pegué el hexadecimal, pero ¿debería tener el budge dividido por texto y forma en el figma, no entiendo como hacerlo? porque no está funcionando.
Veo que varios tienen la misma duda...¿cómo copio el link de unsplash porque me tira error?, lo demás me lo modifica. Fui desde el plugin de figma que no se como copiar la url y lo hice tmb desde la pagina de unsplash y tampoco funcionó. E inicie sesión desde ambos y tampoco funciona

Carmen Ansio

teacher•

Hola!! Te adjunto una plantilla para que puedas comprobar si de esta forma te funciona Plantilla para Google Sheet

Bernardo Gutierrez

student•

Hola gracias no me doy cuenta como chequearlo. Será posible agregar una pequeña clase que explique en detalle esta parte del google sheets paso a paso porque somos varios con la misma duda y a todos nos pasa lo mismo. Gracias.

David Pérez

student•

Aquí está mi prueba del plugin, muy interesante la verdad

Alexis Cova

student•

Yo hice la prueba con cada una de las columnas y me funciono fenomenal, gracias excelente plugins

Cristina Belén Bascur

student•

muy buen plugin

Alejandra Gámez

student•

no pude usar el plugin :cc

Jose Daniel Lince

student•

Volviste a correr el plugin? Pensé que no me funcionaba pero después de correrlo de nuevo me funcionó

Ivan Gonzalez Gonzalez

student•

Melissa Ortíz

student•

Hola, cómo puedo obtener la url de la imagen en Unspalsh?

Carmen Ansio

teacher•

Hola!! Aquí tienes el enlace al archivo

YESICA AGUIRRE PIEDRAHITA

student•

Hola, tengo una duda con el cambio de la imagen, no me quiere dejar hacerlo, tomé un link de unsplash y lo agrague al sheets, pero no pasa nada. me sale error

Carmen Ansio

teacher•

Hola Yesica! Recuerda que la columna en sheets y el nombre de la capa de la imagen deben llamarse igual. Si tienes el error, puedes compartirme el archivo y lo reviso 🥰

Daniel Jiménez Prestan

student•

¿Cómo puedo generar los links de las imágenes de Unsplash? ¿Debo crear cuenta?

Carmen Ansio

teacher•

¡Hola Daniel! Puedes utilizar el plugin de Unsplash sin necesidad de crear una cuenta 😊

Juliana Ordoñez

student•

¿Hay alguna solución más práctica si la nueva hoja compartida no sirve para el ejercicio personal del proyecto? Gracias.

Sincronización de Google Sheets con Figma para gestión de copies

Cómo iniciar los proyectos en Figma

Diseño Responsive y Prototipado Avanzado en Figma

Atomic Design: Creación de Componentes en Figma

Gestión de estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Diseño Responsive y Grids en Figma

Uso de Constraints para Diseños Responsive en Figma

Menú Responsive en Figma: Uso de Constraints y Auto Layout

Nuevas Funciones de AutoLayout en Figma para Diseños Responsive

Montaje de Diseño Responsive con Figma: Mobile y Desktop

Creación de Interfaces Responsivas en Figma

Diseño de Interfaces Responsivas en Figma: Uso de Plugins y Breakpoints

Crea componentes avanzados

Creación de Componentes y Variantes en Figma

Propiedades de Componentes en Figma para Diseños Flexibles

Sincronización de Google Sheets con Figma para gestión de copies

Variables en Figma

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

Gestión de Variables de Texto para Traducciones en Figma

Inteligencia Artificial para Figma

Plugins de IA en Figma: Uso de Magician para Diseños Eficientes

Generación de Títulos para Landing Page del Sector Banca

Crear Landing Pages con Figma

Integración de IA en Figma: Uso de Plugins para Diseño UI/UX

Paleta de Colores Corporativos para Banco Transfer

Diseño de Landing Page con Secciones y Wireframes

Diseño de Landing Page Responsive en Figma

Interacción Avanzada con Prototipos

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

Creación de Microinteracciones con Figma Prototyping

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

Colaboración con desarrollo: Dev Mode de Figma

Colaboración con Desarrollo: Figma y Visual Studio Code