Zeroheight

Definición Rápida

Zeroheight is an online platform that allows you to create, document, and maintain [[Design System]] websites in a centralized and collaborative way. It integrates directly with design tools like Figma and development tools like [[Storybook]] to create a “single source of truth” for your entire design system.

What Is Zeroheight?

Imagine your [[Design System]] is a cookbook. Figma is where you design the photos of the dishes (the visual components). [[Storybook]] is where the chefs write and test the recipes (the component code). Zeroheight is the publisher that takes those photos and recipes and publishes them in an online cookbook, beautiful and easy to use, so everyone in the “restaurant” (your company) knows how to cook the dishes consistently.

Zeroheight creates a documentation website for your design system, connecting design and code resources in one place.

Why Is It Important?

• It creates a “Single Source of Truth”: It is the place everyone (designers, developers, PMs, marketing) goes to find the most up-to-date information about the design system.
• It syncs Design and Development: By being able to show Figma components alongside Storybook code components, it ensures both worlds are aligned.
• It facilitates documentation: Its rich text editor and integrations make the process of writing usage guides much simpler than creating them from scratch.
• It improves design system adoption: A design system is only useful if people use it, and people will only use it if it is well documented and easy to access. Zeroheight solves this problem.

Key Features

• Figma Integration: Allows inserting Figma components, styles, and frames directly into the documentation. If you update something in Figma, it updates in Zeroheight.
• Storybook Integration: Allows embedding Storybook components, showing the interactive code version.
• Content Guides: A flexible text editor for writing usage rules, design principles, tone and voice guides, etc.
• Design Tokens: Allows managing and displaying “design tokens” (colors, typography, spacing) in a centralized way.

Mentor Tips

• Documentation is a product, not a project: It should have an owner and be maintained and improved continuously. It is not something you do once and forget about.
• Don’t document just the ‘what,’ but the ‘why’ and the ‘when’: Don’t just show a component. Explain what problem it solves, when it should be used, what its variants are, and the accessibility rules.
• Make it easy to find: Ensure the entire company knows that the Zeroheight site exists and how to access it.
• Start with the essentials: You don’t need to document your entire design system from day one. Start with the fundamentals (colors, typography) and the 5-10 most-used components.

Resources and Tools

• Resources:
  • Zeroheight Blog: They have many articles on best practices for creating and maintaining design systems.
  • Design Systems Gallery: A collection of design system documentation site examples for inspiration.
• Alternatives:
  • Notion (for simpler documentation).
  • Storybook Docs (documentation within Storybook).
  • GitBook.