Estructurar tu hoja de cálculo para que coincida con tus capas de Figma

La función Sync Content de CopyDoc sincroniza contenido repetible de texto e imagen de varias filas de cualquier hoja de cálculo (un archivo .xlsx/.csv o una URL pública de Google Sheets) con las capas de Figma que selecciones.

Repetir y sincronizar capas de Figma automáticamente desde una hoja de cálculo

Este vídeo explica cómo repetir y sincronizar automáticamente capas de Figma desde una hoja de cálculo usando el plugin CopyDoc.

Esto resulta muy útil en diseños con cuadrículas o listas repetidas que necesitas rellenar automáticamente con contenido real.

También puedes usar esta función para renombrar capas o aplicar estilos CSS desde tu hoja de cálculo.

Ejemplo de estructura de hoja de cálculo para sincronizar contenido con capas de Figma ​

Tanto si usas un XLSX, un CSV o una hoja de Google Sheets, la estructura siempre es la misma: la primera fila (o "encabezado") de tu hoja de cálculo debe contener los nombres de las capas de Figma con las que quieres sincronizar el resto de las filas que hay debajo.

Puedes ponerles el nombre que quieras, pero lo más fácil es usar un formato de hashtag corto y descriptivo, como #Title o #Description. En Figma, tus capas de texto también deben llamarse #Title o #Description. Así se asociarán entre sí cuando sincronices la hoja de cálculo en el plugin más adelante.

#Title#Genre#Age Rating#Total Reviews
No Time To DieAction13123 Reviews
DuneSci-Fi Action14124 Reviews
Black WidowAction18125 Reviews
Suicide SquadAction18125 Reviews

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

Formato Markdown compatible para el contenido de texto ​

Si quieres, puedes añadir formato Markdown básico (negrita, cursiva) y enlaces al contenido de tu hoja de cálculo, y se aplicarán automáticamente al sincronizar el fragmento con tu capa de texto de Figma.

Tu capa de texto de Figma puede empezar como texto normal: no hace falta darle formato de negrita o cursiva de antemano. Usa una familia tipográfica que tenga disponible en Figma la variante en negrita, cursiva o negrita cursiva correspondiente. La vista previa de la hoja de cálculo usa las fuentes del navegador, así que su aspecto por sí solo no confirma que tu fuente de Figma tenga esas variantes.

  • Para poner texto en negrita, usa dos asteriscos **Snippet text to bold** o dos guiones bajos __Snippet text to bold__
  • Para poner texto en cursiva, usa un asterisco *Italic Snippet Text* o un guion bajo _Italic Snippet Text_
  • Para poner texto en negrita cursiva, usa tres asteriscos ***Bold Italic Snippet Text*** o tres guiones bajos ___Bold Italic Snippet Text___
  • Para añadir hipervínculos, usa la sintaxis Markdown This is [my link here](https://example.com) in a text snippet (también puedes dar formato al texto del enlace añadiendo la sintaxis de negrita o cursiva dentro de los [] del enlace).