Viewports y outline en Storybook

Curso de Storybook: Sistemas de Diseño con JavaScript

Contenido del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

21
Qué sigue después de Storybook
01:17 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:32

Viewports y outline en Storybook

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 16 de 21

Clase 16 / 21

Recursos

¿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.

Resumen

¿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.

¿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?

¿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', }, }, };

¿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', }, };

¿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?

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.

Visión general de los sistemas de diseño en desarrollo

Qué es Storybook y para qué sirve

Creación de Sistemas de Diseño con Storybook

Desarrollo de componentes

Instalación de Storybook con Vanilla JavaScript

Arquitectura de componentes en Storybook con Atomic Design

Exportar design tokens de Figma a CSS

Crear un botón reutilizable con Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Componente Card en JavaScript con BEM

Container Queries vs Media Queries en CSS

Estilización de Componentes CSS con Container Queries

Historias en Storybook

Cómo estructurar historias en Storybook

Controles de argTypes para botones en Storybook

Parámetros y decoradores en Storybook

Essential Addons en Storybook

Qué son los add-ons en Storybook

Actions y Backgrounds en Storybook

Viewports y outline en Storybook

Pruebas de componentes en Storybook

Cómo usar el test runner de Storybook

Pruebas de Interacción con Storybook y Testing Library

Pruebas de Accesibilidad en Storybook con Add-ons

Pruebas visuales de UI con Chromatic

Próximos pasos

Qué sigue después de Storybook

Viewports y outline en Storybook

Progreso del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

Recursos

Recursos