Lograr que un diseño plano transmita profundidad y realismo es uno de los retos más frecuentes al trabajar con vectores. En Figma, los efectos de sombra y difuminado permiten simular luz, volumen y capas sin recurrir a editores de píxeles. Dominar estas herramientas marca la diferencia entre una interfaz que se siente estática y una que parece cobrar vida.
¿Cómo funcionan las sombras externas en Figma?
Al seleccionar cualquier objeto y agregar un efecto, Figma asume por defecto un drop shadow [01:42]. Este tipo de sombra externa se proyecta por fuera del elemento y se configura con cuatro valores principales:
- Eje X: desplaza la sombra a la derecha o izquierda.
- Eje Y: controla la profundidad vertical, generando la sensación de elevación.
- Blur: define qué tan difuso es el borde de la sombra.
- Spread: expande o contrae el área total de la sombra.
Un consejo práctico es reducir la opacidad del color de la sombra a valores cercanos al 12 % [02:47]. Esto genera un resultado más natural, sin ocultar los elementos que puedan estar debajo.
¿Qué es Beautiful Shadows y por qué usarlo?
Cuando se necesita un efecto de iluminación más realista, agregar manualmente múltiples capas de sombra puede ser tedioso. El plugin Beautiful Shadows [03:29] resuelve esto al generar automáticamente varias sombras superpuestas sobre un mismo objeto. Lo más interesante es que permite alterar la posición de la fuente de luz en tiempo real, arrastrándola hacia la derecha o la izquierda, y previsualizar el resultado antes de aplicarlo. También se puede personalizar el color y el fondo del objeto. Al confirmar, Figma conserva todas las capas de sombra editables de forma individual.
¿Para qué sirve la sombra interna o inner shadow?
A diferencia del drop shadow, el inner shadow proyecta la sombra hacia el interior del objeto [04:23]. Este efecto es clave para simular materiales físicos con capas, como plásticos o cristales.
El ejemplo mostrado es la ilustración vectorial de un LED [04:15]. Cada círculo tiene aplicado un inner shadow con estos valores:
- Posición X en cero, Y en cuatro.
- Blur de cuatro.
- Spread en cero.
- Color negro al 9 % de opacidad.
Sin estas sombras internas, la ilustración pierde toda sensación de profundidad y jerarquía entre las piezas. Con ellas, se entiende que existen capas de material superpuestas sobre el LED central [05:23].
¿Cómo seleccionar y eliminar efectos de todos los elementos a la vez?
Un truco muy útil: al presionar Enter repetidamente dentro de un grupo, se seleccionan todos los elementos anidados [05:10]. Desde ahí, en la sección de efectos de la barra de propiedades, se pueden agregar o remover sombras de golpe para comparar el antes y el después.
¿Cómo crear fondos con gradientes difuminadas usando layer blur?
El efecto de difuminado de capa o layer blur [06:15] transforma objetos con relleno sólido en manchas de color suaves. Para lograrlo:
- Se colocan varios círculos con colores distintivos dentro de un frame.
- Se agrega el efecto layer blur en lugar de drop shadow.
- Se incrementa el valor del blur; un rango entre 200 y 240 genera gradientes armónicas [06:40].
El resultado puede funcionar como fondo de pantalla. Aunque el vector sigue existiendo y es seleccionable, visualmente desaparece su contorno. Para verificar la posición de los vectores ocultos por efectos, el atajo Command + Y muestra los contornos delimitados en pantalla [07:15].
¿Qué es el background blur y cómo se aplica en barras de navegación?
El difuminado de fondo o background blur [07:40] es el efecto que se ve en aplicaciones como WhatsApp en iOS, donde la barra de navegación deja entrever los colores del contenido que pasa por detrás.
Para replicarlo en Figma:
- El frame de la barra necesita un fill con opacidad reducida, por ejemplo al 48 % [08:10].
- Se agrega el efecto background blur con un valor cercano a 40 [08:50], que es múltiplo de ocho y mantiene buena legibilidad.
- Si la opacidad del fill está al 100 %, el efecto no será visible.
Este equilibrio entre opacidad del relleno y fuerza del difuminado permite que los colores del contenido se conserven sin comprometer la lectura de los textos sobre la barra.
¿Ya experimentaste combinando sombras externas e internas sobre un mismo objeto? Comparte tus exploraciones en los comentarios.
