¿Cómo se ven tus componentes en distintos tamaños de pantalla y cómo verificas que estén bien alineados? En Storybook puedes resolverlo con tres add-ons clave: viewport, measure y outline, herramientas pensadas para quienes construyen interfaces y necesitan validar visualmente cada componente sin abrir el inspector del navegador.

¿Qué hace el add-on viewport en Storybook?

El viewport te permite previsualizar tu componente en distintos tamaños de pantalla directamente desde la toolbar. Por defecto, Storybook trae tres medidas listas para usar.

• Small mobile: ancho de 320 píxeles [01:00].
• Large mobile: tamaño intermedio para pantallas móviles más grandes.
• Tablet: medida estándar para dispositivos tipo tableta.

Al hacer clic en cualquiera de estas opciones, Storybook muestra el ancho y el alto exactos del viewport simulado, lo que facilita revisar el comportamiento responsive sin salir de la herramienta.

¿Para qué sirve el viewport en Storybook? Sirve para previsualizar tu componente en diferentes tamaños de pantalla y validar que se vea bien en mobile, tablet o desktop sin necesidad de abrir el navegador.

¿Cómo crear viewports personalizados según tu design system?

Cuando tu equipo de diseño trabaja con medidas distintas a las que Storybook trae por defecto, puedes definir tus propios viewports desde el archivo preview [02:00]. La idea es alinear tus tamaños con los fundamentos del design system que el equipo de diseño ya estableció en herramientas como Figma.

¿Dónde se declaran los custom viewports?

Dentro del archivo preview, declara una constante llamada customViewports y define cada medida como un objeto con nombre y estilos.

js const customViewports = { smallUgly: { name: 'small ugly', styles: { width: '360px', height: '540px', }, }, mediumUgly: { name: 'medium ugly', styles: { width: '1024px', height: '1200px', }, }, };

Cada entrada lleva un name que aparecerá en el menú de Storybook y un objeto styles con width y height en píxeles. Puedes usar nombres propios como small ugly o medium ugly para identificarlos rápido.

¿Cómo se conectan esos viewports con Storybook?

No basta con declarar la constante: hay que registrarla dentro de la propiedad parameters del preview para que Storybook los reconozca [04:00].

js export const parameters = { viewport: { viewports: customViewports, defaultViewport: 'smallUgly', }, };

La propiedad viewports recibe el objeto que creaste, y defaultViewport define cuál se carga al abrir cada story. Al guardar y recargar Storybook, las nuevas medidas aparecen en el menú listas para usarse.

¿Cómo agrego un viewport personalizado en Storybook? Crea un objeto con name y styles (width y height) en el archivo preview, expórtalo dentro de parameters.viewport.viewports y opcionalmente define un defaultViewport.

¿Para qué sirven measure y outline al revisar componentes UI?

Estos dos add-ons viven al lado del viewport en la toolbar y resuelven dos preguntas frecuentes durante el desarrollo de UI: ¿qué medidas tiene este componente? y ¿están alineados sus elementos?

El add-on measure funciona como una regla visual. Antes tenías que abrir el inspector del navegador para revisar márgenes, padding o tamaños [05:00]. Ahora basta con activarlo y pasar el cursor sobre el componente para ver al instante si tu botón tiene los 24 píxeles de margen que pediste, o cómo se distribuye el espacio en componentes más elaborados.

El add-on outline, ubicado a la derecha de measure, dibuja líneas alrededor de cada elemento de la UI. Es una validación puramente visual que te ayuda a detectar si tus elementos están bien alineados, si hay desajustes en la maqueta o si la jerarquía visual responde a lo que diseñaste.

• Measure: regla visual para inspeccionar tamaños y espaciados sin usar el inspector.
• Outline: contornos visibles para verificar alineación y estructura de la UI.
• Viewport: previsualización en distintos tamaños de pantalla.

Usados juntos, estos tres add-ons cierran el ciclo de revisión visual de un componente: defines el contexto de pantalla con viewport, mides con measure y validas la alineación con outline.

Cuéntame en los comentarios cómo te fue experimentando con tu componente usando la reglita, el outline y los viewports personalizados.