Vídeo tutorial: sincronizar el contenido de una hoja de Google Sheets con Figma
Este vídeo muestra cómo sincronizar el contenido de una hoja de cálculo de Google Sheets con tus diseños de Figma usando el plugin CopyDoc.
Vídeo tutorial: repetir y sincronizar automáticamente capas de Figma desde una hoja de cálculo
Este vídeo muestra cómo repetir y sincronizar automáticamente capas de Figma desde una hoja de cálculo usando el plugin CopyDoc.
Sincronizar el contenido de tu hoja de Google Sheets con las capas de Figma
Si has creado tu hoja de cálculo en Google Sheets, puedes sincronizarla con tu diseño de Figma haciendo clic en el botón Sync Content de la pantalla principal del plugin CopyDoc, que abre el panel de ajustes de esta función.
Hacer público el enlace de tu hoja de Google Sheets y copiar la URL
CopyDoc necesita permiso para leer la hoja de cálculo. En Google Sheets, selecciona Share y cambia Restricted por Anyone with the link antes de copiar la URL.
Si la política de tu empresa no permite compartir enlaces, descarga la hoja de Google Sheets como archivo de Excel (.xlsx). Puedes arrastrar y soltar ese archivo en CopyDoc y usar el mismo flujo de sincronización sin hacer pública la hoja.
Pegar la URL de tu hoja de Google Sheets y sincronizar con Figma
Puedes previsualizar el contenido de tu hoja de cálculo pegando la URL pública de Google Sheets en el campo Your Public Google Sheet URL. Si es una URL válida, pública y con la estructura correcta, al pegarla se cargará automáticamente una vista previa de los encabezados que contiene.
Asegúrate de seleccionar en Figma al menos una capa que contenga capas renombradas para que coincidan con los encabezados de tu hoja de cálculo y, después, haz clic en el botón Sync Rows with Layers (Sync & Repeat Selected Layer cuando Auto Repeat está activado). El contenido de tu hoja de cálculo se sincronizará con las capas renombradas de Figma que hayas seleccionado.
Las capas de texto de Figma con fuentes que faltan no se pueden actualizar. Si tu capa de texto de Figma contiene una fuente que falta, el plugin no podrá actualizarla. Asegúrate de resolver las fuentes que faltan en cualquier capa de texto que quieras actualizar con el plugin CopyDoc.
Repetir automáticamente una capa de Figma con las filas de tu hoja de cálculo
Con las pestañas de sincronización Content o Styles, puedes repetir automáticamente una capa de Figma activando el interruptor Auto Repeat. Este copia la capa de Figma seleccionada originalmente y la duplica tantas veces como filas tengan los datos de tu hoja de cálculo.
Úsalo para convertir una tarjeta, un artículo de catálogo o el diseño de una campaña en un diseño rellenado por cada fila de la hoja de cálculo. Las capas de texto y de imagen del diseño usan las columnas correspondientes de la hoja de cálculo.
Si seleccionas un componente principal, CopyDoc crea una instancia por cada fila. Si seleccionas una instancia existente, se duplica esa instancia; si seleccionas un frame, se duplica el frame.
Si la capa de Figma seleccionada ya está directamente dentro de otra capa de Figma con Auto Layout activado, la capa seleccionada se duplicará automáticamente dentro de esa capa principal. Si no, CopyDoc creará un nuevo frame con Auto Layout y duplicará ahí tus nuevas capas de Figma.
Nombres dinámicos para las capas principales repetidas
Para dar nombre a cada capa de Figma duplicada desde tu hoja de cálculo, haz que el nombre de la capa de plantilla seleccionada coincida con un encabezado de columna. CopyDoc usa el valor de esa columna en cada fila como nuevo nombre de la capa.
Un único # inicial es opcional: una capa llamada #Title puede coincidir con una columna Title, y una capa llamada Title puede coincidir con una columna #Title. Si existen los dos encabezados, tiene prioridad la coincidencia exacta, incluso cuando su valor está vacío. Las mayúsculas y los espacios tienen que coincidir.
Si no hay ningún nombre de capa coincidente en tu hoja de cálculo, el plugin CopyDoc tomará el nombre original de la capa de Figma y le añadirá un número de fila (por ejemplo, My Frame Layer (Row 3)).