Sombras y blur para dar profundidad en Figma

Contenido del curso

No sé dónde empezar

Introducción a Figma y Diseño Básico

Organización de Proyectos

Componentes y Estilos

Herramientas Avanzadas

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:46

Sombras y blur para dar profundidad en Figma

Curso de Figma

Clase 10 de 22

Clase 10 / 22

Recursos

Llevar un diseño plano a otro nivel en Figma depende de algo más que figuras y colores: depende de cómo aplicas efectos como sombras y difuminados para sumar profundidad, realismo y jerarquía. Si trabajas en interfaces o ilustración digital, dominar estos recursos cambia por completo el resultado final.

¿Cómo aplicar una sombra básica con drop shadow en Figma?

La sombra más sencilla en Figma se llama drop shadow y aparece por defecto al agregar un efecto desde la barra de propiedades. Es la base para entender cómo se comportan las luces sobre un objeto vectorial.

Desde el panel de Effects, al presionar el ícono de sumar, Figma asume que quieres una drop shadow. A partir de ahí puedes ajustar:

Posición en eje X, por ejemplo 4 puntos hacia la derecha.
Posición en eje Y, para mover la sombra arriba o abajo y ganar profundidad.
Blur, que define qué tan difuminada se ve, alrededor de 10 funciona bien.
Spread, que la hace más grande o la mantiene en cero.
Color y opacidad, donde un 12% de opacidad se siente mucho más natural que el 100% por defecto [02:00].

¿Qué es el drop shadow en Figma? Es una sombra externa que se proyecta detrás del objeto. Sirve para dar profundidad y se controla con posición, blur, spread, color y opacidad.

¿Cómo lograr sombras realistas con Beautiful Shadows?

Cuando quieres un efecto más complejo, puedes apilar manualmente cinco sombras distintas sobre un mismo objeto, combinando profundidad y contorno. Pero existe un atajo mucho mejor: el plugin Beautiful Shadows.

Lo abres con Command + K, escribes su nombre y el plugin carga una previsualización. Puedes mover la fuente de luz a la derecha o a la izquierda, ajustar el color hacia un verde, definir el fondo del objeto y, al aplicar, te deja las cinco sombras listas y editables dentro de Figma [03:30].

¿Para qué sirve el inner shadow en ilustraciones?

No todas las sombras van por fuera. El inner shadow es una sombra interior que aporta sensación de capas y profundidad, ideal para ilustraciones que imitan objetos físicos.

En una ilustración de un LED, cada pequeño espacio interno usa un inner shadow con valores muy sutiles: posición X en 0, Y en 4, blur en 4, spread en 0 y un negro al 9% de opacidad. Ese detalle es lo que hace creer que hay capas de plástico sobre el LED central [05:30].

Para comparar el efecto, puedes duplicar la ilustración, seleccionar todos los elementos internos presionando Enter hasta el último nivel y eliminar los efectos. Sin la sombra interior, se pierde el realismo y la jerarquía visual entre capas.

¿Cuál es la diferencia entre drop shadow e inner shadow? El drop shadow proyecta la sombra hacia afuera del objeto; el inner shadow la genera hacia adentro y se usa para simular profundidad y volumen interno.

¿Cómo crear gradientes modernos con layer blur?

El layer blur difumina la capa completa del objeto seleccionado, perfecto para gradientes coloridos que están de moda en interfaces. Basta con cuatro círculos de colores distintos dentro de un frame.

Seleccionas el frame, agregas un efecto y eliges layer blur en lugar de drop shadow. Subes el valor del difuminado a 200 y empiezas a ver la magia; en 400 los colores se sincronizan demasiado, así que un valor cercano a 240 equilibra bien la mezcla [08:30].

Un truco útil: con Shift + Espacio previsualizas el resultado en un dispositivo y compruebas que sirve incluso como fondo de pantalla. Y si necesitas verificar que los vectores siguen ahí debajo del efecto, presionas Command + Y para ver los contornos reales sin importar los efectos aplicados.

¿Qué hace el background blur y dónde se usa?

El background blur difumina lo que está detrás del objeto, no el objeto mismo. Es el efecto típico de las barras de navegación en iOS o WhatsApp, donde el contenido se desplaza por debajo y conserva sus colores difuminados.

Para aplicarlo necesitas algo clave: el fill del frame no puede estar al 100% de opacidad. Si está sólido, el difuminado del fondo no se entiende. En el ejemplo del menú de navegación de Apata, el fill está al 48% y sobre eso se agrega un background blur [10:30].

El valor del difuminado depende del balance que busques entre legibilidad y color. 72 puede ser demasiado fuerte, mientras que 40 funciona muy bien porque conserva los resaltos del fondo, mantiene la lectura del menú y además es múltiplo de 8, una buena práctica de diseño de interfaces.

¿Cómo se hace el efecto de menú translúcido tipo iOS en Figma? Aplicas un fill con opacidad menor al 100%, sumas un efecto background blur desde el panel de Effects y ajustas el valor de difuminado entre 40 y 72.

¿Qué efectos de Figma usar según el caso?

Cada tipo de efecto cumple una función distinta dentro de un mismo proyecto y conviene tenerlos identificados:

Drop shadow para sombras externas suaves en botones, tarjetas o componentes.
Inner shadow para ilustraciones con sensación de capas y volumen.
Layer blur para gradientes difuminados que se usan como fondos.
Background blur para barras de navegación, modales o menús flotantes que dejan ver el contenido detrás.

Experimenta cambiando colores, posiciones y opacidades. ¿Qué pasaría si el LED central tuviera otro color, o si combinaras un layer blur de fondo con un menú con background blur encima? Cuéntame en los comentarios qué exploraciones has hecho con sombras externas, internas y difuminados.