gradient

¿Conoces la tendencia de diseño llamada Glassmorphism? este estilo de diseño se volvió muy popular y actualmente podemos encontrar muchos ejemplos para inspirarnos. Básicamente trata de imitar un vidrio esmerilado (frosted glass) aprovechando el juego de transparencias, desenfoque y brillos. Juntamos todos estos elementos y conseguimos una llamativa apariencia de cristal. Hay muchas formas de crear este estilo, acá te enseñamos como lograr el efecto vidrio en Figma:

ejemplo de tarjeta con glassmorfismo

Lo «engañoso» de este efecto es que necesita de un fondo apropiado para que el efecto resalte, si es muy plano simplemente no se notara. Para elegir el fondo, debes asegurarte que haya suficiente diferencia de tonos para que el efecto de cristal sea realmente visible. Así que lo recomendable seria tener formas con colores llamativos, algún degradado, incluso puede usarse fotografías. Debes cuidar que no sean demasiado complejas, sino el resultado podría dar problemas de lectura.

Efecto vidrio (Glassmorphism) en Figma – Paso a paso

Una vez seleccionado un fondo apropiado creamos rectángulo con la herramienta de formas, redondeamos las equinas y bajamos la opacidad al 8%

paso 1 efecto vidrio en Figma

Desde el panel de diseño agregamos un efecto de sobra con las siguientes especificaciones:

  • X: 4, Y: 7, desenfoque: 15px, color: #000000, opacidad: 8%
paso 2 efecto vidrio en Figma

Nuevamente en el mismo panel agregamos un par de veces el efecto de brillo interior (inner shadow) de la siguiente forma

  • X: 5, Y: -5, desenfoque (blur): 12px, color: #ffffff, opacidad: 5%
  • X: -5, Y: 5, desenfoque (blur): 12px, color: #ffffff, opacidad: 5%
paso 3 efecto vidrio en Figma

Ahora es momento de darle ese efecto de esmerilado con el desenfoque de fondo (background blur):

  • background blur le damos un valor de 150px.
paso 4 efecto vidrio en Figma

Le vamos dando los detalles finales:

  • Un brillo interior X: -1, Y: 0, desenfoque (blur): 2px, color: #c9c9c9, opacidad: 10%.
paso 5 efecto vidrio en Figma

Finalmente con la herramienta de trazo agregamos un borde interior blanco de un 1px con trasparecía al 8%, esto con el fin de emular el reflejo de luz que tienen los vidros en los bordes.

paso 6 efecto vidrio en Figma

Como detalle adicional le podemos dar textura con un efecto de ruido o granulado, en Figma aun no tenemos este efecto así que buscamos una imagen grano fino y aplicamos el modo de fusión Lighten con opacidad al 10% logramos este resultado

paso 7 efecto vidrio en Figma

Toma en cuenta que el desenfoque y la transparencia de la forma puede variar dependiendo de lo que quieras lograr. Si la pieza esta mas despegada del fondo deberá ser mas transparente y tener una sombra mas difusa. Mientras que si esta en plano mas cercano al fondo deberá ser mas borrosa y menos traslucida y la sombra mas definida.

ejemplo de UI aplicando efecto
ejemplo de UI aplicando efecto vidrio

Accesibilidad

Este efecto puede encontrarse con problemas de legibilidad, así que asegúrate de armar una buena composición y tendrá mayor probabilidad de funcionar. Sigue como regla que si el diseño funciona sin fondo, entonces con el efecto seguir? siendo accesible para personas con visión limitada

ejemplo de composicion

El Glassmorphism es un efecto interesante para experimentar y crear diseño de formas distintas y vale la pena probar esta tendencia, en Dribbble, Behance y Pinterest podrás conseguir muchos ejemplos y formas distintas de aplicar este estilo de diseño, ¿Deseas dar el siguiente paso y llevar esto a código? checa como lograr este efecto de vidrio con css en este articulo.

Ana Echeverría

Diseñadora entusiasta por el diseño de interfaces (UI/UX), convirtiendo cafeína en diseño desde 2017. Co-fundadora de pixonauta.com

Editado el: 10 abril, 2022
Suscribirse
Notificar a
guest

1 Comentario
Más antiguo
El mas nuevo Más votado
Inline Feedbacks
Ver todos los comentarios
Andres Briñez
6 months ago

Muy buena explicación de cómo lograr este efecto en Figma. Los pasos son claros y fáciles de seguir. Me encanta cómo utilizan las transparencias, el desenfoque y los brillos para crear ese efecto de vidrio tan realista. ¡Gracias por compartir este tutorial! Definitivamente, lo pondré en práctica en mis proyectos. 👍