Zeroheight: Design System Documentation in Sync

Zeroheight creates design system documentation that syncs with your design tools and code. Instead of static PDFs or wikis that go stale, Zeroheight pulls components directly from Figma, Sketch, or Storybook to build living style guides. When you update a button in Figma, it updates in your docs automatically. Built for design system teams who are tired of maintaining documentation that’s always one version behind.

Key Specs

How Designers Use Zeroheight

Zeroheight works best when your design system already exists in tools like Figma or Sketch. Here’s how teams apply it to documentation workflows.

For Component Documentation

Connect your Figma library and drag components directly into Zeroheight pages. Each component can include multiple views: design specs, usage guidelines, do’s and don’ts, code examples, and accessibility notes. Designers write the guidelines in the WYSIWYG editor while components stay synced with the source files. When someone updates the button component in Figma, the documentation shows the latest version automatically.

For Design Tokens

Document colors, typography, spacing, and other design tokens with live previews. Create a color palette page that pulls directly from Figma styles or CSS variables. When developers change a token value in code, Zeroheight can reflect the update if you’ve connected it to GitHub or Storybook. This eliminates the “what’s the actual spacing value?” Slack messages.

For Brand Guidelines

Build brand identity guidelines with logo usage, photography style, tone of voice, and illustration principles. Unlike traditional brand books that are PDFs, Zeroheight’s web format means you can search, link to specific sections, and update guidelines without republishing an entire document. Great for onboarding new designers or distributing brand guidelines to marketing teams.

For Cross-Functional Alignment

Create a single source of truth that designers, developers, and product managers all reference. Designers link to component pages in Figma handoff, developers copy code snippets during implementation, and PMs reference patterns when writing specs. Everyone works from the same documentation, reducing inconsistencies across platforms.

Zeroheight vs. Alternatives

How does Zeroheight compare to other documentation tools? Here’s what you get with each.

Choose Zeroheight if: You have a design system in Figma or Sketch and need documentation that syncs automatically, with editing access for non-developers.

Choose Storybook if: Your design system lives in React/Vue/Angular components and you want developers to document in code alongside development.

Choose Notion if: You need general documentation and can manually update component images when they change, or don’t need component syncing.

Choose Supernova if: You want design-to-code automation with Figma token export and more developer tooling than Zeroheight offers.

Getting Started with Zeroheight

A 20-minute walkthrough to publish your first style guide:

Step 1: Connect your design tool

After signing up, connect Figma or Sketch in the integrations settings. For Figma, install the Zeroheight plugin and grant library access. Zeroheight will scan your libraries and let you select which components to sync. Start with a small library (buttons, inputs, colors) rather than syncing everything at once.

Step 2: Create your first component page

Click “New page” and choose the component template. Name it “Button” or whatever component you’re documenting. In the editor, use / to open the insert menu, then select “Figma component” to embed your button. Add sections for anatomy, usage guidelines, and variants. The editor works like Notion: type / for options, drag blocks to reorder, and use markdown shortcuts.

Step 3: Organize with structure

Build a sidebar navigation that makes sense for your team. Common structures: “Foundation” (colors, typography, spacing), “Components” (buttons, inputs, cards), “Patterns” (forms, navigation, data display), and “Content” (voice and tone, writing guidelines). Use page groups to organize hundreds of pages into collapsible sections.

Zeroheight in Your Design System Workflow

Zeroheight sits between design and development, connecting both worlds with shared documentation.

• Before Zeroheight: Component design in Figma, code implementation in Storybook, scattered docs in Google Docs and Slack
• During documentation: Writing in Zeroheight, pulling components from Figma, embedding code from Storybook or GitHub
• After publishing: Designers reference during mockups, developers copy code during builds, stakeholders review for brand consistency

Common tool pairings:

• Zeroheight + Figma + Storybook for the complete design-to-code workflow: design in Figma, build in Storybook, document in Zeroheight
• Zeroheight + Notion for combining design system docs (Zeroheight) with product roadmaps and process docs (Notion)
• Zeroheight + Linear to link component requests and bug fixes directly to component documentation pages
• Zeroheight + Chromatic to show visual regression test results alongside component docs

Common Problems (and How to Fix Them)

These challenges come up when teams adopt Zeroheight. Here’s how to address them.

“Our Figma components aren’t syncing”

Check that you’ve published changes in Figma (libraries don’t sync until published) and that Zeroheight has permission to access the library. In Zeroheight, go to Settings > Integrations > Figma and verify the connection is active. If components are still out of sync, click “Refresh” on the specific component in Zeroheight. Syncing can take 1-2 minutes after publishing in Figma.

“Developers won’t use the documentation”

Developers need code, not just pretty pictures. Connect Storybook or GitHub to show actual code snippets. Add props tables, implementation notes, and accessibility requirements. Give developers edit access so they can add their own notes about gotchas or edge cases. The more useful it is for development, the more it gets used.

“Docs are getting out of date again”

Automatic syncing only works for visual components, not written guidelines. Assign documentation owners for each section and add a “Last reviewed” date at the top of pages. Set quarterly documentation reviews where owners verify guidelines still match reality. Use Zeroheight’s version history to see what changed and when.

“We have too many pages to organize”

Zeroheight supports nested navigation up to 3 levels deep. Use this structure: Top level for categories (Foundation, Components, Patterns), second level for subcategories (Foundation > Colors, Foundation > Typography), third level for specific items (Colors > Palette, Colors > Usage). Add a search bar to your published site so people can find specific components without navigating.

“Nobody knows when documentation changes”

Enable Slack notifications in Zeroheight settings to alert your team when pages are created or updated. For major changes, use Zeroheight’s changelog feature to announce updates with context about what changed and why. Create a “What’s new” page that you update monthly with a summary of documentation additions and improvements.