Vídeo tutorial: sincronizar etiquetas de combinación en capas de texto de Figma desde una hoja de cálculo

Este vídeo explica cómo sincronizar etiquetas de combinación en capas de texto de Figma desde una hoja de cálculo con el plugin CopyDoc.

Vídeo tutorial: sincronizar contenido con etiquetas de combinación avanzadas en las celdas de la hoja de cálculo

Este vídeo explica cómo sincronizar el contenido de texto de Figma y renombrar capas de Figma con etiquetas de combinación avanzadas en las celdas de la hoja de cálculo con el plugin CopyDoc.

Sintaxis de las etiquetas de combinación

CopyDoc usa una sintaxis sencilla para las etiquetas de combinación: #{columnName}. Puedes insertar estas etiquetas en cualquier parte de tus capas de texto y se reemplazarán por los valores de tu hoja de cálculo.

Ejemplo de uso

Capa de texto de Figma:

Hello #{firstName} #{lastName},
Your order #{orderId} is ready for pickup!

Columnas de la hoja de cálculo:

firstName	lastName	orderId
John	Smith	12345
Sarah	Johnson	67890

Resultado tras la sincronización:

• Hello John Smith, Your order 12345 is ready for pickup!
• Hello Sarah Johnson, Your order 67890 is ready for pickup!

Ventajas principales

• Conserva el formato: los estilos de texto, las fuentes y los colores no cambian
• Varias etiquetas de combinación: usa tantas etiquetas como necesites en una misma capa
• Nombres de columna flexibles: funciona con distintos formatos de encabezado de columna
• Alternativa inteligente: si no se encuentra ninguna columna que coincida, se conserva el texto de la etiqueta
• Referencias a otras filas: toma datos de filas concretas con la sintaxis .N
• Nombres de capa dinámicos: usa etiquetas de combinación para renombrar frames y capas

Flexibilidad en los encabezados de columna

CopyDoc reconoce los encabezados de columna de forma inteligente. Todos estos formatos funcionan:

• Estándar: firstName coincide con #{firstName}
• Con el prefijo #: #firstName coincide con #{firstName}
• Etiqueta de combinación completa: #{firstName} coincide con #{firstName}

Funciones avanzadas

Elegir la fila por índice (sintaxis .N)

Toma datos de filas concretas con la sintaxis .N, donde N es el número de fila (empezando por 2, ya que la fila 1 contiene los encabezados).

Ejemplo:

Hoja de cálculo:

firstName	lastName
John	Smith
Sarah	Johnson
Mike	Williams

Capa de texto de Figma en la fila 1:

Current: #{firstName} #{lastName} Next up: #{firstName.3} #{lastName.3}

Resultado:

Current: John Smith Next up: Sarah Johnson

Esto es útil para:

• Crear referencias a lo "siguiente" o lo "anterior"
• Mostrar datos relacionados de otras filas
• Crear comparativas
• Crear listas de referencia

Renombrar capas con etiquetas de combinación

Las etiquetas de combinación también sirven para renombrar frames y capas. Úsalas en los valores de las columnas de tu hoja de cálculo para generar nombres de capa de forma dinámica.

Ejemplo:

Hoja de cálculo:

frameName	firstName	lastName
#{firstName} #{lastName}	John	Smith
#{firstName} #{lastName}	Sarah	Johnson

Resultado: tus frames se renombrarán así:

• "John Smith"
• "Sarah Johnson"

También puedes elegir la fila por índice en los nombres de capa:

• #{firstName.2} frente a #{firstName.3} crea nombres de frame comparativos
• Ideal para casos de "antes/después" u "opción A frente a opción B"

Renombrar capas en bloque

Para renombrar de forma más sencilla, si tienes 6 frames de Figma que se llaman #My Frame, puedes usar ese nombre como nombre de columna en tu hoja de cálculo y renombrarlos en bloque con valores fijos o combinaciones de etiquetas de combinación.

Interpolación del contenido de las celdas de la hoja de cálculo

Las celdas de la hoja de cálculo pueden hacer referencia a otras columnas con la sintaxis de etiquetas de combinación. Esto ocurre antes de que el valor se aplique a las capas de Figma, así que puedes crear valores calculados.

Ejemplo:

Hoja de cálculo:

firstName	lastName	fullName	greeting
John	Smith	#{firstName} #{lastName}	Hello, #{fullName}!
Sarah	Johnson	#{firstName} #{lastName}	Hello, #{fullName}!

Cómo funciona:

1. La columna fullName se resuelve como "John Smith" o "Sarah Johnson"
2. Después, la columna greeting usa ese valor resuelto y pasa a ser "Hello, John Smith!" o "Hello, Sarah Johnson!"
3. Este valor final se aplica a tus capas de texto de Figma

Ventajas:

• Crea fórmulas reutilizables en tu hoja de cálculo
• Combina varias columnas en cadenas con formato
• Crea contenido complejo a partir de datos sencillos
• Mantén la coherencia en contenidos con patrones similares

Ejemplo avanzado con referencias a filas:

product	price	competitor	comparison
Widget A	$99	Widget B	#{product} (#{price}) vs #{product.3} (#{price.3})
Widget B	$149	Widget C	#{product} (#{price}) vs #{product.4} (#{price.4})
Widget C	$199	Widget A	#{product} (#{price}) vs #{product.2} (#{price.2})

Así se crea un texto comparativo dinámico como "Widget A ($99) vs Widget B ($149)"

Casos de uso habituales

• Plantillas de email: personaliza los nombres y los datos de los destinatarios
• Tarjetas de visita: genera varias versiones con distintos datos de contacto
• Material de marketing: crea versiones localizadas con contenido distinto
• Visualizaciones de datos: actualiza etiquetas y títulos de forma dinámica
• Catálogos de productos: actualiza por lotes nombres, precios y descripciones de productos
• Diseños comparativos: muestra datos de varias filas uno al lado del otro
• Organización dinámica de capas: da nombre a los frames automáticamente según su contenido

Consejos

• Pon entre comillas los valores con comas en tu CSV: "42,580"
• Haz primero una prueba con unas pocas capas antes de aplicarlo a todo el diseño
• Usa nombres de columna descriptivos para que tu hoja de cálculo se entienda fácilmente
• Los números de fila empiezan en 2 (la fila 1 contiene los encabezados), así que .2 hace referencia a la primera fila de datos
• Primero se resuelve la interpolación de las celdas de la hoja de cálculo y después la de las capas de Figma
• Combina etiquetas de combinación con creatividad para crear contenido dinámico complejo