# Gradientes no Figma: dicas para resultados mais suaves

[Canonical HTML page](https://gradiently.design/pt-pt/guide/figma-gradient)

O Figma faz um gradiente em dois cliques e um bom gradiente em vinte. Eis o caminho rápido pelo editor de gradientes, mais as soluções para meios cinzentos, faixas e CSS que não corresponde.

## The short version

- O Figma oferece quatro tipos de preenchimento em gradiente: linear, radial, angular e diamante, todos escolhidos no menu de tipo de preenchimento do seletor de cor.
- A direção e o comprimento do gradiente definem-se com pegas na tela, e as novas paragens de cor adicionam-se clicando na barra do gradiente no seletor.
- Os gradientes longos no Figma entre tons distantes podem ficar cinzentos a meio, por isso acrescenta uma paragem intermédia numa cor intermédia mais viva.
- Os gradientes linear, radial e angular têm equivalentes diretos em CSS, mas o gradiente diamante não tem e é melhor exportá-lo como imagem.
- Um gradiente tipo malha no Figma costuma fazer-se desfocando um grupo de elipses coloridas, e o grão esconde as faixas na exportação.

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

- Linear: `linear-gradient(135deg, #0f172a, #4338ca 55%, #a5b4fc)`
- Radial: `radial-gradient(ellipse at 50% 50%, #fde68a, #f97316 45%, #7c2d12)`
- Angular: `conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9)`

Preenchimentos linear, radial e angular, desenhados aqui com os seus equivalentes em CSS. O diamante não tem correspondente em CSS.

| Preenchimento Figma | O que desenha | Equivalente CSS |
| --- | --- | --- |
| Linear | Uma transição ao longo de uma linha reta | `linear-gradient()` |
| Radial | Uma transição para fora a partir de um centro, em elipse | `radial-gradient()` |
| Angular | Uma varredura de cor à volta de um centro | `conic-gradient()` |
| Diamond (diamante) | Uma transição para fora em forma de losango de quatro pontas | Nenhum; exporta como imagem |

Os tipos de gradiente do Figma e como se traduzem para a web.

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](https://gradiently.design/pt-pt/guide/types-of-gradients).

## Dominar o editor de gradientes

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

> **Pegas do radial** Os preenchimentos radial e diamante têm uma terceira pega que define a largura da elipse independentemente da altura. Esticá-la é a forma de criar um brilho largo de horizonte em vez de um foco redondo.

## 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](https://gradiently.design/pt-pt/guide/muddy-gradients) explica a teoria da cor.

- Duas paragens: meio cinzento: `linear-gradient(90deg, #2563eb, #f97316)`
- Paragem intermédia: vivo: `linear-gradient(90deg, #2563eb, #db2777 50%, #f97316)`

Azul para laranja, antes e depois de uma paragem extra. A paragem intermédia leva a transição pelo rosa em vez do cinzento.

## 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](https://gradiently.design/pt-pt/guide/css-mesh-gradient), e os [gradientes de malha](https://gradiently.design/pt-pt/guide/mesh-gradients) tratam do lado do design.

### Evita

- Elipses do mesmo tamanho espaçadas por igual
- Tons opostos sobrepostos ao centro
- Valores de desfoque pequenos que deixam bordas duras nas elipses
- Exportar uma malha grande, escura e desfocada sem grão

### Faz

- Uma mancha dominante, duas ou três mais pequenas
- Tons vizinhos sobrepostos, contrastes afastados
- Um desfoque grande o suficiente para não restarem bordas
- Uma camada ténue de ruído por cima antes de exportar

## 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](https://gradiently.design/pt-pt/guide/gradient-banding) explica porque funciona, e [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) 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.

```css
/* 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);
}
```

Traduções típicas. Mantém uma cor lisa de reserva, tirada da paragem mais escura do gradiente.

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](https://gradiently.design/pt-pt/guide/svg-gradients) 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.

## FAQ

### Como faço um gradiente no Figma?

Seleciona uma camada, clica na amostra do preenchimento e muda Solid para Linear, Radial, Angular ou Diamond. Arrasta as pegas na tela e clica na barra do gradiente para adicionar paragens.

### Como adiciono uma paragem de cor a um gradiente no Figma?

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

### O Figma consegue fazer gradientes de malha?

Não de forma nativa. Sobrepõe várias elipses coloridas, agrupa-as e aplica um Layer blur grande, ou usa um plugin.

### Porque é que o meu gradiente do Figma parece diferente no navegador?

Verifica o ângulo que o Figma exportou, se o ficheiro usa o perfil de cor Display P3 e se os preenchimentos empilhados foram traduzidos pela ordem certa.

### Posso copiar um gradiente do Figma como CSS?

Sim, nos preenchimentos linear, radial e angular, através do Dev Mode ou do painel Inspect. Os gradientes diamante não têm equivalente em CSS e devem ser exportados como imagens.