Textura y profundidad
Sombras
No es oscuridad. Es dirección.
Las sombras en diseño le dicen al ojo de dónde viene la luz y qué está más cerca. Una sola sombra suave, hacia el lado correcto, ya da profundidad.
2 demos interactivas
Guía gratis por DM
Textura y profundidad
01
Qué es
Las sombras en diseño no sirven para oscurecer: sirven para orientar. Una sombra le dice al ojo dos cosas: de dónde viene la luz y qué está más cerca de ti.
No necesitas sombras negras ni grandes. Una sola, suave y hacia el lado contrario de la luz ya separa una tarjeta del fondo y hace que la interfaz se sienta real.
La regla de oro
Una sola fuente de luz. Todas las sombras caen hacia el mismo lado.
02
Pruébalo
Arrastra la luz (o usa el control) y mira cómo las tres sombras la siguen juntas. Después prueba «Ver sin dirección».
Una sola luz. Todas las sombras caen al lado contrario de la luz. Más alto, más grande y más suave.
03
Así no / así sí
Sin dirección.
Sombras negras, de borde duro y cada una hacia un lado. Se ven sucias y el ojo no entiende de dónde viene la luz.
Una sola luz.
Sombras suaves, de color oscuro azulado y todas hacia el mismo lado. Lo que flota más alto lleva la sombra más grande.
04
Anatomía de una buena sombra
Lo que está más cerca de ti proyecta una sombra más grande y más suave. Tres niveles que puedes copiar: baja (Y 2 · Blur 6 · 12%), media (Y 8 · Blur 24 · 15%) y alta (Y 24 · Blur 60 · 20%).
Desplazamiento X e Y: hacia dónde cae, al lado contrario de la luz. Luz arriba = Y positivo. Desenfoque: entre 2 y 3 veces el Y; más blur, más natural. Opacidad: entre 10 y 25%; si se nota a primera vista, bájala. Color: nunca negro puro, usa un tono oscuro del fondo o un gris azulado.
En Figma: Efectos › Drop shadow. Ahí ajustas X, Y, Blur y la opacidad del color.
05
Cómo aplicarlo hoy
1
Decide de dónde viene la luz
Arriba o arriba a la izquierda es lo más natural. Decídelo una vez.
2
Todas hacia el mismo lado
Mismo ángulo para todas las sombras del diseño. Sin excepciones.
3
Suave antes que oscura
Mucho desenfoque y poca opacidad. Que se sienta, no que se vea.
4
Más cerca, más sombra
Usa los tres niveles: lo que flota más alto lleva la sombra más grande.
06
Antes de publicar
- ¿Todas las sombras caen hacia el mismo lado?
- ¿Ninguna es negra pura ni de borde duro?
- ¿Cada elemento tiene una sola sombra?
- ¿Se siente la profundidad sin que la sombra grite?
COMENTA
“SOMBRA”
y te envío
la guía
por DM
La guía de sombras en PDF: seis páginas con ejemplos, reglas y la lista para revisar antes de publicar. Comenta la palabra en el reel de Instagram y te llega por mensaje directo.
Preguntas
frecuentes
¿Cómo hacer una sombra que se vea natural en Figma?
Usa Drop shadow con Y positivo, un blur de 2 a 3 veces el Y y una opacidad entre 10 y 25%. Cambia el negro por un tono oscuro del fondo o un gris azulado.
¿Hacia dónde debe caer la sombra?
Al lado contrario de la luz. Si la luz viene de arriba a la izquierda, la sombra cae abajo a la derecha, y todas las sombras del diseño siguen esa misma dirección.
¿Por qué mis sombras se ven sucias?
Casi siempre es porque son negras, tienen poco desenfoque o mucha opacidad. Sube el blur, baja la opacidad y usa un color oscuro con algo de tono en vez de negro puro.
Sigue aprendiendo
