Como criar um efeito de vidro fosco no Figma

O vidro fosco funciona bem para privacidade ou para adicionar sutileza a um design, na vida real e em designs digitais. Criar um efeito de vidro fosco é fácil no Figma e pode adicionar um toque único aos seus designs de uma maneira que parece muito mais complexa do que é. Vamos mostrar-lhe como.

Como criar um efeito de vidro fosco

Para o efeito completo do vidro fosco, você já deve ter algum tipo de imagem de fundo em seu design. O efeito funciona melhor em imagens fotográficas ou visualmente complexas, em vez de apenas blocos de cores simples ou planos de fundo simples.

Estamos usando o efeito de vidro fosco como um indicador de marcador em um design de apresentação, para adicionar um efeito elegante e minimalista à apresentação. Isso dá um toque extra aos seus designs, em vez de apenas usar uma linha simples ou um marcador simples como indicador.

Você pode criar um modelo mestre para apresentações no Figma e use este efeito de vidro fosco nele. Se você quiser criar um indicador de ponto de bala elegante, basta seguir adiante.

1. Desenhe uma linha

Desenhe sua linha usando o Ferramenta de linha (eu). Para manter a linha horizontal, mantenha pressionado Mudança enquanto o desenha. Escolha uma cor para a linha clicando no quadrado colorido abaixo Derrame enquanto a linha é selecionada.

A cor deve ser escura o suficiente para contrastar com o plano de fundo, mas também precisa ficar bem com as cores da apresentação. Você pode use o Adobe Illustrator para criar uma paleta de cores para encontrar cores que funcionem juntas.

Altere a largura da linha nas configurações de Traço; clique no ícone com três linhas horizontais e aumente o número até a espessura desejada. Para obter extremidades arredondadas, clique no menu suspenso com uma linha horizontal no menu Traçado e role até a parte inferior do menu suspenso para a opção de extremidades arredondadas.

2. Desenhar um círculo

Desenhe um pequeno círculo usando o Ferramenta Elipse (O). Calma Mudança enquanto desenha o círculo para torná-lo perfeitamente esférico. Seu círculo deve ser pequeno o suficiente para ser usado como um marcador, mas grande o suficiente para que o vidro fosco fique evidente.

Para adicionar cor, selecione o círculo e use Encher na barra de ferramentas do lado direito. Você pode usar uma cor neutra – como cinza ou bege – ou uma cor mais clara da paleta de cores do seu design.

Em seguida, altere o opacidade ao lado de Encher para qualquer lugar entre 40% e 70%. Você quer poder ver o desenho atrás do círculo enquanto ainda vê a cor com a qual você preencheu o círculo.

3. Adicionar um desfoque de fundo

Esta é a parte que dá o efeito fosco à sua forma. Selecione o círculo e vá para Efeitos. O efeito padrão é Sombra projetada, passe o mouse sobre ele e clique na seta que aparece. Escolher Desfoque de fundo.

Para aumentar ou diminuir o desfoque, clique no ícone ao lado de Desfoque de fundo e altere o número para o efeito de desfoque desejado.

Para completar seu indicador de marcador, mova a linha para que ela se alinhe com a borda do seu círculo. Selecione a linha e o círculo, clique com o botão direito e selecione Seleção de grupo. Agora você pode mover ou duplicar isso para usar em várias partes do seu design.

O desfoque funciona sobre qualquer parte do design da mesma maneira, como mostrado em outro exemplo que fizemos acima. Por que não incluir esta técnica em um desafio de design criativo? O efeito se tornará um ótimo recurso de design.

Adicione um minimalismo elegante aos seus designs com um efeito de vidro fosco

O efeito de vidro fosco no Figma é uma maneira simples de adicionar um estilo elegante a aspectos de design simples. Você pode usar o efeito de vidro fosco de várias maneiras, como painéis coloridos, barras de pesquisa ou janelas de privacidade sobre designs. Tente adicionar uma borda, fazer um gradiente ou colocar a camada fosca entre outras camadas para obter alguma diferença de textura.

Como criar e adicionar maquetes aos seus designs Figma usando plugins

Leia a seguir