Vídeo tutorial: sincronize o conteúdo de uma planilha XLSX do Excel com o Figma

Este vídeo mostra como sincronizar o conteúdo de uma planilha do Excel com seus designs no Figma usando o plugin CopyDoc.

Vídeo tutorial: sincronize o conteúdo de uma planilha CSV com o Figma

Este vídeo mostra como sincronizar o conteúdo de uma planilha CSV com seus designs no Figma usando o plugin CopyDoc.

Vídeo tutorial: 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.

Vídeo tutorial: sincronize uma pasta de imagens com camadas do Figma usando uma planilha

Este vídeo mostra como sincronizar uma pasta de imagens com camadas do Figma usando uma planilha com o plugin CopyDoc.

Vídeo tutorial: sincronize ícones SVG de uma planilha com suas camadas do Figma

Este vídeo mostra como sincronizar ícones SVG de uma planilha com suas camadas do Figma usando o plugin CopyDoc.

Sincronizar o conteúdo do seu arquivo CSV ou XLSX com camadas do Figma

Para pré-visualizar o conteúdo da sua planilha, arraste e solte o arquivo .csv ou .xlsx estruturado corretamente na área Sync XLSX/CSV File, ou clique nela e procure o arquivo manualmente no seu computador.

Selecione pelo menos uma camada no Figma que contenha camadas renomeadas de acordo com os cabeçalhos da sua planilha e clique no botão Sync Rows with Layers (Sync & Repeat Selected Layer quando o Auto Repeat estiver ativado). Isso sincroniza o conteúdo da sua planilha com as camadas renomeadas do Figma que você selecionou.

Camadas de texto do Figma com fontes ausentes não podem ser atualizadas. Se a sua camada de texto do Figma tiver uma fonte ausente, o plugin não conseguirá atualizá-la. Resolva as fontes ausentes de todas as camadas de texto que você quiser atualizar de qualquer forma com o plugin CopyDoc.

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