zeroheight 3.0

A new editor, code integration and our story so far

Jerome de Lafargue
zeroheight
5 min readOct 4, 2018

--

Robin Tindale and I started zeroheight with the vision of bridging the gap between design and development. A Photoshop handoff (zeroheight 1.0) and a Sketch symbol library plugin later (zeroheight 2.0), it feels like we’re getting a little bit closer 🤓 It’s been a really exciting (and challenging 😅) journey so far.

Today we are delighted to announce that zeroheight 3.0 is releasing out of private beta! It’s a tool to create design system documentation synced with Sketch & code.

Check us out on Product Hunt!

What’s new in 3.0?

  • new styleguide editing experience ✨
  • styleguides synchronised with Sketch
  • tables and embeds (prototypes or third party content)
  • integrate code from development with HTML or Storybook 👩‍💻
the new editor in action (warning — I can’t really type this fast)
Sketch ➡️ zeroheight
Storybook ➡️ zeroheight

The chronicles of zeroheight

Story time! 📚

Back in 2014, Robin and I were working in different teams at the same company. We’d meet for increasingly long breaks, confiding in each other about our growing desires to chase after the startup dream. With a spreadsheet of ideas, we finally plucked up the courage to leave in early 2015, and gained entry to Entrepreneur First, a 6 month company-builder program.

After 3 or 4 ideas, including running around trying to sell VR headsets to real estate agents, we settled on improving the process between developers and designers. As developers with a mobile background, we knew the pain of specs and assets first-hand…

zeroheight 1.0 (2015–2016)

Enter our amazing Photoshop plugin to hand off assets to developers. The design was…unique. You might be able to tell we were developers with very limited design experience… 🙈

Not sure we had enough buttons…

The problem was real though, and we convinced some early companies to take a chance with us. We are forever grateful — special thanks to Simon, Susana and Kirstyn, our first (very patient) users.

Increasingly, people were moving away from Photoshop to Sketch. But Sketch already had a great handover tool with Zeplin, so we turned our attention to the problem of how designers could collaborate on a component library — something that at the time, wasn’t easy in Sketch.

zeroheight 2.0 (2016–2017)

We made a Sketch plugin that allowed designers to manage all their components across files and build a reusable library. We got some real designers to help with this one, and it subsequently had fewer buttons, and a simpler UX 😁

I miss the blue button. And the green button. And the red button. And the grey button.

In zeroheight 2.0 we also had a basic web styleguide which was automatically generated from the Sketch component library. As people found this increasingly useful, it gave us an idea for a better way to create documentation.

We knew Sketch were working on a native version of reusable components, so we diverted our attention to another problem: documenting those reusable components. A process that people in the design community were increasingly starting to consider part of having a “design system”—a documented set of reusable design/development components and practices. When Sketch released Libraries in 2017, we simplified our plugin vastly, and went into hibernation.

2018 @ zeroheight — sunlight ❌ fun ❌ sleep ❌ build a design system documentation tool ✅ user tests ✅ release tool ✅ sleep? 🤤

zeroheight 3.0 (2017–2018)

Thanks for sticking around during Story Time.

Today we’re ready to share our design system documentation tool with the world and that’s why we’re launching it on Product Hunt. We focused on a simple editing experience, and on providing the flexibility to include content from design, development and all the other important parts of a design system (e.g. documenting voice and tone, motion etc.)

The future of design systems 🔮

zeroheight 3.0 is a great way to get a design system started. Teams with an existing Sketch Library, or Storybook, can create a truly collaborative styleguide that is easy to edit and keep up-to-date. But we obviously don’t want to stop there ;)

In the short term: better code integration — it’s pretty easy for designers to press a button to sync with zeroheight, but it’s not as straight-forward for developers right now. Storybook and static HTML snippets are a good start, but we want to add something more automated, direct from source code to zeroheight.

In the longer term: there is a huge opportunity to build a great design system platform, and make it available to teams of all shapes and sizes. Looking at the design systems from teams like Facebook inspires us, and shows us how much there is left to do to create really awesome design system tooling. We’ve only scratched the surface, and we’re excited to keep digging 🚀 💎 🖥

Thanks for reading! Come and join the conversation about zeroheight on Product Hunt :)

Come and say hi!

--

--

Jerome de Lafargue
zeroheight

Co-founder at http://zeroheight.com, beautifully simple design system documentation synced with design and code! Follow me on Twitter @getjerome 🎨