¿Cómo hacer efecto vidrio en Figma?

¿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:

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%

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%

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%

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

• background blur le damos un valor de 150px.

Le vamos dando los detalles finales:

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

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.

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

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.

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

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.