---
name: figure-ground
description:
  El cerebro separa elementos en primer plano y fondo. Use cuando diseñe
  modales, overlays, focus states, o jerarquía visual de capas.
metadata:
  author: ux-ui-skills
  version: "1.0"
  category: gestalt
---

# Principio de Figura-Fondo

## Resumen

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/