Glass, blur, shadow, gradient, noise y smart animate. Galería completa con definición, uso y prompt copiable.
Biblioteca visual para entender, aplicar y reutilizar efectos, estilos y transiciones inspiradas en Figma.
Figma ha definido una forma moderna de construir interfaces: limpias, modulares, visualmente coherentes y con transiciones fluidas. Esta sección reúne los efectos visuales y de motion más útiles para crear experiencias digitales profesionales.
Estilos como sombras, blur, glass, glow o gradientes que definen la apariencia y profundidad de los elementos.
Cambios animados entre frames: Smart Animate, Dissolve, Move In, Push o Instant.
Pequeñas respuestas a la acción del usuario: hover, focus, drag, tap — refuerzan claridad y feedback.
Cada efecto se muestra aplicado dentro de su propia caja visual.
Vidrio translúcido con sensación de profundidad.
Sombra exterior que separa el elemento del fondo.
Sombra interna con sensación táctil embebida.
Blur aplicado directamente sobre una capa.
Desenfoque del contenido detrás del elemento.
Grano fino que agrega riqueza superficial.
Capa de textura visual elegante.
Resplandor sutil que realza un elemento.
Capa de color en degradado.
Tarjeta elevada con sensación flotante.
Demos visuales de las transiciones nativas de Figma.
Transición inteligente entre estados similares.
Transición por desvanecimiento.
Cambio inmediato sin animación.
Elemento o pantalla entra/sale con desplazamiento.
Una pantalla empuja a otra.
Entrada o salida por deslizamiento.
Movimiento con física suave o rebote controlado.
Curvas de aceleración y desaceleración.
Recomendaciones por tipo de proyecto.
Efectos: Glass, Gradient Overlay, Soft Glow, Floating Card
Motion: Smart Animate, Spring, Ease-out
Refuerza foco en CTA y percepción premium.
Efectos: Drop Shadow, Inner Shadow, Floating Card, Soft Glow
Motion: Smart Animate, Dissolve, Instant
Claridad de datos y jerarquía funcional.
Efectos: Glass, Background Blur, Noise, Soft Glow
Motion: Spring, Smart Animate, Ease-in-out
Sensación avanzada, tecnológica y fluida.
Efectos: Gradient Overlay, Noise, Texture, Layer Blur
Motion: Smart Animate, Dissolve
Narrativa visual rica y cinemática.
Efectos: Floating Card, Drop Shadow, Texture
Motion: Slide, Ease-out, Smart Animate
Elegancia editorial y foco en obra.
Efectos: Drop Shadow, Glass, Soft Glow
Motion: Dissolve, Smart Animate, Spring
Producto destacado y compra fluida.
Efectos: Floating Card, Glass, Gradient Overlay
Motion: Move In/Out, Spring
Cercanía, dinamismo y pertenencia.
Efectos: Drop Shadow, Floating Card, Texture
Motion: Ease-in-out, Dissolve
Confianza, orden y solidez visual.
El antes y después de aplicar criterios visuales.
La sombra crea jerarquía inmediata y guía la lectura.
El blur separa capas y aporta sensación premium.
El degradado aporta energía y dirección visual.
El motion conecta estados y mejora continuidad.
La combinación eleva impacto y percepción de marca.
Cómo se ven los efectos sobre componentes reales.
Soft Glow + Spring
CTA principales
Foco inmediato y respuesta táctil.
Floating + Drop Shadow
Beneficios y servicios
Lectura ordenada y premium.
Gradient Overlay + Glow
Llamados clave
Maximiza clics y atención.
Glass + Background Blur
Acciones importantes
Aísla foco sin perder contexto.
Inner Shadow
Formularios
Sensación táctil y clara.
Background Blur + Border
Navegación sticky
Profesional y siempre legible.
Soft Glow
Estados / notificaciones
Visible sin saturar.
Floating + Noise
Métricas
Material premium y ordenado.
Los efectos y transiciones no deben decorar por decorar. Deben mejorar claridad, jerarquía, experiencia y percepción de valor.
Da el siguiente paso
Accede a recursos avanzados, plantillas, prompts premium, laboratorios guiados y acompañamiento para aplicar estos sistemas en proyectos reales.