Vídeo tutorial: sincronize merge tags em camadas de texto do Figma a partir de uma planilha

Este vídeo mostra como sincronizar merge tags em camadas de texto do Figma a partir de uma planilha usando o plugin CopyDoc.

Vídeo tutorial: sincronize conteúdo com merge tags avançadas nas células da planilha

Este vídeo mostra como sincronizar o texto do Figma e renomear camadas do Figma com merge tags avançadas nas células da planilha usando o plugin CopyDoc.

Sintaxe das merge tags

O CopyDoc usa uma sintaxe de merge tags simples: #{columnName}. Você pode inserir essas merge tags em qualquer lugar das suas camadas de texto, e elas serão substituídas pelos valores da sua planilha.

Exemplo de uso

Camada de texto do Figma:

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

Colunas da planilha:

firstName	lastName	orderId
John	Smith	12345
Sarah	Johnson	67890

Resultado depois da sincronização:

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

Principais vantagens

• Preserva a formatação: estilos de texto, fontes e cores continuam intactos
• Várias merge tags: use quantas merge tags precisar em uma mesma camada
• Nomes de coluna flexíveis: funciona com vários formatos de cabeçalho de coluna
• Alternativa inteligente: se nenhuma coluna correspondente for encontrada, o texto da merge tag é preservado
• Referências entre linhas: busque dados de linhas específicas com a sintaxe .N
• Nomes de camada dinâmicos: use merge tags para renomear frames e camadas

Flexibilidade nos cabeçalhos de coluna

O CopyDoc é inteligente na hora de reconhecer os cabeçalhos de coluna. Todos estes formatos funcionam:

• Padrão: firstName corresponde a #{firstName}
• Com o prefixo #: #firstName corresponde a #{firstName}
• Merge tag completa: #{firstName} corresponde a #{firstName}

Recursos avançados

Substituição do índice da linha (sintaxe .N)

Busque dados de linhas específicas com a sintaxe .N, em que N é o número da linha (começando em 2, porque a linha 1 é a dos cabeçalhos).

Exemplo:

Planilha:

firstName	lastName
John	Smith
Sarah	Johnson
Mike	Williams

Camada de texto do Figma na linha 1:

Atual: #{firstName} #{lastName} A seguir: #{firstName.3} #{lastName.3}

Resultado:

Atual: John Smith A seguir: Sarah Johnson

Isso é útil para:

• Criar referências de “a seguir” ou “anterior”
• Mostrar dados relacionados de outras linhas
• Montar comparações
• Criar listas de referência

Renomear camadas com merge tags

As merge tags também servem para renomear frames e camadas. Use-as nos valores das colunas da planilha para gerar nomes de camada dinamicamente.

Exemplo:

Planilha:

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

Resultado: seus frames serão renomeados para:

• “John Smith”
• “Sarah Johnson”

Você também pode usar a substituição do índice da linha nos nomes das camadas:

• #{firstName.2} vs #{firstName.3} cria nomes de frame comparativos
• Perfeito para cenários de “antes/depois” ou “opção A vs. opção B”

Renomear camadas em massa

Para renomeações mais simples, se você tem 6 frames do Figma com o nome #My Frame, pode usar esse nome como nome de coluna na planilha e renomeá-los em massa com valores fixos ou combinações de merge tags.

Interpolação do conteúdo das células da planilha

As células da planilha podem fazer referência a outras colunas usando a sintaxe de merge tags. Isso acontece antes de o valor ser aplicado às camadas do Figma, o que permite criar valores calculados.

Exemplo:

Planilha:

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

Como funciona:

1. A coluna fullName é resolvida como “John Smith” ou “Sarah Johnson”
2. A coluna greeting usa esse valor resolvido e se torna “Hello, John Smith!” ou “Hello, Sarah Johnson!”
3. Esse valor final é aplicado às suas camadas de texto do Figma

Vantagens:

• Crie fórmulas reutilizáveis na sua planilha
• Combine várias colunas em strings formatadas
• Monte conteúdos complexos a partir de dados simples
• Mantenha a consistência entre padrões de conteúdo parecidos

Exemplo avançado com referências a linhas:

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

Isso cria textos de comparação dinâmicos, como “Widget A ($99) vs Widget B ($149)”

Casos de uso comuns

• Templates de e-mail: personalize os nomes e os dados dos destinatários
• Cartões de visita: gere várias versões com dados de contato diferentes
• Materiais de marketing: crie versões localizadas com conteúdos diferentes
• Visualizações de dados: atualize rótulos e títulos dinamicamente
• Catálogos de produtos: atualize em lote nomes, preços e descrições de produtos
• Layouts comparativos: mostre lado a lado dados de várias linhas
• Organização dinâmica das camadas: nomeie os frames automaticamente com base no conteúdo deles

Dicas

• No seu CSV, coloque aspas em volta dos valores que têm vírgulas: "42,580"
• Teste primeiro com poucas camadas antes de aplicar ao design inteiro
• Use nomes de coluna claros para deixar sua planilha fácil de entender
• Os números das linhas começam em 2 (a linha 1 é a dos cabeçalhos), então .2 faz referência à primeira linha de dados
• A interpolação das células da planilha é resolvida primeiro e depois vem a interpolação das camadas do Figma
• Combine merge tags de forma criativa para montar conteúdos dinâmicos complexos