Design systems para XR: diseñar para realidad aumentada y virtual

Un design system para XR (realidad extendida: virtual, aumentada y mixta) cumple la misma función que uno para web o móvil —ser la fuente única de verdad de componentes, tokens y patrones—, pero opera en un medio radicalmente distinto: la interfaz vive en un espacio tridimensional, se mira desde distancias variables y se maneja con manos, mirada o controladores en lugar de ratón y pantalla táctil.

Esto significa que no puedes “portar” tu design system web a XR ajustando tamaños. Cambian las unidades, la tipografía, los estados de los componentes, la ergonomía y hasta el concepto de “pantalla”. En esta guía repasamos qué cambia, qué referencias públicas existen y cómo abordar un sistema para XR sin empezar de cero.

# Qué cambia en XR respecto a web y móvil

# Las unidades: de píxeles a ángulos y metros

En una pantalla, un botón mide píxeles. En XR, el tamaño percibido depende de la distancia: un panel a 1 metro y otro a 3 metros necesitan tamaños físicos distintos para leerse igual. Por eso los sistemas espaciales trabajan con unidades angulares (grados de campo visual) o puntos escalados por distancia, y los design tokens de tamaño y tipografía deben definirse en función de la distancia de visualización, no en valores absolutos.

# La tipografía y el contraste

Las pantallas de los visores tienen menos resolución efectiva por grado que un móvil moderno, y el texto flota sobre fondos impredecibles (el mundo real, en AR). Consecuencias prácticas: cuerpos de texto mayores, pesos medios (los finos vibran), alto contraste con fondos semiopacos y evitar bloques largos de lectura.

# El input: mirada, manos, controladores y voz

Un mismo componente necesita responder a modelos de interacción diferentes: mirada + pellizco (visionOS), rayos de controlador, toque directo con la mano o comandos de voz. Los estados del componente se multiplican: al hover clásico se suman el “gaze hover” (mirada posada) y los estados de proximidad de la mano. Documentar estados es aún más crítico que en web (aquí explicamos por qué).

# La ergonomía y el confort

En XR el mal diseño cansa físicamente: paneles demasiado altos fuerzan el cuello, objetivos pequeños fatigan la precisión del gesto, movimientos inesperados marean. Un design system XR incluye directrices que en web no existen: zonas cómodas de colocación de contenido, distancias mínimas, presupuestos de movimiento y anclaje de ventanas.

# La accesibilidad

Además de lo habitual (contraste, tamaños), aparecen dimensiones nuevas: alternativas al gesto para personas con movilidad reducida, subtítulos espaciales, opciones de reducción de movimiento y confort para usuarios propensos al mareo. Los sistemas maduros lo tratan como especificación de componente, no como recomendación.

# Referencias públicas: los design systems XR que puedes estudiar

Todavía no existe un “Material Design de XR” dominante, pero hay tres referencias públicas de gran calidad:

• Apple visionOS (Human Interface Guidelines) — La sección de visionOS de las HIG de Apple es hoy la referencia más completa de diseño espacial: materiales translúcidos, jerarquía por profundidad, interacción mirada-pellizco y ergonomía del contenido.
• Meta Horizon OS — Las directrices de diseño de Meta Horizon cubren interacción con manos y controladores, colocación de paneles y patrones de confort para Quest.
• Microsoft Mixed Reality / MRTK — Las guías de diseño de realidad mixta de Microsoft y su toolkit MRTK fueron pioneras (HoloLens) y siguen siendo útiles para interacción con manos y hologramas anclados al mundo.

Los tres aparecen también en nuestra colección de design systems, junto a los sistemas 2D de referencia.

# Cómo abordar un design system para XR

Si tu equipo va a construir producto en XR, nuestro consejo es no partir de cero ni duplicar el sistema entero:

1. Extiende tus tokens, no los reemplaces. Color, marca y voz siguen siendo tuyos. Añade una capa de tokens espaciales: distancias de colocación, tamaños angulares de tipografía, materiales/opacidades y radios para superficies curvas.
2. Redefine los componentes de interacción. Botones, listas y paneles necesitan variantes espaciales con estados de mirada y proximidad. Los componentes de contenido (tarjetas, medios) se adaptan mejor.
3. Añade patrones que no existen en 2D: colocación y anclaje de ventanas, transiciones entre modos inmersivos, onboarding gestual, gestión del espacio compartido en apps multiusuario.
4. Documenta el confort como requisito: zonas ergonómicas, presupuesto de movimiento, alternativas de input. Trátalo igual que la accesibilidad (gobernanza aplica igual aquí).
5. Prototipa en el dispositivo. Figma no reproduce la percepción de profundidad ni la fatiga: las decisiones de tamaño y distancia se validan con el visor puesto. Herramientas como Unity, Reality Composer Pro o ShapesXR sirven de puente entre diseño y desarrollo.

# Preguntas frecuentes

# ¿Qué es un design system XR?

Es un design system orientado a experiencias de realidad extendida (VR, AR y realidad mixta): además de componentes, tokens y documentación, define unidades espaciales, modelos de input (manos, mirada, controladores), ergonomía y patrones de colocación de contenido en 3D.

# ¿Puedo reutilizar mi design system web en XR?

Parcialmente. La marca, el color, la voz y parte de los componentes de contenido se trasladan; los tamaños, la tipografía, los estados de interacción y los patrones de navegación deben redefinirse para el medio espacial.

# ¿Cuál es el mejor design system XR público?

Las directrices de visionOS de Apple son hoy la referencia más completa de diseño espacial; las de Meta Horizon OS son imprescindibles si desarrollas para Quest, y las guías de realidad mixta de Microsoft siguen siendo valiosas para interacción con manos.

¿Estás dando tus primeros pasos con sistemas de diseño? Empieza por ¿qué es un design system? y la guía para crear uno paso a paso.