Como criar um gradiente no Figma

Quando você não consegue decidir sobre uma cor, os gradientes são uma excelente opção. No Figma, você pode criar vários fundos gradientes, colocar um gradiente em uma forma e texto, criar gradientes de traços e muito mais. Você pode até criar gradientes de malha com o efeito de desfoque ou com um plugin de gradiente de malha da comunidade Figma.

Como o Figma tem tantas maneiras diferentes de criar um gradiente, novos usuários podem ter dificuldade para entendê-las desde o início. É claro que experimentar faz parte do processo de aprendizagem, mas é muito mais fácil ter todas as instruções em um só lugar. E este artigo fornece exatamente isso.

Como criar diferentes estilos de gradiente no Figma

Figma oferece vários estilos de gradiente que você pode usar para preencher fundos ou objetos na tela com várias cores.

• Linear: Os gradientes lineares têm duas cores que se misturam em uma linha reta.
• Radial: Com gradientes radiais, a primeira cor começa em um único ponto e se mistura com o outro em todas as direções.
• Angular: Em gradientes angulares, você pode determinar a direção na qual o gradiente se move adicionando ângulos. É uma excelente opção para criar imagens 3D.
• Diamante: Como o nome sugere, os gradientes de diamante começam em um ponto e se espalham na forma de um diamante.

As etapas para criar qualquer um desses estilos de gradiente são as mesmas. A única diferença está no estilo que você seleciona. Veja como criar um design gradiente no Figma:

1. Abra um arquivo Figma em branco.

   

2. Toque na “Ferramenta Retângulo” na barra de ferramentas esquerda.

   

3. Usando a ferramenta, desenhe um retângulo na tela para usar como referência de gradiente.

   

4. Selecione o retângulo criado.

   

5. Clique na cor atual em “Preencher” no painel direito para abrir o seletor de cores.

   

6. Pressione o menu suspenso e altere o “Sólido” padrão para o estilo de gradiente desejado. Duas paradas ou caixas coloridas aparecerão.

   

7. Selecione cada parada de cor e escolha a cor que deseja adicionar ao gradiente.

   

8. Toque nos quatro pontos ao lado de “Preencher” para salvar o gradiente como estilo.

   

Depois disso, você pode ajustar o valor da transparência, posicionar as paradas de cor onde deseja que uma cor termine e a segunda comece, adicionar outra parada de cor, movê-las na tela ou alterar o ângulo do gradiente. Quando terminar de ajustar, salve o gradiente novamente (Etapa 8).

Nota: Para excluir uma parada de cor que você adicionou, selecione a parada e pressione “Excluir” ou “Backspace” no teclado.

Agora você pode aplicar o estilo gradiente a qualquer objeto que desejar.

Como criar um gradiente de malha no Figma

Os gradientes de malha são populares entre grandes empresas e marcas. Se você é um usuário frequente do Instagram, você vê todos os dias o logotipo do aplicativo. Assim, saber como criá-los pode ser útil em situações em que você precisa agregar algum interesse aos seus projetos.

Conforme mencionado, gradientes de malha podem ser criados com um plugin fornecido pela comunidade Figma. Mas há uma maneira mais simples de adicionar várias cores onde quiser na tela, sem a necessidade de ferramentas externas.

Veja como criar um gradiente de malha no Figma:

1. Insira um novo arquivo Figma.

   

2. Crie um quadro.

   

3. Marque a caixa “Cortar conteúdo” no painel direito para que tudo o que estiver fora do quadro seja cortado.

   

4. Comece adicionando várias formas ou crie seu próprio objeto com a ferramenta “Caneta” dentro da moldura.

   

5. Altere o “Preenchimento” de cada novo formulário para que seja diferente dos demais.

   

6. Selecione todas as formas.

   

7. Em “Efeitos”, pressione o menu suspenso e selecione “Desfoque de camada”.

   

