zeroheight 3.0

Design system documentation synced with Sketch & code

get it

zeroheight makes it easy for teams to create design system documentation collaboratively using online styleguides that are:

💎 synced with Sketch components

🖥 integrated with code examples

✏️ easy for anyone to contribute to

Around the web

Reviews

  • Pros: 

    Using it daily. Super simple, yet as powerful and reliable as others. Love the style guide designer, biggest benefit are the code samples.

    Cons: 

    None so far

    We've been using Zeroheight to manage our styleguide and help developers for about a year now. It greatly simplifies our designers' communication with developers (=styleguide) and gives our developers great confidence that their pull requests are spot on for UX.

    Maximilian Peters has used this product for one year.
  • Pros: 

    Works perfectly as the documentation tool for your shared Sketch-library

    Cons: 

    Support assets (fonts etc.) need to be hosted somewhere else.

    After testing out a bunch of similar platforms ZeroHeight for me is in the sweetspot between “simple to use“ and “powerful enough”.

    Harri Lehmuskallio has used this product for one month.

Discussion

You need to become a Contributor to join the discussion - Find out how.
Jerome
JeromeMaker@j_delafargue · Co-founder, zeroheight
Hey PH, it’s been a while! @robintindale and I started zeroheight with the vision of bridging the gap between design and development. A Photoshop handoff and a Sketch symbol library plugin later, it feels like we’re getting a little bit closer 🤓 It’s been a really exciting (and challenging 😅) journey so far. For the past year, we’ve been working on a new product in private beta, and we’re really excited to finally share it with you 👏 zeroheight is for teams who have design system resources (Sketch Library, front-end pattern library etc.) but don’t have the bandwidth to build (and maintain!) a custom styleguide site from scratch. These teams can use zeroheight to create sophisticated styleguides: 💎 Designers can sync their Sketch components and styles 🖥 Developers can contribute code using HTML previews and Storybook components ✏️ Anyone else can get involved, as editing a styleguide is super simple—think Medium, Dropbox Paper etc. How are we different from InVision’s DSM? We’ve been asked this a lot, so instead of making assumptions, we asked our beta users why they picked us over DSM. These were their top 3 answers: • flexibility of the styleguide editor • simpler Sketch integration • ability to integrate code examples Give it a go – it's free 😌 As always, we’d appreciate your honest feedback. We’ll be around to chat throughout the day!
Jerome
JeromeMaker@j_delafargue · Co-founder, zeroheight
@seantiffonnet thank you for being an early adopter!!
Murat Mutlu
Murat MutluHiring@mutlu82 · Co-Founder, Marvelapp
Congrats!
Jerome
JeromeMaker@j_delafargue · Co-founder, zeroheight
Thanks Murat! You might not remember this but you helped us out in the early days (2015) with some super helpful insights about the design tool space :)
Andreas Klinger
Andreas KlingerHiring@andreasklinger · Tech at Product Hunt 💃
I can imagine the next version of this to use react-sketch to automatically build components - and keep code+design in sync do you have plans related to this? cc @j_delafargue @robintindale
Jerome
JeromeMaker@j_delafargue · Co-founder, zeroheight
Hey Andreas! Yes that's the next big milestone in our vision – allowing the "source of truth" inside the design system (whether that truth is established by design or development) to flow freely between the two environments. I think design tokens are a key enabler to be able to do this in a flexible way (rather than just relying on translating a specific platform like React to a specific format like Sketch). What I mean by this is that, if design and development teams start using tokens for more things than colors / fonts (like Salesforce do) e.g. spacing, layout etc., then it will become a lot more realistic to change a token in a dev environment (not necessarily React) and for that change to be reflected in a design environment (not necessarily Sketch). But also vice-versa. It does require collaboration between design and dev teams to establish the use of tokens at the start of projects, and to actually use them, but once they do (and we think teams will eventually do this) it will make cross-platform code/design syncing a lot more realistic. I hope this answer makes sense :)
Abdus Salam
Abdus Salam@abdussalam · Mobile Product Designer, CBS Interactive
@j_delafargue This is exactly what I'm hoping! As a designer, learning React is a bit of a technical barrier, and I would love to use something that makes the handoff and updation process easier between design and dev. Designers should be able to fix that 1px padding themselves rather than bugging developers who clearly should be focusing on more important tasks.
Sujan Khadgi
Sujan Khadgi@___sujan · Experience Designer
Super excited for the new features. I was already impressed with the documentation features that existed but being able to embed prototypes and the storybook integration to see an actual live component is super cool. One thing I would absolutely love is to be able to add a Layer group. Right now we can add artboards which is cool too but being able to add a layer group would be particularly helpful when you don't want to convert a complex component (built with symbols) to be converted into a symbol to make shareable.
Jerome
JeromeMaker@j_delafargue · Co-founder, zeroheight
Hey @___sujan! Thanks for your suggestion! We'll definitely look at ways to improve the plugin and make it more flexible in the future :) Thanks for being an early supporter!
Pierrick
Pierrick@pierrickgt · Front-end Developer at Meilleurs Agents
Looks good! But why are some elements in the example, like Form and Dropdown, not coded but only uploaded as images? Seeing this, I feel like the styleguide doesn't work for complex elements.
Jerome
JeromeMaker@j_delafargue · Co-founder, zeroheight
Hey Pierrick! We were just trying to emulate a scenario where some of your design system components are coded, but some haven't been implemented yet. zeroheight allows designers to start documenting design components before they're ready in code :)