El sistema perceptual organiza elementos visuales en figuras (objetos de atención) y fondo (contexto). Los elementos se perciben como uno u otro, no ambos simultáneamente.

Origen

Escuela: Psicología de la Gestalt
Año: ~1920s
Autor principal: Edgar Rubin (jarrón de Rubin)

Fundamento Psicológico

El cerebro necesita separar objetos de su contexto para procesarlos. La relación figura-fondo es inestable cuando ambos son igualmente prominentes (como en ilusiones ópticas), causando confusión visual. En diseño, debemos hacer clara esta distinción.

Aplicación en Diseño

Modales y Overlays

Background oscurecido (scrim) detrás de modal
Modal con shadow prominente
Elevación visual clara
Focus trap en el elemento frontal

Jerarquía de Capas

Z-index consistente para tipos de elementos
Shadows que indican elevación
Blur en elementos de fondo
Contraste entre capas

Focus y Selección

Elementos seleccionados destacados del fondo
Estados hover con elevación sutil
Active states con mayor prominencia
Disabled states fundidos con fondo

Texto y Contenido

Contraste suficiente texto/fondo (4.5:1 mínimo)
Backgrounds que no compiten con contenido
Imágenes con overlays para texto
Cards elevadas sobre el fondo de página

Ejemplos

iOS Modals: Fondo desenfocado, modal nítido
Google Material: Elevation system con shadows
Lightboxes: Imagen destacada, fondo oscurecido
Dropdown menus: Elevados sobre contenido
Toast notifications: Flotando sobre la UI

Anti-patterns

❌ Modales sin scrim que se pierden en el fondo
❌ Texto sobre imágenes sin overlay
❌ Elementos superpuestos sin jerarquía clara
❌ Backgrounds con patrones que compiten
❌ Niveles de elevación inconsistentes

Métricas

Contrast Ratio: Cumplimiento de WCAG (4.5:1, 3:1)
Layer Hierarchy Test: Usuarios identifican qué está "encima"
Modal Visibility: Reconocimiento inmediato de overlays
Visual Noise Score: Competencia figura/fondo medida

Principios Relacionados

[[closure]] - Completar figuras reconocibles
[[nielsen-minimalist-design]] - Reducir ruido de fondo
[[common-region]] - Delimitar figuras claramente

Referencias

Rubin, E. (1915). "Synsoplevede Figurer"
Palmer, S.E. (1999). "Vision Science: Photons to Phenomenology"
https://www.nngroup.com/articles/gestalt-figure-ground/

npx skills add smithery/vjrivmon --skill figure-ground