Vídeo tutorial: sincronizar o conteúdo de uma planilha do Google Sheets com o Figma

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

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

Sincronizar o conteúdo do Google Sheets com as camadas do Figma

Se você criou sua planilha no Google Sheets, pode sincronizá-la com o seu design do Figma clicando no botão Sync Content na tela principal do plugin CopyDoc, que abre o painel de configurações desse recurso.

Tornar público o link da planilha do Google Sheets e copiar a URL

O CopyDoc precisa de permissão para ler a planilha. No Google Sheets, selecione Share e mude Restricted para Anyone with the link antes de copiar a URL.

Se a política da sua empresa não permitir compartilhar por link, baixe a planilha do Google Sheets como um arquivo do Excel (.xlsx). Você pode arrastar e soltar esse arquivo no CopyDoc e usar o mesmo fluxo de sincronização sem deixar a planilha pública.

Colar a URL da planilha do Google Sheets e sincronizar com o Figma

Para pré-visualizar o conteúdo da planilha, cole a URL pública do Google Sheets no campo Your Public Google Sheet URL. Se a URL for válida, pública e estiver com a estrutura correta, uma pré-visualização dos cabeçalhos da planilha será carregada automaticamente assim que você colar.

Selecione no Figma pelo menos uma camada que contenha camadas renomeadas de acordo com os cabeçalhos da 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 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)).