zeroheight vs. Knapsack

If you’re building a design system, adoption is likely at the forefront of your mind. For the folks here at zeroheight, adoption is at the forefront of our minds too. That’s why we’ve built a platform that allows for simple editing by any member of your team, regardless of technical proficiency. And, we’ve payed equal attention to both designer and developer workflows. When you use zeroheight, it’s easy to get the information you need from the whole product organization, making your resulting design system a valuable resource for the whole company.

trusted by these rad folk

zeroheight logo

zeroheight is a full design system management platform with robust integrations with both designer and developer tools.

The platform is built to help you streamline and document every step in the product development process. Bring in design assets from Figma and create easy to understand usage guidelines. Showcase reusable code alongside developer documentation with live component previews, a powerful integration with Storybook, and an always up to date sync with GitHub. And when you’re ready, automate design to code with our design tokens manager.

Knapsack describes itself as code-first and heavily prioritizes the developer experience.

The platform works best when organizations are leveraging GitLab, GitHub, or BitBucket and requires extensive engineering effort to set up and maintain. In fact, designers working on documentation aren’t even able to make changes to documentation without the help of an engineer. For teams who want an engineering led solution with sporadic input from design teams, Knapsack is a viable choice.

It was our goal when we started this project with zeroheight to not only make information readily available but also bring design closer to code and code closer to design. As of the end of February 2023 (just nine months after launching the design system in May of 2022), we had saved over 534 days of engineering effort.

Mikaila Weaver, Principal Product Designer on the Design Operations team at Eventbrite

Get to value quickly

It shouldn’t take months and multiple implementation meetings to get to a design system you can use.
  • Start with pre-built documentation templates or create your own
  • Connect Figma and bring in designs and components plus their associated descriptions and variants
  • Leverage existing developer content by integrating your design system with Storybook and GitHub
  • Embed existing content from Trello, Google Docs, Typeform and more.

Connect design and development

Include all of the information you need in one place, from both sides of the house.
  • Go from design to development with our end to end design tokens manager which includes the ability to import from Figma, edit tokens with no-code, and automate translation with Style Dictionary
  • Showcase live components from ten different frameworks including React, Vue, and Svelte
  • Include developer content by syncing markdown from GitHub
  • Embed stories and showcase code from Storybook

Collaborate across the whole organization

Gather feedback and ideas from the whole company as you build and after you launch.
  • Allow editing from everyone with our WYSIWYG editor and easy-to-use content blocks
  • Get feedback on in-progress changes with in-line commenting
  • Solicit feedback from design system consumers to make iterating on your design system a breeze
  • Use status tags and tables to keep the whole team up to date on component status and next steps

With zeroheight, you get:

  • A team of design system experts. Our team includes Customer Success Managers and Design Advocates who have built dozens of design systems. And when you need more, we’re partnered with some of the best design agencies that can help, too!
  • A relentless focus on security. We’re SOC-2 compliant and maintain ISO 27001. Our users also have access to common sense tools to keep their work secure including SSO, password protection, and trusted IP range.
  • A community of design system enthusiasts. Join our Slack channel (we’re 1,000+ strong), check out one of our events, or join us for the next in-person event to meet a worldwide group of zeroheight champions who are keen to help you get started.
  • A voice in product development. Our users are the driving force in deciding what we build next. Join us and help shape the future of the platform.

How zeroheight and Knapsack stack up

✍️ Creating design system documentation

  • feature available tick Custom documentation templates
  • feature available tick Version management for your styleguides
  • feature available tick Customization options, including color, typography and appearance
  • feature available tick Pre-made templates to get you started
  • feature available tick No-code editor experience
  • feature available tick Custom documentation templates
  • feature available tick Version management for your styleguides
  • feature available tick Customization options, including color, typography and appearance
  • feature unavailable cross Pre-made templates to get you started
  • feature unavailable cross No-code editor experience

