Vídeo tutorial: estilize camadas do Figma a partir de uma planilha com a sincronização de estilos CSS
Este vídeo mostra como estilizar camadas do Figma a partir de uma planilha com a sincronização de estilos CSS usando o plugin CopyDoc.
Por exemplo, se você tem camadas de texto no Figma com o nome #SectionHeading, pode mudar o tamanho da fonte e a cor dessas camadas no Figma adicionando font-size: 40px; color: #999999; às linhas abaixo da coluna #SectionHeading da sua planilha.
Quando você sincronizar a planilha com o Figma, os estilos de todas as camadas correspondentes serão atualizados automaticamente, desde que o valor CSS seja compatível e se aplique a esse tipo de camada.
Propriedades CSS compatíveis para estilizar suas camadas do Figma
Algumas propriedades CSS estão disponíveis para cada tipo de camada, e você pode aplicar várias propriedades a uma camada colocando-as na mesma célula da planilha:
por exemplo, color: #000000; font-size: 24px; font-weight: bold;
| #HeroBlock | #Menu | #CardFrame | #StaffName |
|---|---|---|---|
| background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px; | opacity: 0.3; background-color: #CCD4FF; | font-size: 10px; | font-size: 22px; color: #818AF9; font-weight: bold; |
| background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px; | opacity: 0.3; background-color: #CCD4FF; | font-size: 10px; | font-size: 22px; color: #818AF9; font-weight: bold; |
Estas são as propriedades CSS compatíveis no momento com o recurso de sincronização de planilhas:
Camadas de texto
Estas propriedades CSS podem ser aplicadas a qualquer camada de texto do Figma.
- color (por exemplo,
color: #CCCCCC;) - font-size (por exemplo,
font-size: 40px;) - line-height (por exemplo,
line-height: 48px;) - font-family (por exemplo,
font-family: Arial;) - font-weight (por exemplo,
font-weight: bold;) - font-style (por exemplo,
font-style: italic;) - text-align (por exemplo,
text-align: center;) - text-transform (por exemplo,
text-transform: uppercase;) - vertical-align (por exemplo,
vertical-align: middle;)
Aplicar estilos de texto a todas as camadas filhas. Se você aplicar algum estilo CSS de camada de texto (por exemplo, font-size: 30px) a uma camada que contém camadas filhas (por exemplo, Frame, Group, Component, Instance), o estilo será aplicado automaticamente a todas as camadas de texto dentro dessa camada correspondente.
Outras camadas
Estas propriedades CSS podem ser aplicadas a outras camadas do Figma (imagens, retângulos, frames etc.):
- width (por exemplo,
width: 100px;) - height (por exemplo,
height: 100px;) - opacity (por exemplo,
opacity: 0.5;) - background-color (por exemplo,
background-color: #CCCCCC;) - border (por exemplo,
border: 1px solid #CCCCCC;) - border-radius (por exemplo,
border-radius: 20px;)
Propriedades de posicionamento
Estas propriedades CSS podem ser aplicadas a qualquer camada do Figma (inclusive textos, imagens, retângulos, frames etc.).
Transform
A propriedade transform do CSS permite manipular visualmente a posição, a rotação e a escala de um elemento sem afetar o espaço que ele ocupa no layout. Ela costuma ser usada no Figma e em ferramentas de design parecidas para reproduzir movimentos, rotações e redimensionamentos que acontecem dentro de um frame, e não em relação ao fluxo do documento.
Funções de transformação comuns:
translate Move um elemento nos eixos X e Y. Exemplo:
transform: translate(10px, 20px)→ move o elemento 10px para a direita e 20px para baixo.translateX Move um elemento horizontalmente no eixo X. Exemplo:
transform: translateX(10px)→ move o elemento 10px para a direita.translateY Move um elemento verticalmente no eixo Y. Exemplo:
transform: translateY(20px)→ move o elemento 20px para baixo.rotate Gira um elemento em torno do seu ponto de origem. Exemplo:
transform: rotate(45deg)→ gira o elemento 45 graus no sentido horário.scale Redimensiona um elemento por um fator de escala nos eixos X e Y. Exemplo:
transform: scale(1.5)outransform: scale(2, 1.5)→ aumenta o tamanho do elemento 1.5× no total ou 2× na horizontal / 1.5× na vertical.
Várias funções de transformação podem ser combinadas em sequência. Exemplo: css transform: translateX(10px) rotate(45deg) scale(1.2); A ordem importa, porque cada função se aplica ao resultado da anterior.
Posição X/Y
Ao contrário das transformações, os valores X e Y do Figma correspondem à posição absoluta do elemento dentro do frame pai ou do sistema de coordenadas. No CSS, esse posicionamento é representado por propriedades como:
top Define o deslocamento vertical a partir da borda superior do elemento que o contém. Exemplo:
top: 100px;→ posiciona o elemento 100px abaixo do topo do contêiner.left Define o deslocamento horizontal a partir da borda esquerda do elemento que o contém. Exemplo:
left: 100px;→ posiciona o elemento 100px a partir da esquerda do contêiner.
Diferença em relação ao transform: - top e left definem a posição no layout do elemento. - transform: translate() desloca o elemento visualmente, sem afetar os elementos ao redor nem o fluxo do layout.
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)).