Vídeo tutorial: sincronize variantes de componentes no Figma usando uma planilha
Este vídeo mostra como sincronizar variantes de componentes no Figma usando uma planilha com o plugin CopyDoc.
Passo 1: configurar as variantes da sua camada de componente no Figma
Antes de sincronizar a planilha para trocar variantes de componentes, você precisa configurar o seu conjunto de componentes do Figma com variantes como uma camada do Figma, seguindo os passos abaixo (como mostra o vídeo acima).
- Crie uma nova camada de componente no Figma e dê a ela um nome igual ao cabeçalho da sua planilha (por exemplo, #Tag).
- Clique com o botão direito na camada de componente do Figma, passe o mouse sobre Main component e clique em Add variant para criar um novo conjunto de componentes do Figma.
- Adicione quantas variantes novas precisar clicando no botão com o ícone + na parte de baixo da camada do conjunto de componentes do Figma (quando ela estiver selecionada) e atualize o estilo de cada nova variante (por exemplo, mudando fundos ou cores).
- Depois de criar as variantes do componente, você pode personalizar os nomes da propriedade e das variantes, renomeando os nomes padrão do Figma para facilitar a identificação e o uso na planilha (por exemplo, renomeando “Property 1” para “Genre” e “Variant 1” para “Synthwave”).
- Abra o painel Assets no Figma, arraste e solte o novo componente do Figma (por exemplo, #Tag) no seu arquivo do Figma e mova-o para dentro dos frames do Figma que você quer sincronizar a partir de uma planilha.
- Siga as instruções do passo 2 abaixo para trocar automaticamente a opção de variante do componente sincronizando as linhas de uma planilha com seus frames do Figma.
Passo 2: trocar variantes sincronizando sua planilha
Assim como na sincronização de textos comuns, para trocar variantes a partir de uma planilha você primeiro precisa adicionar o nome da sua camada Component (por exemplo, Tag) como um novo valor de coluna de cabeçalho na primeira linha da planilha.
Depois, copie e cole o nome da propriedade e da variante que aparece quando você clica duas vezes na camada da variante do Figma na barra lateral. Ele tem um sinal de igual = (por exemplo, Genre=Synthwave) que mostra os valores do nome da propriedade e do nome da variante. Cole-o nas linhas seguintes da planilha, dentro da mesma coluna, como no exemplo abaixo (e como mostra o vídeo acima).
| #Tag |
|---|
| Genre=Synthwave |
| Genre=Outrun |
| Genre=Vaporwave |
| Genre=Darksynth |
Quando você sincronizar a planilha com o Figma, o valor de variante de todas as camadas de componente do Figma com o nome correspondente (por exemplo, #Tag) será trocado automaticamente, com base no valor de variante que você indicou nas linhas da planilha.
Você também pode sincronizar normalmente outros textos ou imagens em outras camadas na mesma planilha, criando colunas extras para eles.