Building a Design System
Episode one: Creating the foundation
TL;DR. Using a design system will greatly accelerate your design process and will enable your team to build faster and better products. This article is part of a series on building your own design system. In this specific article we will start with creating the foundation.
The last couple of years I’ve been working as a product designer at In2Event. As part of a product development team we’ve faced challenges that are inevitable for any growing product.
With growth, change happens. — New people join, other people leave. Teams get bigger and new teams arise. And even though you might think that bigger and more teams are better, the oppositie is often true. Collaboration between teams usually only gets harder and harder and the speed of production slows down. All while the deadline for those new features and improvements is approaching, fast. (Management is watching.)
The result: inconsistency will find it’s way into the product.
That‘s why product teams need a systematic approach to design to improve their collective efforts as a team. Using a design system will keep the teams on the same page and will improve your teams productivity greatly. It will bridge that gap between design and engineering and your team will be shipping more in less time.
In this article…
This is the first article of a series on how to build your own design system. This series will not cover creating a higher product design philosophy. It will mainly focus on the more practical side of creating a design system… in Sketch.
This specific article is about creating a foundation for your design system.
The topics that are covered in this article…
- What is a design system and why you should use it.
- Tips on how to bring structure to your design files.
- Setting up your colors, typography and such.
- Setting up a grid system and layout.
- Practical tips, tricks and add-ons I use.
Hopefully, after reading the articles in the series, you can go about creating your own design system. One that works for you and your team.
What is a design system
For the purpose of knowing what it is we are talking about, let’s take a quick look at what a design system is. Marco Suarez from Invision describes it as…
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Like Marco says, a design system revolves around reusable components. But it’s not just a coherent set of UI elements that work well together on any given page. Just because the components look the same and gives the idea of consistency, it doesn’t mean the product as a whole is consistent.
That’s where a design system differs from a simple UI kit. A design system provides guidelines and context for why and when components are used. It adds structure and meaning to your product. It helps you design with the big picture in mind.
Using a design system will greatly accelerate your design process and will enable your team to build faster and better products. 🤙🏼
Bring structure to the design process
The idea behind a design system is that it enables you and your team to work faster and smoother. This doesn’t just mean that your components should be reusable and and have guidelines. It means the whole design process should be structured in such a way that it will accelerate the entire product development process.
So, before you start designing your product, ask yourself…
What tools will we use? How are we going to name the files? Where are the files going to be stored? Are we going to use some kind of version control? How are the designs delivered to the development team? Etc.
Setting it up right from the beginning of your project will save you a lot of time and trouble in the long run.
The tools I use
Sketch for designing layouts. Abstract for storing Sketch files and version control. Invision for prototyping and sharing designs with the development team. Dropbox for general storage of stuff like brand assets, images and such.
Throughout this article and series I will give you some practical tips on how to properly organise your design files. Try to keep your Sketch file as organized as possible to maintain a sustainable design system.
Setting up your color palette
Let’s start by setting up our color palette. My color palettes usually contain a primary color, a secondary color, some neutral colors and some state colors.
Primary color
This is the most used color for components in your layout. You can use tones of the primary color to add contrast to elements.
Secondary color
Pick a secondary color to accent selected parts of your layout that you want to stand out. I usually pick a color that stands out from the primary color. For example, if blue is the primary color, use orange as the secondary color.
Neutrals
Use neutral colors for stuff like borders, background colors and text.
When picking neutral colors I make sure that they have a subtle hint of the primary color in them. It will make your palette look harmonious and coherent. Try to avoid picking full grey colors like #999.
I like having options when it comes to neutral colors. It gives me the possibility to give my layouts a little more depth. I usually have 8 neutral colors.
State Colors
Don’t forget to pick colors for error, warning and succes messages.
Red for error messages, yellow for warnings and green for succes messages.
Typography
Typography is the primary way of communicating with your users. Using type right helps you create hierarchy on your layout. Defining a solid base for typography at the beginning of your project will save you a lot of time and will help you work efficient.
Typographic scale
Limit the amount of type sizes you use for your project. Too many type sizes on your screen can wreck your layout. Pick a typographic scale a select only a few sizes to work with. A typographic scale is harmonious progression of font sizes. Using a typographic scale will make your layout look balanced and harmonious.
I use the classic typographic scale as a starting point for typography and select only a few sizes from that scale. I usually end up with the following text sizes: 12, 14, 16, 18, 21, 24, 30, 36 and 48.
There are a lot of different typographic scales to choose from. There are also a lot of Scale Calculators with which you can create your own scale. I pretty much always use the ‘classic typographic scale’ as a starting point and take just a couple of text sizes to work with.
Creating Text Styles and adding them to your file
Now that you have decided on your typography, it is time to add it to your Sketch project. First I like to create a sheet with all the text styles I anticipate on using. For the example below I’ve used 4 colors; 3 neutral colors to add more depth the layout and 1 accent color.
I try to avoid having too many different variations of one headline. That said, that doesn’t mean you have to as well. If you like to have more options, like an extra thinner version for your Headline 1, create it. There is no right or wrong here, create whatever you think you need. Just be careful not to over-do it.
Creating text styles in Sketch
Now that you have your text styles in place, it is time to add them to your Sketch file.
Use slashes (/) when naming your text styles to create a hierarchy in your text style menu. Doing this will keep your text styles menu clean and easy to navigate.
For example; I want all colors of my ‘Headline 1’ in one place.
To do this I name the headline “Headline / H1 / Color #2”.
Grid system and layout.
Using a grid will speed up your workflow tremendously. There are different type of grids for arranging different types of content. Column grids to align content horizontally and Baseline grids to align your content vertically.
And then there is an increment grid for spacing your elements on your layout. For example, there is the commonly used 8pt grid system. The 8pt grid system basically means you use increments of 8 to decide on the sizes of your elements and how to place them on your layout. All heights, widths, paddings and margins are a multiple of 8.
You will pretty much only be using the numbers 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, etc. This might feel like this limits your choices, but using this grid system will help you make decisions faster and your work more consistent.
If you want to know more about the 8pt grid system, you should read this great article Elliot Dale wrote on the subject.
Full disclosure: I don’t always use the 8pt grid system for my projects. For me using a grid depends on the project I’m working on. For example, if I’m working on a product where layouts have to show a lot of information and I don’t have a lot space, then I use a 4pt grid to give me more flexibility.
Spacing units
Use predefined units for spacing components on the layout. As you might have expected, the spacing units are all increments of 8. As you’ve probably noticed I skipped a couple of numbers in the multiplication table of 8. By having fewer options to chose from you will work even faster. 🚀
Set up a Column grid
Use a column grid to align your content horizontally. The most popular grid is the 12 column grid. The 12 column grid breaks up into usable 12, 6, 4, 3 and 2 columns.
To set up the 12 column layout grid in Sketch go to View > Canvas > Layout Settings…
Pro tip: If you click the ‘Make Default’ button in the bottom left side of the Layout settings screen, all the new Artboards you add in that Sketch file will have the settings you’ve just entered.
Sketch tip: Use the keyboard shortcut ‘Control + L’ to toggle the layout columns.
Baseline grid
Use a baseline grid to position your type. By using a baseline grid you can easily decide on how to align your type to create rhythm. I always go with a 4pt baseline grid because it works well with the 8pt grid system.
There is no actual baseline grid option in Sketch like shown above. However, you can configure and show a similar grid with both horizontal and vertical lines. Go to View > Canvas > Grid Settings... and use 4px as the Grid block size.
Sketch tip: Use the keyboard shortcut ‘Control + G’ to toggle the grid.
Iconography
Icons are one of the most overlooked and underestimated part of product design. Using icons correctly will help you create a understandable user experience.
Consistency matters.
Often designers simply search for an icon when they need one. During a project they’ll use icons found across different websites and other sources, not realizing that using different icons from different sources will make their product look inconsistent. It will break the overall experience.
That’s why you should pick 1 icon set and stick to it.
Or at least try to stick to it… It might occur that you need an icon that isn’t included in the icon set you picked. In that case, try to find an icon that looks similar to the icons from the set or create one that does.
Sidenote: I use the Google Material design icon set. The icons are displayed on a 24pt grid. This fits perfectly within the 8pt grid we’ve set up earlier in this article.
Convert your icons into symbols and organizing then
Convert your icons into symbols so you can easily reuse them. Use slashes (/) when naming your symbols to create a sub menu.
I like to add a category to the names of the icons. For example, I use names like ‘icon/navigation/icon-name’ for all icons that have something to do with navigation and ‘icon/media/icon-name’ for all media related icons.
Pro tip: All symbols you create are stored on the “Symbols” page. When creating a symbol, Sketch will automatically place it somewhere on that page. If you don’t organize you symbols on the that page, it can become a great mess and you will have a hard time finding the symbol you are looking for.
Pro tip II: When creating symbols for icons, make sure the sizes of the symbol in which the icon is placed is the same as all the other icon symbols. By doing this you can easily switch between icons when they are placed on your layout. More on this in the next article.
Use an icon manager
Using an icon manager will massively improve your workflow. An icon manager holds all your icon sets in one place and makes it easy to browse through all your icons. You no longer have to dig through your computer folders or look up individual icons on websites.
I personally use, and highly recommend, Iconjar. Its interface is very user friendly and has a nice drag and drop functionality for adding icons directly into your Sketch file. 👌🏼
Whats next…
We’ve just set up a solid foundation for your design system. In the next article I’ll be showing you how to use this foundation to create reusable components using Sketch.
I would really love to hear your thoughts on this article.
If there is anything you want to know more about, feel free to leave a comment or send an email. ✌🏼
A little bit about me…
I am Dennis Kramer. A product designer from the Netherlands. Co-founder of In2Event, event management software that is used by the biggest names in the festival industry worldwide. Also co-founder of Kersvers, an on-demand product team that design, build and launch products for startups, established companies and ourselves.
Follow me on my adventures on Twitter and Instagram.
And don’t forget to check out our Dribbble page.
🤓 *that was some smooth shameless self promotion*
