zeroheight 101
Brienne Wong
👋 Welcome to zeroheight
This is a quick guide on how to get started with zeroheight, along with some best practices and tips & tricks.
Before we begin, we’ll assume you’ve already created a zeroheight team. If not, sign up here!
Some of these tips will only apply to our paid plans, but if you’re using our Free plan you can skip over those sections (or give them a try on our Starter plan trial).
🖍 Create your first styleguide
Once you’ve logged into zeroheight, the first step is to create your styleguide.
We provide a template to help you get started, but you can easily rearrange content by drag-and-dropping.
Tips at this stage:
- You can start personalizing your styleguide. Upload a logo in the top left.
- You can customize the UI from the Styleguide settings.
🎨 Connect your design tool
The next step is to connect your design tools so you can start adding your design system to the styleguide:
- Connect to Figma
- Connect to Sketch
- Connect to Adobe XD
- Using zeroheight with Abstract
You can then add the designs to your styleguide by choosing the Design uploads option from the toolbar.
Tips at this stage:
 |  |
👾 Add your code examples
Now you can add the code components of your design system alongside the designs:
- Connect to GitHub
- Add Stories using our Storybook integration
- Live preview web components
- Add code snippets (30+ languages)
- Embed code previews from other tools
- Render live components using a variety of frameworks (e.g. React, Vue, etc.)
✍️ Add content
As you start filling out your styleguide, you’ll want to add usage guidelines and other content:
- Add Rules to explain how components should be used and help avoid common mistakes
- Embed videos
- Embed prototypes
- Gather feedback using forms
Tips at this stage:
- Use tables to create columns
- Save time with markdown shortcuts
- Sync images from your design tools
- Add anatomy diagrams to components
- Add links using shortcut tiles
👩💻 Work as a team
As you start to work on your documentation, you’ll need input from your colleagues in design, engineering, copywriting, product and marketing.
- You can invite editors to join your team from the Your team page in zeroheight
- You can use comments to collaborate on the content
- You can create a release when your work is ready to publish
Once you want to share with viewers you can invite them via email.
Tips at this stage:
- Set up a custom domain for your styleguide e.g
design.acme.com - Hide pages while they are a work-in-progress
🔐 Configure security settings
We offer flexible security settings, which can be configured for each styleguide.
- Set up SSO or password-protect your styleguide
- Choose if your styleguide is public or private
👩🎓 Advanced topics
Congratulations! You’re set up with your first styleguide 🎉
See below for some more advanced topics and how you can make the most of zeroheight:
- Using releases to publish changes
- Create templates
- Create a landing page styleguide
- Tips for your cover page
- Getting started with analytics
- Sync design tokens
🙌 Find help & join our community
There are a number of places you can find help, learn more about zeroheight, or become part of our community.
| Help Center | How-to guides, common issues, workarounds |
| support@zeroheight.com | Support with issues, bugs, and technical set-up |
| Your customer success manager | Available via video call or email for Enterprise customers only. |
| Resources | Best practices, tips & tricks, and inspiration on how to use zeroheight for your design system |
| Forum and zheroes Slack | Community discussion |
| zeroheight blog | For thought leadership and op-eds |