8. Abra as configurações de “Desfoque de camada” e aumente o valor até não ver mais limites claros entre as formas.

   

9. Salve o estilo acima e use-o em outros objetos.

Outra forma de criar um gradiente de malha é usando o estilo angular. Dá um resultado fascinante um pouco diferente, mas igualmente interessante, como o primeiro tutorial.

Aqui está o que você precisa fazer:

1. Abra uma tela em branco.

   

2. Use a forma desejada e adicione-a à tela.
3. Em “Preenchimento”, altere “Sólido” para “Angular”.

   

4. Escolha as cores do gradiente.

   

5. Ajuste o ângulo e outros aspectos do gradiente.

   

6. Adicione outra forma, de preferência “Eclipse”, ou seja, um círculo.

   

7. Coloque-o em cima da outra forma na tela.

   

8. Adicione um gradiente linear e mude a cor para aquela que combine bem com o resto.

   

9. Em “Efeitos”, use o efeito “Desfoque de camada” e desfoque as linhas da nova forma para mesclá-la com a primeira.

   

Como fazer gradiente de uma imagem no Figma

Além de criar um gradiente, você também pode sobrepor uma imagem existente com um gradiente para adicionar alguma dimensão. Dá um efeito de “desbotamento” ou a ilusão de uma fonte de luz invisível brilhando na imagem de fora.

Veja como adicionar um gradiente a uma imagem no Figma:

1. Abra um novo arquivo no Figma.

   

2. Arraste e solte a imagem à qual deseja adicionar o gradiente na tela.

   

3. Adicione uma forma que corresponda ao tamanho da imagem na parte superior.

   

4. Selecione um estilo de gradiente na seção “Preenchimento”.

   

5. Escolha as cores do gradiente no seletor de cores.

   

6. Ajuste a opacidade, ângulo, etc.

   

Você também pode usar a ferramenta “Caneta” e desenhar uma forma na área onde deseja que o gradiente fique.

Como fazer gradiente de texto no Figma

Criar um gradiente em um texto no Figma é muito semelhante a como você cria um gradiente para qualquer outra forma. Aqui estão as etapas:

1. Abra uma nova tela no Figma.

   

2. Pressione a ferramenta “Texto” na barra de ferramentas à esquerda.

   

3. Clique em qualquer lugar da tela e comece a escrever.
4. Selecione o texto e vá em “Preencher”.

   

5. Escolha o estilo gradiente.

   

6. Pressione cada caixa de cor e encontre a cor que deseja adicionar ao gradiente.

   

Perguntas frequentes

Quantas cores posso adicionar a um gradiente no Figma?

Você pode adicionar quantas cores desejar nos estilos de gradiente Figma padrão e de malha. Mas tente não exagerar. Como os gradientes têm múltiplas cores de transição, mais de cinco podem ser demais, mesmo para um gradiente de malha.

Posso importar um gradiente para o Figma?

Você pode importar qualquer gradiente que desejar para o Figma. Por exemplo, você pode colar código de CSS (Cascading Style Sheets) abrindo o painel “Código” e colando o código. Você também pode importar gradientes do Adobe Illustrator.

Onde posso encontrar gradientes Figma gratuitos?

Você pode encontrar gradientes Figma gratuitos e pagos na comunidade Figma . Ele apresenta uma infinidade de designs lindos e exclusivos criados por usuários do Figma. Você pode filtrar por plug-ins, arquivos e widgets. Basta digitar “gradiente” na barra de pesquisa na parte superior e encontrar o que você gosta.

Divirta-se com gradientes coloridos

Os gradientes são uma excelente forma de tornar um design distinto e personalizado. E o Figma permite que você faça uma transição suave entre duas ou mais cores que você escolher. No entanto, não exagere. Misture cores que combinem bem e tente permanecer na mesma paleta de cores.

Você já tentou fazer um gradiente no Figma? Conte-nos nos comentários abaixo qual estilo de gradiente você usou e para que o usou.