👋 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:

• How to make assets available for download

👾 Add your code examples

Now you can add the code components of your design system alongside the designs:

• Connect to GitHub
• Add React.js using our Storybook integration
• Live preview web components
• Add code snippets (30+ languages)
• Embed code previews from other tools
• Render react components

✍️ 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.

🎥 Demo Video