🤞Integrate with design and development tools

  • feature available tick Integrate with all design tools — Figma, Sketch, Adobe XD, Zeplin & Abstract
  • feature available tick Integrate with code tools, incl. Github & Storybook
  • feature unavailable cross Integrate with all design tools — Figma, Sketch, Adobe XD, Zeplin & Abstract
  • feature available tick Integrate with code tools, incl. Github & Storybook

🖼️ Easy access to information from designers

  • feature available tick Display Figma variants
  • feature available tick Sync Figma descriptions
  • feature available tick Annotate design uploads
  • feature available tick Leverage inspect mode to see component attributes, descriptions, and history
  • feature available tick Connect your design tool just once
  • feature unavailable cross Display Figma variants
  • feature unavailable cross Sync Figma descriptions
  • feature unavailable cross Annotate design uploads
  • feature unavailable cross Leverage inspect mode to see component attributes, descriptions, and history
  • feature unavailable cross Connect your design tool just once

👷‍ World-class front-end development features

  • feature available tick Integrate with Storybook
  • feature available tick Render live components in your documentation
  • feature available tick Import public and private npm packages
  • feature available tick Create editable code examples
  • feature available tick Embed code previews
  • feature unavailable cross Integrate with Storybook
  • feature available tick Render live components in your documentation
  • feature available tick Import public and private npm packages
  • feature available tick Create editable code examples
  • feature available tick Embed code previews

📋 Robust design system governance & measurement

  • feature available tick User permissions
  • feature available tick Commenting
  • feature available tick Reviewers
  • feature available tick Revision history and ability to restore pages
  • feature available tick Version your design system site
  • feature available tick Get feedback directly in your documentation
  • feature available tick Integrate with third-party analytics (Google Analytics and Hotjar)
  • feature available tick See page views in-platform
  • feature available tick See page ratings in-platform
  • feature available tick User permissions
  • feature unavailable cross Commenting
  • feature unavailable cross Reviewers
  • feature available tick Revision history and ability to restore pages
  • feature available tick Version your design system site
  • feature available tick Get feedback directly in your documentation
  • feature unavailable cross Integrate with third-party analytics (Google Analytics and Hotjar)
  • feature unavailable cross See page views in-platform
  • feature unavailable cross See page ratings in-platform

💁 Customer support for your design system

  • feature available tick User onboarding
  • feature available tick Customer support
  • feature available tick Help center
  • feature available tick Dedicated Customer Success Manager
  • feature available tick Regular webinars, panel discussions and expert advice for customers
  • feature available tick Extensive library of guides and best-practice docs
  • feature available tick Design Advocate support
  • feature available tick Dedicated community of users
  • feature available tick Partnered design system agencies
  • feature available tick User onboarding
  • feature available tick Customer support
  • feature available tick Help center
  • feature available tick Dedicated Customer Success Manager
  • feature available tick Regular webinars, panel discussions and expert advice for customers
  • feature available tick Extensive library of guides and best-practice docs
  • feature unavailable cross Design Advocate support
  • feature unavailable cross Dedicated community of users
  • feature unavailable cross Partnered design system agencies

Multi-theme support

  • feature available tick Theme management
  • feature available tick Change site appearance based on theme
  • feature available tick Styleguide switcher for easy navigation
  • feature available tick Theme management
  • feature unavailable cross Change site appearance based on theme
  • feature unavailable cross Styleguide switcher for easy navigation

Design Token Management

  • feature available tick Import tokens from Figma Styles
  • feature available tick Import tokens from GitHub
  • feature available tick Import tokens from JSON
  • feature available tick No-code token editing
  • feature available tick Document Design Tokens
  • feature available tick Style Dictionary Integration
  • feature available tick Export as JSON
  • feature available tick Generate GitHub Pull Request
  • feature unavailable cross Import tokens from Figma Styles
  • feature unavailable cross Import tokens from GitHub
  • feature available tick Import tokens from JSON
  • feature available tick No-code token editing
  • feature available tick Document Design Tokens
  • feature available tick Style Dictionary Integration
  • feature unavailable cross Export as JSON
  • feature unavailable cross Generate GitHub Pull Request