Zeroheight

Definición Rápida

Zeroheight es una plataforma online que permite crear, documentar y mantener sitios web de [[Sistema de Diseño]] de una manera centralizada y colaborativa. Se integra directamente con herramientas de diseño como Figma y herramientas de desarrollo como [[Storybook]] para crear una “fuente única de verdad” para todo tu sistema de diseño.

¿Qué es Zeroheight?

Imagina que tu [[Sistema de Diseño]] es un libro de cocina. Figma es donde diseñas las fotos de los platos (los componentes visuales). [[Storybook]] es donde los chefs escriben y prueban las recetas (el código de los componentes). Zeroheight es la editorial que coge esas fotos y esas recetas y las publica en un libro de cocina online, bonito y fácil de usar para que todo el mundo en el “restaurante” (tu empresa) sepa cómo cocinar los platos de forma consistente.

Zeroheight crea un sitio web de documentación para tu sistema de diseño, conectando los recursos de diseño y de código en un solo lugar.

¿Por qué es importante?

• Crea una “Fuente Única de Verdad”: Es el lugar al que todo el mundo (diseñadores, desarrolladores, PMs, marketing) acude para encontrar la información más actualizada sobre el sistema de diseño.
• Sincroniza Diseño y Desarrollo: Al poder mostrar componentes de Figma junto a los componentes de código de Storybook, se asegura que ambos mundos estén alineados.
• Facilita la documentación: Su editor de texto enriquecido y sus integraciones hacen que el proceso de escribir las guías de uso sea mucho más sencillo que crearlo desde cero.
• Mejora la adopción del sistema de diseño: Un sistema de diseño solo es útil si la gente lo usa, y la gente solo lo usará si está bien documentado y es fácil de acceder. Zeroheight resuelve este problema.

Funcionalidades Clave

• Integración con Figma: Permite insertar componentes, estilos y frames de Figma directamente en la documentación. Si actualizas algo en Figma, se actualiza en Zeroheight.
• Integración con Storybook: Permite embeber los componentes de Storybook, mostrando la versión en código interactiva.
• Guías de Contenido: Un editor de texto flexible para escribir las reglas de uso, los principios de diseño, las guías de tono y voz, etc.
• Tokens de Diseño: Permite gestionar y mostrar los “design tokens” (colores, tipografías, espaciados) de forma centralizada.

Consejos de Mentor

• La documentación es un producto, no un proyecto: Debe tener un dueño y ser mantenida y mejorada continuamente. No es algo que se hace una vez y se olvida.
• No documentes solo el “qué”, sino el “porqué” y el “cuándo”: No te limites a mostrar un componente. Explica para qué problema sirve, cuándo debe usarse, cuáles son sus variantes y las reglas de accesibilidad.
• Haz que sea fácil de encontrar: Asegúrate de que toda la empresa sepa que existe el sitio de Zeroheight y cómo acceder a él.
• Empieza con lo esencial: No necesitas documentar todo tu sistema de diseño desde el día uno. Empieza con los fundamentos (colores, tipografía) y los 5-10 componentes más utilizados.

Recursos y Herramientas

• Recursos:
  • Zeroheight Blog: Tienen muchos artículos sobre las mejores prácticas en la creación y mantenimiento de sistemas de diseño.
  • Design Systems Gallery: Una colección de ejemplos de sitios de documentación de sistemas de diseño para inspirarte.
• Alternativas:
  • Notion (para una documentación más simple).
  • Storybook Docs (documentación dentro de Storybook).
  • GitBook.