Efecto Glass en Figma: crea profundidad y realismo en tus interfaces

Hoy he entrado en Figma y me he topado con la notificación de que ha lanzado recientemente una nueva funcionalidad llamada Glass, que nos permite aplicar efectos visuales inspirados en el vidrio esmerilado, directamente desde el panel de Effects. Es una herramienta que abre muchas posibilidades visuales para trabajar con capas superpuestas, jugando con la luz, la refracción y el desenfoque, de una forma mucho más sofisticada y natural.

Este tipo de efecto es ideal para mejorar la jerarquía visual en interfaces con fondos complejos o con mucho contenido, sin comprometer la legibilidad ni la claridad. La idea es que puedas generar una sensación de profundidad y contexto visual que se sienta integrada y coherente con el resto del diseño.

Y como no me he podido aguantar, ya he ido corriendo a abrir alguno de mis diseños para ponerlo a prueba. ¡Te cuento como!

Aplicación práctica Efecto Glass

He estado explorando esta funcionalidad en uno de mis propios proyectos, Insect Scan. Para poder ponerte un poco más en contexto, Insect Scan es una app diseñada para identificar insectos a partir de imágenes tomadas por el usuario.

Una de las claves del diseño era mostrar con claridad el nombre de cada especie detectada, directamente encima del insecto en cuestión, algo especialmente útil cuando hay más de un ejemplar en la misma imagen. Para resolver esto, apliqué el efecto Glass en las etiquetas que contienen el nombre de cada insecto identificado.

Te enseño a continuación un ejemplo de pantalla sobre el que lo apliqué:

Esto me permitió integrar la información dentro de la imagen de forma limpia y visual, sin que interfiriera en el contenido fotográfico. Jugué con distintos niveles de refracción, profundidad y dispersión, ajustando los valores según el tipo de fondo o contraste de cada escena. El resultado fue una interfaz visualmente rica, clara y mucho más realista.

Me interesaba sobre todo que el diseño no solo se viera bien, sino que también ayudara a guiar al usuario de forma intuitiva. Glass me ha permitido lograr justo ese equilibrio.

¿Qué opciones ofrece el efecto Glass?

El efecto Glass aparece como una nueva entrada dentro del panel de efectos, y nos permite ajustar varios parámetros con los que personalizar la apariencia visual:

• Refraction: controla la distorsión del fondo.
• Depth: añade un nivel de relieve o volumen.
• Dispersion: crea una separación sutil de colores, como si la luz se dividiera en un prisma.
• Frost: aporta un acabado difuminado, útil para destacar contenido sin perder fondo.
• Light: ajusta dirección e intensidad de la iluminación.

Todo esto se puede combinar entre sí, y lo mejor es que se aplica de forma no destructiva, lo que facilita la iteración y el ajuste fino en cualquier fase del diseño.

Puedes ver a continuación de manera práctica cómo puedes ajustar todas las diferentes opciones del efecto Glass:

Una herramienta para experimentar: el playground oficial de Figma

Para quienes quieran probar a fondo esta nueva funcionalidad, Figma ha publicado un archivo interactivo con distintos ejemplos ya configurados. Este playground oficial permite ver cómo se comporta el efecto en diferentes contextos: componentes con scroll, animaciones con vídeos de fondo, cambios de estados, entre otros.

Personalmente, siempre recomiendo revisar este tipo de recursos. Te permiten entender hasta dónde puede llegar una herramienta antes de integrarla en tus propios diseños. Puedes acceder al archivo desde aquí: Glass playground en Figma

Qué tener en cuenta antes de aplicar Glass

En la documentación oficial de Figma también se detallan algunas consideraciones técnicas importantes antes de utilizar este efecto en proyectos profesionales. Estas son algunas de las más relevantes:

• Solo puede aplicarse a frames, no a formas individuales o grupos.
• Todas las esquinas deben tener el mismo radio para que funcione correctamente.
• No es compatible con exportación en SVG, solo se puede copiar como PNG.
• No se renderiza en Figma Sites, aunque se vea en el editor.
• No genera reflejos ambientales como sí lo hace, por ejemplo, el sistema de Apple.
• Puede ralentizar archivos complejos o dispositivos más antiguos.

Estos detalles están recogidos en el artículo de ayuda oficial de Figma sobre cómo aplicar efectos a capas. Si vas a integrar Glass en un proyecto profesional, te recomiendo revisar esta guía directamente: Apply effects to layers – Figma Help Center

Una funcionalidad que eleva el diseño

Glass es una de esas herramientas que parecen pequeñas al principio, pero que marcan una diferencia real cuando las aplicas bien. Aporta profundidad, elegancia y contexto sin complicar la estructura del diseño. En mi caso, he podido integrar esta funcionalidad en una app de visión artificial como Insect Scan, reforzando tanto la experiencia de usuario como la calidad visual de la interfaz.

Me gusta especialmente que se trate de una solución nativa de Figma, sin necesidad de plugins ni recursos externos. Eso facilita el flujo de trabajo y mantiene todo el diseño centralizado en una sola herramienta.