I divided my styles into fills, strokes and shadows with further sub-divisions for brand and system/UI. 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. H1/Primary/Large/Left or H1/Secondary/Large/Right.Block/Modifier-1/Breakpoint/Optional-Modifier-2.I went through a similar process with the naming of my text styles following a variation of BEM: My symbol artboards in the Sketch library file. I organised them like this:Ĭomponents are my most complex items and include type, images, buttons etc. a button that includes an icon, label and background colour. I organised them like this:Įlements contain one or more item i.e. These are my smallest items within my Sketch library and include logos, Icons, Colours, Stokes etc. Keeping your symbols organised leads to neat and tidy insert menus in Sketch! Atoms Just choose an approach, be consistent and stick to it.ĭue to the simplicity of my website, I used a system of atoms, elements and components. It doesn't matter if you follow atomic design, BEM, or another methodology. Organisation is key to a successful and scalable Sketch library. If you haven't, then it is worth checking out the official docs first. I'm assuming you've already set-up your library. This should ensure the transition to Zero Height should be as smooth as possible. But I'll cover some of the basics below to help you prepare your library. It's beyond the scope of this article to cover every detail creating and organising a Sketch library. Now that you've had a quick look around Zero Height and installed the Sketch plugin it's time to dive into preparing your Sketch assets. Select plugins > Zero Height > Log In and then enter your credentials into the modal and you will be all set to start uploading. This should launch Sketch and install the plugin. Install The Pluginĭouble-click on the zip file in your downloads folder and then click on the plugin. You can grab the zip file from the account dropdown menu. For more on Sketch plugins, check out the official docs. The last (but super important step) you need to do before you jump into Sketch is to download the Zero Height Sketch plugin. You can rename, reorder, create new sections and add your own logo by selecting the respective links. Your content sits on the right-hand side and your navigation on the left. Have a look around and familiarise yourself with the layout. Once you've selected 'Create Styleguide' a skeleton layout is created with some placeholder sections for introductions, principles, styling etc. Once you have created your account you can set up your first style guide by selecting the 'Create Styleguide' button. Jump over to their site and fill in the simple sign-up form. Zero Height currently offer a free account so you can test out the functionality of their product. Extensible tree navigation makes it easy to navigate your system.Rich text editor, so you can document your assets.Rich media support for images, videos etc.Embed third party prototypes from InVision, Marvel etc.Code snippet integration with live preview.Sketch Plugin to upload shared layer and text styles, symbols etc.Zero Height is an online tool that integrates with Sketch to allow product teams to create web-based design systems. Note: This article assumes you know what a design system is and understand Sketch basics. Hopefully, they'll come in useful if you're setting up your own. Below is an overview of the steps I undertook. So I created my own design system for this website. 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. I read through several articles about Lingo and InVision DSM and then stumbled across Zero Height. Whilst freelancing at Spark 44 I helped the team evaluate design system tools for their forthcoming project for Jaguar Land Rover. A step-by-step account of how I created a design system for my own website using Sketch App and Zero Height.
0 Comments
Leave a Reply. |