Dec 21, 2018
5 Steps for Creating a Design System
Insights on how we made our design system in Sketch
Design systems have become a staple asset in any design and development team. Pioneered by tech companies like Google (Material), AirBnB , Uber, and Facebook, they serve an important purpose: to provide a single place of reference for digital design, including guidelines, components, and code snippets. They’re not just for tech companies and apps —rather, they serve any organization with a digital presence. In this post, we’ll be showing you step-by-step how we created our design system and the choices we made along the way. We will be referring to our product Circuit as the example in building out our design system, and have chosen Sketch as the design tool to build and catalogue components.
About Circuit and our design problems, challenges & goals
Circuit is an immersive content platform used for creating virtual tours and incredible content experiences. Since the launch, we’ve focused on improving the user experience by refining and adding new features. The product has come a long way in a short time, but there is still a lot to accomplish on our roadmap. As product design became a core function alongside development, we found ourselves hitting the same hurdles over and over:
- It was difficult to quickly design and prototype new features, on a variety of screen sizes, and incorporating client brand colours, logos, and imagery on the fly.
- As our team grew, there were more instances of designs being out of sync and designers working with outdated palettes or starting from scratch.
In an effort to streamline our design process, we decided to adopt a design system.
What is a design system and how does it help?
A design system (or design library) is a collection of guidelines, style guides, and reusable components that enable rapid creation of mockups and support faster build-out of features. It can answer specific questions from what fonts and colours are used on websites, to how buttons and panels are displayed.
After rolling out our design system, creating mockups and experimenting with designs is super fast. We’re able to design for a range of screen sizes, which helps us make better UI decisions. We can easily go back and change text, size, images, and styling on the fly. This has been great for customizing screens to show clients and get feedback. We can also add structure to our web design process, and help identify and streamline our current website, app, or product so that everyone is on the same page. Finally, it is a single source of truth for briefing designers and developers. Without writing extensive documentation, we are able to hand-off a single file to an incoming designer and avoid confusion about any styling details.
It’s not an easy task to build a design system and requires constant work to stay aligned with your live website. However, it is definitely worth the effort.
How to create and organize a design system
Here are the steps we followed to create our design system. We chose Sketch to create our library, and some of the recommendations will be specific to its functionality, but the concepts we cover are universal. Other tools you can use include Figma, Adobe Xd, and Adobe Illustrator.
Step 1 — Audit your website or app
To start, you do need a design; this could be a mockup, a live page, or an app. In our case, we had a live webapp, and a collection of components and symbols in Sketch. Many components in the design file were outdated or never made it to the live production environment.
Next, make a list of all the components you have, and make note of the various states they might be in (idle, hover, clicked, disabled, default etc). Our list consisted of fonts, colours, typography, icons, and a long list of components such as, avatars, buttons, cards, footers, navigation, progress bars, etc.
Step 2— Organize pages
Regardless of the software chosen, you will likely use pages to organize the contents of your library. There are two ways you can do this. The first is the Atomic Design Methodology by Brad Frost where elements are modeled according to 5 hierarchical groupings: Atoms, Molecules, Organisms, Templates, Pages. The second method, which we refer to as Pattern Pages, presents related components into their own pages such as Colours, Type, Icons, Avatars, Buttons, etc. In comparison, it’s a flat structure without much heirarchy that can make it more straightforward for incoming designers to locate specific pieces, but lacks the structured ‘building block’ flow of the Atomic methodology.
We structured our system following the Atomic principles although simplified it considerably. We ended up with 5 main pages:
A Guidelines page for written documentation to explain the standards and goals for the design system.
A Sandbox page that is our ‘dev environment’ for design. We use this to experiment on new features and designs. Once a feature is approved, built, tested and promoted to production, we update the design and promote it into the core library.
A Symbols page that contains all our atoms, molecules, and organisms, from simple buttons and icons to composite components, grouped and organized alphabetically. We did this so components are quick to locate and we can quickly move around the page through all the artboards. This may not work for larger design libraries, but for now it is fine for our needs.
A Style Guide that is an amalgamated collection of design items such as font, typography & icons, components, templates, and pages. We’ve nested the symbols into groupings on this page, and it’s easy to export the entire style guide as a PDF document when we need to hand it off to a designer or developer.
Finally, a Change log for keeping track of major changes, creators, and releases as the design library evolves over time.
Overall it is your preference, and the way you organize your design system should suit the needs of your product and team.
Step 3 — Create layer styles and text styles (skip this step if you do not have Sketch)
Layer and text styles are great because they allow you to override shapes and text you associated with the styles later on.
Layer styles lets us save an objects properties such as fill, borders, shadows, alignment etc.. and allows us to consistently apply them to other objects.
Adding a layer style: select your object and in the properties panel under appearance, click “No Layer Style” and “Create new Layer Style” to save the object’s properties.
Naming layer styles: how you name your styles will determine how they appear in the menu (above). If you find that getting to your style takes too long or is difficult to find you can always change it in the styles window. Layer > Organize Layer Styles. Here is how we named our layer styles:
Circuit/Colour/Primary/Blue/Medium
Text styles lets us save the properties of text, including font size, font, alignment, etc. and allows us to quickly input or change text used in symbols later on. Here you will likely want to organize your styles according to the semantic classifications of text on your webpages, i.e. the H1, H2, H3, body and so on.
Adding a text style: select your text and in the properties panel under appearance, click “No Text Style” and then “Create new Text Style”.
Naming text styles: Similar to naming layer styles. We grouped our styles according to H1, H2, H3,… paragraphs, and any components that needed it’s own text style.
You can also apply layer styles to text styles. Here is how:
Select text > Layer > Convert to outlines, then you should be able to add your layer styles to text just like any normal shape. However, if you have a lot of text, doing this too much can crash your Sketch or make it incredibly laggy.
Step 4 — Create symbols/components
This is the fun part. Pay special attention to spacing, sizing, shapes, and if applicable remember to apply text and layer styles to individual parts of the components, this enables overriding of the parts later on. The goal is to end up with a full collection of symbols and components.
Create a symbol: In Sketch, group your elements and press “Create Symbol” in the top nav. Start small by defining with things like buttons, avatars, and icons, then move to building your composite components.
Name the symbol: This will determine how they will appear in the insert menu. For a button, we named them as such:
Button/Default/Idle
Button/Default/Hover
Button/Default/Disabled
Name and order the layers in your symbol: This is very important because that is how they will appear in the override. Think to yourself if the order makes sense and is it named & ordered how someone else would expect it?
Of course, you can’t always order them in a way that is sensible to find in the override because layers still determine which element is on top, but it’s still good to keep in mind as you are creating your symbols.
Nested symbols: Symbols within symbols. By using smaller symbols to create composite symbols, you can make a change in one place and have it reflect in all the instances throughout all of your designs. For example, if you change the properties of say a button, all the buttons throughout your mockup will also change.
Scale your symbol: Responsive design is a common practice now. When you first create your symbol you might find that elements might not scale how you would expect. You can determine how things scale in the resizing window in the properties panel. Hovering your mouse over the preview will show you how it scales up.
Note, it is easier to scale up than it is to scale down as sometimes things get a little wonky. So if you are unsure, start small!
Create templates and pages — Once you have a collection of symbols, you can start creating templates and pages for creating fast mockups of entire screens. It is also a good idea to start collecting your symbols into a style guide to organize and present them.
Step 5 — Ongoing updates to the design system
You will never know how well your system works until you use it to actually create some mockups. Then you might find that you will have to go back and adjust your symbols because they don’t scale exactly how you wanted, or you found that it was too tedious to apply some layer styles and would rather have less clicks to get to a style.
And that is okay! Remember that a design system is a living library and will need to be continually updated.
Here are a few extra Sketch tips to help you manage your system:
- Create Data folders to add your own library of images in overrides. Keep in mind that if you move the folder you will have to relink it. Sketch > Preferences > Data/Library.
- Updating your library in other documents — top right notifications → Update Library (must save and close the library first)
- Sketch API is an official, updated source to double check facts, since 3rd party websites sometimes have outdated information.
- SketchApp sources is a useful place to get free assets and plugins for Sketch
We hope this article has been helpful to show how you can streamline your workflow with a design library. Happy creating!
