Lingo and InVision DSM and then stumbled across Zero Height. Intrigued by what I saw on the Zero Height website, I thought I would give it a try prior to recommending it to the Spark 44 team.
So I created my own design system for this website. Below is an overview of the steps I undertook. Hopefully they'll come in useful if you're setting up your own.
Note: This article assumes you know what a design system is and understand Sketch basics.
Zero Height is an online tool that integrates with Sketch to allow product teams to create web-based design systems.
Zero Height currently offer a free account so you can test out the functionality of their product.
Jump over to their site and fill in the simple sign-up form.
Once you have created your account you can set up your first style guide by selecting the 'Create Styleguide' button.
Once you've selected 'Create Styleguide' a skeleton layout is created with some placeholder sections for introductions, principles, styling etc. Have a look around and familiarise yourself with the layout. Your content sits on the right hand side and your navigation on the left.
You can rename, reorder, create new sections and add your own logo by selecting the respective links.
The last (but super important step) you need to do before you jump into Sketch is to download the Zero Height Sketch plugin. For more on Sketch plugins, check out the official docs.
You can grab the zip file from the account dropdown menu.
Double-click on the zip file in your downloads folder and then click on the plugin. This should launch Sketch and install the plugin.
Select plugins > Zero Height > Log In and then enter your credentials into the modal and you will be all set to start uploading.
Now that you've had a quick look around Zero Height and installed the Sketch plugin it's time to dive in to preparing your Sketch assets.
It's beyond the scope of this article to cover every detail creating and organising a Sketch library. But I'll cover some of the basics below to help you prepare your library. This should ensure the transition to Zero Height should be as smooth as possible.
I'm assuming you've already set-up your library. If you haven't, then it is worth checking out the official docs first.
Organisation is key to a successful and scalable Sketch library. It doesn't matter if you follow atomic design, BEM, or another methodology. Just choose an approach, be consistent and stick to it.
Due to the simplicity of my website, I used a system of atoms, elements and components.
These are my smallest items within my Sketch library and include logos, Icons, Colours, Stokes etc. I organised them like this:
Elements contain one or more item i.e. a button that includes an icon, label and background colour. I organised them like this:
Components are my most complex items and include type, images, buttons etc. I organised them like this:
I went through a similar process with the naming of my text styles following a variation of BEM:
Now that Sketch supports overriding layer styles within symbol instances, it makes even more sense to maintain one set of styles and remove colours stored as symbols.
I divided my styles into fills, strokes and shadows with further sub-divisions for brand and system/UI. This allows me to access them easily from Sketch's menus.
Now that we've covered the basics of creating a well-structured Sketch library, we can jump back over to Zero Height.
Make sure your Sketch library file is open in Sketch and then choose 'Upload All'. This should upload a copy of your entire library file to Zero Height. You should see a progress bar similar to the image below.
Once the progress bar has finished you should see your Sketch library in the uploads section in Zero Height.
If you jump back over to the 'Styleguides' tab you can now add items from your Sketch library into your design system.
Select the 'Add' button. This will launch a modal window with a tree view of all the items you uploaded from your Sketch library. Locate the item you want and select the corresponding checkmark on the right-hand-side, then hit 'Add'.
Once you've added your items, you'll see the corresponding items added within your design system. In the case of colours, you'll notice the HEX codes automatically generated and paired with the names you provided within your design system. Helpful for developers.
You'll also notice your text styles have been converted to an elegant, hierarchical list with placeholder text.
You're not limited to just Sketch assets. Zero Height also supports embedding prototype, videos, gifs and code snippets.
I hooked-up my global font and CSS files and then added some simple button code. The result is a live, working example to accompany the graphical assets. This is a great feature where designers and developers can collaborate to develop a single source of truth for each item within your system.
Go through your entire Sketch library and repeat the steps above until you've uploaded everything (or at least the key items). You can then move onto documentation.
It's all-well-and-good uploading Sketch libraries to Zero Height, but if you don't document them, then essentially you've just got a Sketch library file sitting in the Cloud and not a design system.
You don't need to document everything all at the same time. You can add detail over time. I took quite a bit of time up-front to add an overview and some fairly-detailed design principles. My list was something like the below:
I then went through my styles and components sections and added detail where I thought appropriate. The level of detail you include will depend on the complexity of your system and who its intended audience is.
Over time, as you add more components, documentation and code examples your system will become richer. It should provide your organisation (and external teams) with a single source of truth for both designers and developers to work together to produce consistent, delightful digital products.
Zero Height is a great tool to use alongside Sketch to kick-start your style guide or design system. There are many other tools out there, (besides the aforementioned Lingo and InVision DSM). I'l love to hear what tools you are using and also what you thought of this article.
Leave a comment below or give me a shout on twitter.
Thanks for reading and good luck with your design system.