Repita e sincronize automaticamente camadas do Figma a partir de uma planilha
Este vídeo mostra como repetir e sincronizar automaticamente camadas do Figma a partir de uma planilha usando o plugin CopyDoc.
Isso é muito útil para designs com grades ou listas repetidas que você precisa preencher automaticamente com conteúdo real.
Você também pode usar esse recurso para renomear camadas ou aplicar estilos CSS a partir da sua planilha.
Exemplo de estrutura de planilha para sincronizar conteúdo com camadas do Figma
Não importa se você usa um XLSX, um CSV ou o Google Sheets como planilha: a estrutura é sempre a mesma. A primeira linha (o “cabeçalho”) da planilha precisa conter os nomes das camadas do Figma que você quer sincronizar com as demais linhas abaixo dela.
Você pode dar a elas o nome que quiser, mas o mais fácil é usar um formato de hashtag curto e descritivo, como #Title ou #Description. No Figma, dê também às suas camadas de texto os nomes #Title ou #Description. Assim, elas serão mapeadas entre si quando a planilha for sincronizada no plugin mais tarde.
| #Title | #Genre | #Age Rating | #Total Reviews |
|---|---|---|---|
| No Time To Die | Ação | 13 | 123 avaliações |
| Dune | Ação e ficção científica | 14 | 124 avaliações |
| Black Widow | Ação | 18 | 125 avaliações |
| Suicide Squad | Ação | 18 | 125 avaliações |
Repetir automaticamente uma camada do Figma com as linhas da planilha
Nas abas de sincronização Content ou Styles, você pode repetir automaticamente uma única camada do Figma ativando a opção Auto Repeat. Ela copia a camada original selecionada no Figma e a duplica tantas vezes quanto o número de linhas de dados da sua planilha.
Use isso para transformar um card, um item de catálogo ou um layout de campanha em um design preenchido para cada linha da planilha. As camadas de texto e de imagem dentro do design usam as colunas correspondentes da planilha.
Se você selecionar um componente principal, o CopyDoc cria uma instância para cada linha. Ao selecionar uma instância existente, essa instância é duplicada; ao selecionar um frame, o frame é duplicado.
Se a camada selecionada já estiver diretamente dentro de outra camada do Figma com Auto Layout ativado, ela será duplicada automaticamente dentro dessa camada pai. Caso contrário, o CopyDoc criará um novo frame com Auto Layout e duplicará as novas camadas do Figma nele.
Nomes dinâmicos para as camadas pai repetidas automaticamente
Para dar a cada camada duplicada do Figma um nome vindo da planilha, faça o nome da camada de template selecionada corresponder ao cabeçalho de uma coluna. O CopyDoc usa o valor dessa coluna em cada linha como o novo nome da camada.
Um único # no início é opcional: uma camada chamada #Title pode corresponder a uma coluna Title, e uma camada chamada Title pode corresponder a uma coluna #Title. Se os dois cabeçalhos existirem, a correspondência exata tem prioridade, mesmo quando o valor dela estiver em branco. As letras maiúsculas e minúsculas e os espaços ainda precisam corresponder.
Se não houver nenhum nome de camada correspondente na planilha, o plugin CopyDoc usa o nome original da camada do Figma e acrescenta um número de linha a ele (por exemplo, My Frame Layer (Row 3)).
Formatação Markdown compatível para conteúdo de texto
Se quiser, você pode adicionar ao conteúdo da planilha uma formatação Markdown básica (negrito, itálico) e links, que serão aplicados automaticamente quando o trecho for sincronizado com sua camada de texto do Figma.
Sua camada de texto do Figma pode começar como texto comum; não é preciso formatar antes um exemplo em negrito ou itálico. Use uma família de fontes que tenha disponíveis no Figma as variantes negrito, itálico ou negrito itálico correspondentes. A pré-visualização da planilha usa as fontes do navegador, então a aparência dela, por si só, não confirma que sua fonte do Figma tem essas variantes.
- Para deixar um texto em negrito, use dois asteriscos
**Snippet text to bold**ou dois sublinhados__Snippet text to bold__ - Para deixar um texto em itálico, use um asterisco
*Italic Snippet Text*ou um sublinhado_Italic Snippet Text_ - Para deixar um texto em negrito itálico, use três asteriscos
***Bold Italic Snippet Text***ou três sublinhados___Bold Italic Snippet Text___ - Para criar hiperlinks, use a sintaxe Markdown
This is [my link here](https://example.com) in a text snippet(você também pode formatar o texto do link adicionando a sintaxe de negrito/itálico dentro da área de texto[]do link).