Figma: El Lienzo Colaborativo
Como Figma construyo el diseno multiplayer en tiempo real: indicadores de presencia, lienzo infinito, Dev Mode y design tokens. Codigo CSS y JS incluido.
“En la filosofía de Figma, queríamos que la IA fuera multijugador. La colaboración siempre ha estado en el corazón de todo lo que hacemos.” — Equipo de Figma
Figma transformó el diseño de un oficio solitario en un deporte de equipo. Como la primera herramienta de diseño con edición colaborativa en vivo, Figma demostró que las herramientas creativas complejas podían ser tan fluidas como Google Docs, manteniendo al mismo tiempo la precisión que los diseñadores exigen.
Por qué Figma importa
Figma no se limitó a añadir multijugador a las herramientas de diseño. Reimaginó cómo se hace el diseño. Al integrar la colaboración en los cimientos, Figma cambió los flujos de trabajo, las dinámicas de equipo y todo el pipeline de diseño a desarrollo.
Logros clave: - Primera herramienta de diseño con edición multijugador en tiempo real - Pionera del “lienzo infinito” como paradigma de interfaz - Hizo que los sistemas de diseño fueran accesibles para todos los equipos - Conectó diseño y desarrollo con Dev Mode - Construyó un imperio creativo de $20B basado en la colaboración
Conclusiones clave
- Lo multijugador requiere simplicidad - Figma construyó una solución propia más simple que las transformaciones operacionales porque los sistemas más simples son más fáciles de depurar y mantener
- El lienzo infinito invita a la exploración - A diferencia de las herramientas basadas en páginas, un lienzo abierto fomenta la iteración y evita restricciones artificiales
- Las interfaces conscientes del contexto reducen la carga cognitiva - Las barras de herramientas y paneles que se adaptan a la selección muestran solo los controles relevantes
- Los design tokens conectan diseño y código - Las variables con capas de primitivos → semánticos → componentes crean un lenguaje compartido entre diseñadores y desarrolladores
- Dev Mode es un espacio de trabajo dedicado - Separar las herramientas de desarrollo de las herramientas de diseño respeta los diferentes modelos mentales y flujos de trabajo
Principios fundamentales de diseño
1. Multijugador como base
Figma construyó una solución multijugador propia que es más simple que los enfoques tradicionales como las transformaciones operacionales (OTs). Su objetivo era la claridad: el sistema no debería ser más complejo de lo necesario.
La filosofía: Dado que Figma no es un editor de texto, no necesitaban la potencia de las OTs y podían conformarse con algo menos complicado. Los sistemas más simples son más fáciles de razonar, implementar, depurar, probar y mantener.
Patrones visuales para multijugador:
PRESENCE INDICATORS:
┌─────────────────────────────────────────────────────────────────┐
│ Canvas │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Component: Button │ (o) Alice │
│ │ ┌────────────────────┐ │ <- Live cursor │
│ │ │ Primary Button │ │ │
│ │ └────────────────────┘ │ │
│ └──────────────────────────────────────┘ (*) Bob │
│ <- Selection ring │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Input Field (+) Carol │ <- Editing mode │
│ │ ┌────────────────────────────────┐ │ │
│ │ │ | │ │ │
│ │ └────────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
CURSOR DESIGN:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ Cursor anatomy: │
│ │
│ ▲ │
│ ╱ ╲ │
│ ╱ ╲ ← Arrow (user's color) │
│ ╱_____╲ │
│ ┌─────────┐ │
│ │ Alice │ ← Name label (appears on hover/activity) │
│ └─────────┘ │
│ │
│ States: │
│ • Idle: Cursor only │
│ • Active: Cursor + name label │
│ • Editing: Cursor + name + "Editing..." badge │
│ • Away: Faded cursor (50% opacity) │
│ │
└─────────────────────────────────────────────────────────────────┘
Principios de implementación: - Los usuarios se identifican por color, no solo por nombre - Los anillos de selección muestran quién está trabajando y dónde - El movimiento del cursor se optimiza con debounce por rendimiento - Los indicadores de presencia se atenúan cuando los usuarios están inactivos
2. El lienzo infinito
El lienzo de Figma es un entorno abierto y flexible que permite la iteración rápida. A diferencia de las herramientas basadas en páginas, el lienzo infinito invita a la exploración.
Patrones de interacción del lienzo:
NAVIGATION:
┌─────────────────────────────────────────────────────────────────┐
│ Space + drag Pan the canvas │
│ Scroll Pan vertically │
│ Shift + scroll Pan horizontally │
│ Cmd/Ctrl + +/- Zoom in/out │
│ Cmd/Ctrl + 0 Zoom to 100% │
│ Cmd/Ctrl + 1 Zoom to fit │
│ Cmd/Ctrl + 2 Zoom to selection │
└─────────────────────────────────────────────────────────────────┘
ZOOM LEVELS WITH PURPOSE:
┌─────────────────────────────────────────────────────────────────┐
│ 100%+ Pixel-level detail work │
│ 50-100% Component editing │
│ 25-50% Page/screen level │
│ 10-25% Flow overview │
│ <10% Bird's eye navigation │
│ │
│ UI adapts per zoom: │
│ • Text hides below readability threshold │
│ • Details simplify at distance │
│ • Frame labels always visible │
└─────────────────────────────────────────────────────────────────┘
Patrón de minimapa:
/* Canvas navigation mini-map */
.minimap {
position: fixed;
bottom: 16px;
right: 16px;
width: 200px;
height: 150px;
background: rgba(0, 0, 0, 0.8);
border-radius: 8px;
overflow: hidden;
}
.minimap-viewport {
/* Current visible area */
border: 2px solid var(--color-primary);
background: rgba(255, 255, 255, 0.1);
cursor: grab;
}
.minimap-content {
/* Simplified render of all frames */
opacity: 0.6;
}
3. La barra de herramientas como centro de comando
La barra de herramientas de Figma encarna la revelación progresiva: simple a primera vista, potente al explorarla.
Arquitectura de la barra de herramientas:
FIGMA TOOLBAR ANATOMY:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────┬─────┬─────┬─────┬─────┬─────────────────┬───────────┐ │
│ │ [=] │ [>] │ [R] │ [O] │ [-] │ T (H) [...] │ Share v │ │
│ └──┬──┴──┬──┴──┬──┴──┬──┴──┬──┴────────┬────────┴─────┬─────┘ │
│ │ │ │ │ │ │ │ │
│ Menu Move Frame Shape Line Text/Hand/ Collaboration │
│ tools tools Comment │
│ │
│ FLYOUT PATTERN: │
│ ┌─────┐ │
│ │ [R] │ <- Primary tool (click) │
│ └──┬──┘ │
│ │ ┌─────────────────────────┐ │
│ └──│ [R] Rectangle R │ <- Long-press reveals options │
│ │ [O] Ellipse O │ │
│ │ [^] Polygon │ │
│ │ [*] Star │ │
│ │ [I] Place image Cmd+K │ │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
CONTEXT-AWARE TOOLBAR:
Selection changes toolbar options dynamically:
No selection: [Move] [Frame] [Shape] [Pen] [Text]
Frame selected: [Move] [Frame] [Auto layout ▼] [Grid ▼]
Text selected: [Move] [Font ▼] [Size ▼] [Weight ▼] [Align]
Component selected: [Move] [Variants] [Properties] [Detach]
4. Panel de propiedades: inteligencia contextual
El panel derecho se adapta completamente según la selección, mostrando solo los controles relevantes.
Arquitectura del panel:
PROPERTIES PANEL STATES:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ NO SELECTION: FRAME SELECTED: │
│ ┌────────────────────┐ ┌────────────────────┐ │
│ │ Design Prototype │ │ Design Prototype │ │
│ ├────────────────────┤ ├────────────────────┤ │
│ │ │ │ Frame │
│ │ Select something │ │ W: 375 H: 812 │ │
│ │ to see properties │ │ X: 100 Y: 200 │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Auto Layout │ │
│ │ │ │ ═══ ↕ 16 ↔ 24 │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Fill │ │
│ │ │ │ ■ #FFFFFF 100% │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Stroke │ │
│ │ │ │ + Add stroke │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Effects │ │
│ │ │ │ + Add effect │ │
│ └────────────────────┘ └────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Patrón de implementación CSS:
/* Figma-style properties panel */
.properties-panel {
width: 240px;
background: var(--bg-secondary);
border-left: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
}
.property-section {
padding: 12px 16px;
border-bottom: 1px solid var(--border-subtle);
}
.property-section-header {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
margin-bottom: 8px;
}
/* Secciones colapsables */
.property-section[data-collapsed="true"] .property-section-content {
display: none;
}
/* Grupos de campos en línea */
.property-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.property-label {
width: 24px;
font-size: 11px;
color: var(--text-tertiary);
}
.property-input {
flex: 1;
height: 28px;
padding: 0 8px;
font-size: 11px;
background: var(--bg-tertiary);
border: 1px solid transparent;
border-radius: 4px;
}
.property-input:focus {
border-color: var(--color-primary);
outline: none;
}
5. Variables y Design Tokens
Para 2025/2026, los equipos más progresistas construyen sistemas completamente basados en Figma Variables: decisiones de diseño atómicas que conectan diseño y código.
Arquitectura de tokens:
ESTRUCTURA DE VARIABLES:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ PRIMITIVOS (Valores base) │
│ ├── colors/ │
│ │ ├── blue-50: #EBF5FF │
│ │ ├── blue-100: #D1E9FF │
│ │ ├── blue-500: #2563EB ← Color primario de marca │
│ │ └── ... │
│ ├── spacing/ │
│ │ ├── 4: 4px │
│ │ ├── 8: 8px │
│ │ ├── 16: 16px │
│ │ └── ... │
│ └── radius/ │
│ ├── sm: 4px │
│ ├── md: 8px │
│ └── lg: 16px │
│ │
│ SEMÁNTICOS (Significado contextual) │
│ ├── surface/ │
│ │ ├── primary: → colors/white │
│ │ ├── secondary: → colors/gray-50 │
│ │ └── elevated: → colors/white │
│ ├── text/ │
│ │ ├── primary: → colors/gray-900 │
│ │ ├── secondary: → colors/gray-600 │
│ │ └── disabled: → colors/gray-400 │
│ └── interactive/ │
│ ├── default: → colors/blue-500 │
│ ├── hover: → colors/blue-600 │
│ └── pressed: → colors/blue-700 │
│ │
│ COMPONENTE (Uso específico) │
│ ├── button/ │
│ │ ├── background: → interactive/default │
│ │ ├── text: → colors/white │
│ │ └── radius: → radius/md │
│ └── card/ │
│ ├── background: → surface/elevated │
│ ├── padding: → spacing/16 │
│ └── radius: → radius/lg │
│ │
└─────────────────────────────────────────────────────────────────┘
CSS custom properties a partir de Figma Variables:
/* Exportado desde Figma Variables */
:root {
/* Primitivos */
--color-blue-500: #2563EB;
--color-gray-900: #111827;
--spacing-16: 16px;
--radius-md: 8px;
/* Tokens semánticos */
--color-interactive-default: var(--color-blue-500);
--color-text-primary: var(--color-gray-900);
/* Tokens de componente */
--button-bg: var(--color-interactive-default);
--button-radius: var(--radius-md);
--card-padding: var(--spacing-16);
}
/* Modo oscuro mediante modos de variables */
[data-theme="dark"] {
--color-text-primary: #F9FAFB;
--color-surface-primary: #1F2937;
}
6. Dev Mode: Puente entre diseño y código
El Dev Mode de Figma es un espacio de trabajo dedicado para desarrolladores que traduce la intención de diseño en código listo para producción.
Flujo de trabajo en Dev Mode:
FLUJO DE DISEÑO → ENTREGA A DESARROLLO:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 1. EL DISEÑADOR MARCA COMO LISTO │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ Frame: Login Screen [✓ Listo para dev] ││
│ │ ││
│ │ Al marcarlo como listo: ││
│ │ • Aparece en la cola del desarrollador ││
│ │ • Se bloquean ediciones importantes ││
│ │ • Se activa el seguimiento de cambios ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
│ 2. EL DESARROLLADOR INSPECCIONA │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ ┌──────────────────┐ ┌──────────────────────────────────┐ ││
│ │ │ │ │ CSS │ ││
│ │ │ [Button] │ │ .button { │ ││
│ │ │ │ │ display: flex; │ ││
│ │ │ │ │ padding: 12px 24px; │ ││
│ │ └──────────────────┘ │ background: var(--primary); │ ││
│ │ │ border-radius: 8px; │ ││
│ │ Seleccionado: Button │ } │ ││
│ │ Componente: ui/Button │ │ ││
│ │ Última edición: hace 2h│ [Copiar] [Cambiar a Swift] │ ││
│ │ └──────────────────────────────────┘ ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
│ 3. COMPARACIÓN DE CAMBIOS │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ Cambios desde la última revisión del desarrollador: ││
│ │ ││
│ │ - Padding: 16px → 12px ││
│ │ + Border radius: 8px (nuevo) ││
│ │ ~ Color: #2563EB → var(--primary) ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘
Sistema de color
La interfaz de Figma utiliza una paleta neutral y contenida que mantiene el foco en el contenido del usuario.
/* Paleta de colores de la interfaz de Figma */
:root {
/* Superficies */
--bg-canvas: #E5E5E5; /* Fondo del canvas */
--bg-primary: #FFFFFF; /* Paneles, frames */
--bg-secondary: #F5F5F5; /* Paneles secundarios */
--bg-tertiary: #E8E8E8; /* Campos de entrada, contenedores */
/* Texto */
--text-primary: #000000;
--text-secondary: #666666;
--text-tertiary: #999999;
/* Bordes */
--border-subtle: rgba(0, 0, 0, 0.1);
--border-strong: rgba(0, 0, 0, 0.2);
/* Interactivo */
--color-primary: #0D99FF; /* Selección, foco */
--color-primary-hover: #0085EB;
--color-success: #14AE5C;
--color-warning: #FFCD29;
--color-error: #F24822;
/* Colores multijugador (asignados a usuarios) */
--cursor-1: #F24822; /* Rojo */
--cursor-2: #FF7262; /* Coral */
--cursor-3: #FFCD29; /* Amarillo */
--cursor-4: #14AE5C; /* Verde */
--cursor-5: #0D99FF; /* Azul */
--cursor-6: #9747FF; /* Púrpura */
--cursor-7: #FF00FF; /* Magenta */
}
/* Modo oscuro */
[data-theme="dark"] {
--bg-canvas: #1E1E1E;
--bg-primary: #2C2C2C;
--bg-secondary: #383838;
--bg-tertiary: #444444;
--text-primary: #FFFFFF;
--text-secondary: #ABABAB;
--text-tertiary: #7B7B7B;
}
Tipografía
Figma utiliza Inter para su interfaz, una tipografía diseñada específicamente para pantallas.
/* Sistema tipográfico de Figma */
:root {
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Escala tipográfica */
--text-xs: 11px; /* Etiquetas, metadatos */
--text-sm: 12px; /* Cuerpo, propiedades */
--text-md: 13px; /* Encabezados */
--text-lg: 14px; /* Títulos de sección */
/* Pesos */
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
/* Alturas de línea */
--leading-tight: 1.2;
--leading-normal: 1.4;
--leading-relaxed: 1.6;
}
/* Aplicación */
.section-header {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
}
.property-label {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.layer-name {
font-size: var(--text-sm);
font-weight: var(--font-medium);
}
Animaciones y microinteracciones
Figma utiliza movimiento sutil y con propósito para proporcionar retroalimentación sin distraer.
/* Principios de movimiento de Figma */
:root {
/* Duraciones */
--duration-instant: 50ms; /* Estados hover */
--duration-fast: 100ms; /* Alternadores, cambios pequeños */
--duration-normal: 200ms; /* Transiciones de panel */
--duration-slow: 300ms; /* Transiciones de página */
/* Curvas de aceleración */
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Deslizamiento del panel */
.panel {
transform: translateX(100%);
transition: transform var(--duration-normal) var(--ease-out);
}
.panel[data-visible="true"] {
transform: translateX(0);
}
/* Resaltado de selección */
.layer-item[data-selected="true"] {
background: var(--color-primary);
transition: background var(--duration-fast) var(--ease-out);
}
/* Desvanecimiento de presencia del cursor */
.remote-cursor {
transition: opacity var(--duration-slow) var(--ease-out);
}
.remote-cursor[data-idle="true"] {
opacity: 0.5;
}
Innovaciones clave
FigJam: Ampliando la metáfora del lienzo
FigJam extendió el lienzo de Figma al ámbito de las pizarras colaborativas, demostrando que el lienzo infinito funciona para la ideación, no solo para el trabajo pixel a pixel.
Decisiones de diseño: - Paleta de colores cálida y lúdica frente a los tonos neutros de Figma - Notas adhesivas con física (pueden ser “lanzadas”) - Sellos y reacciones para retroalimentación asíncrona - Temporizador y votación para facilitación
Variables: Tokens de diseño nativos
Figma Variables convirtió los tokens de diseño en ciudadanos de primera clase, permitiendo: - Cambio de modo (claro/oscuro, temas de marca) - Tokens responsivos (valores para móvil/escritorio) - Variables numéricas para lógica de prototipado
Integración de IA (2025+)
El enfoque de Figma hacia la IA se centra en la colaboración: - Linting impulsado por IA para cumplimiento de tokens - Sugerencias predictivas de variables - Recomendaciones de optimización de diseño - Exploración de diseño generativo en Weave
Lecciones para la implementación
1. Construir para multijugador desde el primer día
// Arquitectura del sistema de presencia
class PresenceManager {
constructor(roomId) {
this.users = new Map();
this.localUser = null;
this.socket = new WebSocket(`wss://collab.example.com/${roomId}`);
// Debounce cursor updates
this.broadcastCursor = debounce((position) => {
this.socket.send(JSON.stringify({
type: 'cursor',
userId: this.localUser.id,
position,
timestamp: Date.now()
}));
}, 50);
}
updateCursor(x, y) {
this.localUser.cursor = { x, y };
this.broadcastCursor({ x, y });
}
// Fade idle users
checkIdleUsers() {
const now = Date.now();
const IDLE_THRESHOLD = 30000; // 30 seconds
this.users.forEach(user => {
user.isIdle = (now - user.lastActivity) > IDLE_THRESHOLD;
});
}
}
2. Interfaces Sensibles al Contexto
// Panel content based on selection
function getPropertiesForSelection(selection) {
if (selection.length === 0) {
return { type: 'empty', message: 'Select something to see properties' };
}
if (selection.length > 1) {
return { type: 'mixed', items: selection };
}
const item = selection[0];
switch (item.type) {
case 'FRAME':
return {
type: 'frame',
sections: ['dimensions', 'autoLayout', 'fill', 'stroke', 'effects']
};
case 'TEXT':
return {
type: 'text',
sections: ['font', 'paragraph', 'fill']
};
case 'COMPONENT':
return {
type: 'component',
sections: ['properties', 'variants', 'dimensions']
};
default:
return {
type: 'generic',
sections: ['dimensions', 'fill', 'stroke']
};
}
}
3. Revelación Progresiva en Barras de Herramientas
<!-- Tool with flyout variants -->
<div class="tool-button" data-tool="shape">
<button class="tool-primary" title="Rectangle (R)">
<svg><!-- Rectangle icon --></svg>
</button>
<div class="tool-flyout" hidden>
<button data-variant="rectangle">
<svg></svg> Rectangle <kbd>R</kbd>
</button>
<button data-variant="ellipse">
<svg></svg> Ellipse <kbd>O</kbd>
</button>
<button data-variant="polygon">
<svg></svg> Polygon
</button>
<button data-variant="star">
<svg></svg> Star
</button>
<hr>
<button data-variant="image">
<svg></svg> Place image <kbd>Cmd+Shift+K</kbd>
</button>
</div>
</div>
<script>
// Long-press to reveal flyout
const LONG_PRESS_DURATION = 300;
toolButtons.forEach(btn => {
let pressTimer;
btn.addEventListener('pointerdown', () => {
pressTimer = setTimeout(() => {
btn.querySelector('.tool-flyout').hidden = false;
}, LONG_PRESS_DURATION);
});
btn.addEventListener('pointerup', () => {
clearTimeout(pressTimer);
});
});
</script>
Principios Relacionados
- Gestalt: Proximidad y Agrupamiento: Organización de paneles
- Jerarquía Visual: Diseño de lista de capas
- Teoría del Color: Color Funcional: Estado y selección
- Espaciado y Ritmo: Sistema de cuadrícula de 8px
Preguntas Frecuentes
¿Cómo funciona la tecnología multijugador de Figma?
Figma desarrolló una solución propia más simple que las transformaciones operacionales (OTs) tradicionales. Dado que Figma maneja objetos en un canvas en lugar de texto en un documento, pudieron utilizar un sistema de resolución de conflictos menos complejo. Los cambios se sincronizan mediante conexiones WebSocket, con las posiciones de los cursores limitadas a intervalos de 50ms para optimizar el rendimiento. Los usuarios se identifican mediante cursores codificados por color con etiquetas de nombre que aparecen según la actividad.
¿Cuál es la diferencia entre Figma y FigJam?
Figma es una herramienta de diseño de precisión para trabajo de UI/UX con control a nivel de píxel, componentes y auto layout. FigJam es una pizarra colaborativa para ideación con una paleta de colores más cálida, notas adhesivas con física, sellos, reacciones y herramientas de facilitación como temporizadores y votaciones. Ambos comparten el paradigma de canvas infinito pero sirven para propósitos diferentes dentro del proceso de diseño.
¿Cómo funcionan las Variables de Figma para sistemas de diseño?
Las variables siguen una arquitectura de tres niveles: primitivos (valores crudos como blue-500: #2563EB), tokens semánticos (significado contextual como interactive-default → blue-500) y tokens de componente (uso específico como button-background → interactive-default). Esta estructura por capas permite el cambio de modo para temas claro/oscuro y valores responsivos, manteniendo una única fuente de verdad.
¿Qué es Dev Mode y para quién está dirigido?
Dev Mode es un espacio de trabajo dedicado para desarrolladores que traduce la intención de diseño en código listo para producción. Los diseñadores marcan los frames como “ready for dev”, lo que los bloquea contra ediciones mayores y habilita el seguimiento de cambios. Los desarrolladores ven fragmentos de código generados en CSS, Swift u otros lenguajes, referencias de componentes y una vista de diferencias que muestra qué cambió desde su última inspección.
¿Por qué Figma utiliza un canvas infinito en lugar de páginas?
El canvas infinito elimina las restricciones artificiales que imponen las herramientas basadas en páginas. Los diseñadores pueden distribuir flujos de usuario completos lado a lado, comparar variantes a diferentes niveles de zoom y explorar ideas sin gestionar la navegación entre páginas. Los niveles de zoom cumplen diferentes propósitos: 100%+ para trabajo a nivel de píxel, 25-50% para revisión a nivel de página y menos del 10% para navegación panorámica.