Gradientes no Figma: dicas para resultados mais suaves

Para fazer um gradiente no Figma, seleciona uma camada, clica na amostra do preenchimento e muda o tipo de preenchimento de Solid para Linear, Radial, Angular ou Diamond. Aparecem pegas na tela: arrasta-as para definir a direção e o alcance da transição, e clica na barra do gradiente no seletor para adicionar paragens de cor. Isso demora segundos. Fazê-lo parecer suave, rico e idêntico quando chega ao código exige mais alguns hábitos, e é disso que trata este guia.

Os quatro tipos de gradiente no Figma

O linear serve a maioria dos fundos e botões. O radial serve brilhos e focos de luz. O angular desenha rodas de cor, mostradores e reflexos metálicos. O diamante raramente é preciso; dá um brilho facetado em quatro direções que resulta bem em ilustração, mas tem de virar bitmap na web. Para ver como cada tipo se comporta no design em geral, consulta os tipos de gradientes.

Dominar o editor de gradientes

1. 1

   Define a direção com as pegas

   Uma pega marca onde fica a primeira cor e a outra onde fica a última. Arrasta a pega final para lá da margem da frame para uma transição mais suave, ou puxa-a para dentro para uma mais curta e acentuada.

2. 2

   Adiciona paragens na barra

   Clica em qualquer ponto da barra do gradiente no seletor de cor para adicionar uma paragem e dá-lhe uma cor. Seleciona uma paragem e carrega em Delete para a remover.

3. 3

   Usa a opacidade das paragens para esbater

   Cada paragem tem a sua opacidade. Esbater uma cor até 0% de opacidade permite pôr um gradiente sobre uma fotografia ou outro preenchimento.

4. 4

   Empilha preenchimentos

   Uma camada pode ter vários preenchimentos. Acrescenta um segundo gradiente por cima do primeiro, com zonas transparentes, para sobrepor um brilho a uma transição de base.

5. 5

   Guarda-o como estilo

   Guarda o preenchimento final como estilo de cor para que toda a equipa use o mesmo gradiente. As variáveis do Figma não guardam gradientes, mas os estilos sim.

Corrigir meios cinzentos e transições sujas

O Figma mistura as paragens de cor diretamente, tal como o CSS faz por omissão, e não tem opção para misturar num espaço de cor percetual. Uma transição longa entre tons distantes, como de azul para laranja ou de azul para amarelo, afunda-se em cinzento a meio. A solução é uma paragem intermédia: escolhe a cor que queres no ponto médio, normalmente um tom intermédio mais vivo, e acrescenta-a à mão. Gradientes sujos explica a teoria da cor.

Gradientes tipo malha no Figma

O Figma não tem ferramenta de gradiente de malha, mas uma versão convincente faz-se depressa. Desenha quatro ou cinco elipses nas tuas cores, sobrepostas, dentro de uma frame com fundo escuro ou claro. Agrupa-as, aplica um Layer blur grande ao grupo e recorta o conteúdo da frame. Move as elipses para reequilibrar a cor. É a mesma ideia da técnica em camadas dos gradientes de malha em CSS, e os gradientes de malha tratam do lado do design.

Juntar grão para esconder as faixas

Os gradientes suaves exportados em PNG ou JPEG de 8 bits podem mostrar degraus visíveis, sobretudo em esbatimentos escuros e lentos. Uma camada leve de ruído desfaz esses degraus. As versões recentes do Figma incluem opções de ruído e textura no painel Effects; caso contrário, coloca uma imagem de ruído em mosaico por cima do gradiente, com um modo de mistura como Overlay ou Soft light e opacidade baixa. Faixas em gradientes explica porque funciona, e gradientes com grão porque também fica mais bonito.

Exportar gradientes do Figma e fazê-los corresponder em CSS

No Dev Mode ou no painel Inspect, o Figma mostra o CSS dos preenchimentos em gradiente. Trata-o como ponto de partida e verifica três coisas. Primeiro, o ângulo: as pegas que arrastaste numa frame não quadrada podem traduzir-se num ângulo que não terias escolhido, por isso arredonda-o para um valor limpo. Segundo, o perfil de cor: se o ficheiro usa Display P3, os mesmos valores hexadecimais podem parecer diferentes num navegador sRGB. Terceiro, os preenchimentos empilhados: passam a gradientes separados por vírgulas, com o preenchimento de cima do Figma em primeiro lugar.

/* Figma: linear fill, #0f172a to #4338ca to #a5b4fc, top left to bottom right */
.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #a5b4fc 100%);
}

/* Figma: angular fill */
.dial {
  background-image: conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9);
}

Para imagens, exporta a 2x para teres resultados nítidos em ecrãs de alta densidade, e prefere PNG para gradientes com transparência. Para gradientes que têm de continuar vetoriais, a exportação SVG escreve os preenchimentos linear e radial como gradientes SVG; vê gradientes SVG para perceber o que recebes. Os preenchimentos diamante, as malhas desfocadas e o ruído saem sempre em píxeis.

Se crias muitos fundos em gradiente para publicações nas redes, apresentações e banners, uma ferramenta que renderiza o mesmo material em todos os tamanhos poupa-te exportações repetidas. Na Gradiently, um Mark é renderizado em direto em cada formato, em vez de ser cortado a partir de uma só exportação.