Como criar o efeito de vidro mórfico no Figma

Alguns já devem ter visto o efeito de transparência e sensação de vidro embasado em determinados elementos. Então vamos criá-lo no seu software!

Abra o Figma e siga as instruções a seguir.

Crie um retângulo com as seguintes proporções e adicione uma borda arredondada a ele:

Tamanho: 340px X 520px Ângulo: 90º

Raio de canto: 40px

Adicione ao retângulo o preenchimento linear com as seguintes configurações:

Topo: Cor- #FFFFFF Opacidade- 40%

Fundo: Cor- #FFFFFF Opacidade- 10%

Em Efeitos adicione o Background Blur com blur de 45.

Para ilustrar o cartão e transmitir a sensação de vidro adicionei 2 círculos:

O círculo inferior com a cor: #E79F7A e opacidade de 100%.

O círculo superior com a cor: #F2994A com opacidade de 100%.

Para trazer a sensação de um cartão físico coloque a borda com as seguintes configurações:

Insira o preenchimento linear

Cor 1: #FFF1EA, cor 2: #E79F7A, cor 3: #E3BCA8(40%), cor 4: #D79F83

Grossura da borda: 3

Abaixo do efeito Background Blur adicione o Drop Shadow:

X: 0 Y: 4

Blur: 24 Spread: -1

Cor: #D4AF9C (25%)

Complete seu cartão com informações sobre o usuário, empresa e ícones importantes.

Agora você pode usar esse efeito nos seus projetos quando usar o software do Figma!