---
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/


---
Source attribution: vjrivmon
Original project: https://github.com/vjrivmon/Setup-Software-IA/blob/b5c895079bd4577e4bdd0d9b81565b53090be50d/.claude/skills/ux-ui/gestalt/figure-ground/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2025 Vicente Rivas Monferrer

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: vjrivmon
Original project: https://github.com/vjrivmon/Setup-Software-IA/blob/b5c895079bd4577e4bdd0d9b81565b53090be50d/.claude/skills/ux-ui/gestalt/figure-ground/SKILL.md
Attribution basis: Recovered original package and original project license at a pinned revision

Fields of work: Design
Roles: Graphic Designer, Product Designer, UX Designer
Specialties: Design
Tools: Tool not specified
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: bdaa62fa0b0859a9152876ba6165e321613edb0994d01b34b0d57b17db7855d3
Metadata reviewed: 2026-10-27
This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.