Learning Series - Grid and Libraries for Faster and Efficient Design

You can find a challenge related to this article by clicking this link and watch the hands-on video from this link.

Designing a User Interface while competing in a design competition can be challenging. You need to think of and provide a visual solution that is able to solve client problems, and you need to do it FAST while making sure the design quality meets the highest standard.

In this article, we will discuss two approaches that will make your life much easier when it comes to creating fast, consistent, and efficient designs:

1. How to create a consistent design layout using a GRID.

2. How to create designs faster using LIBRARIES.

What is a Grid System?

A grid is a framework that helps a designer to create a page layout. Grids consist of a series of lines that divide a page into columns. The grid structure makes it easy to manage the proportions between the page elements.

In the grid system, there are columns and gutters. Columns are vertical blocks that are used to adjust the space of your design elements, while gutter is the distance between columns. You can set up as many columns as you like for the page design, but in general, I typically use the following settings:

• 12 columns for desktop.

• 8 columns for tablet.

• 4 columns for mobile.

It’s up to you to define the column and gutter width. I usually use 60-80px for column width, and 16-24px for the gutter. As a reference, you can see the size that is often used on the Material Grid System.

How to Set up a Grid System in Sketch

With Sketch, we can set up the grid system easily. Draw a 1440x1024 artboard, then open the ‘Layout Settings’ (via View -> Canvas -> Layout Settings). Apply the following settings as we will create a dashboard design as an example implementation at the end of the article:

Total Width is used to set the width of the space we will use as the content area (or container), and Offset is used to set the margin of the container. As we will create a dashboard, we set the Offset to 300px for a sidebar area and the Total Width to 1110px for a content area. I always use this grid set to create the design dashboard.

What are Libraries in Sketch?

Libraries are a Sketch document containing symbols that can be used globally.

This means you can use the symbols in the libraries repeatedly in different Sketch documents without affecting the local symbols contained in the document.

You can manually add a Sketch file as a ‘Library’ via Sketch > Preferences > Libraries and then click the ‘Add Library’ button and choose the relevant Sketch document. You can add as many libraries as you want, all that you add will be accessible from the Insert > Symbol menu in the Toolbar.

How do Libraries Work?

If you have never had a library before, you need to create a new document and design some components in it to be used as symbols. For example, you can mimic the component design in the image below and make sure to make it a symbol, or you can download the file here.

When you have finished or downloaded it, create a new document, and add that file as a library via Sketch > Preferences > Libraries > Add Library.

After that, you can access it via Insert > Symbols in the Toolbar, and you will see all the components in the library there.

When you add the components into your document, they will look like this in your layer list:

If you want to edit the component, you can double click it and choose how you want to edit the symbol.

If you select ‘Unlink from Library’,  it will import the symbols of the library to be local symbols and make a change directly on your document. That means the changes that you made only work for the component itself, and will not change the symbols in the library.

But if you select ‘Open Library’, you will be directed to the library file and make a change of component there. That means the changes that you made will affect all components in any document using the library. You will see this notification on your document after you create changes in the library:

You can decide whether you want to apply the change from the library or keep using the old version.

Why Do We Use Symbols?

Symbols can help reduce repetition and component changes. Imagine you create a table with 100 rows of data and after you create it, suddenly you want to change the font size in that table. Are you willing to manually change all 100 rows of data one by one?

If you use symbols you can change the font size on only one line and then the other lines will automatically change. You have to know whether the component that you created will have a loop or not. Use symbols only for components that will be used repeatedly.

If you have downloaded the library file and opened it, there are components that have become symbols. We will take the table components as an example:

In the table components, there is a header and row. Duplicate as many rows as you want, then double click one of the rows. Then you will go to the symbols page; try changing the font size in that row, and then return to the document page. You will see the changes in all rows.

You can also change row data directly through the overrides feature on the right bar.

GRID and LIBRARIES Implementation

We already discussed how to set a grid and libraries. Now I want to show you a short video tutorial on how to create a simple dashboard design using a grid and libraries. Check out the video below:

https://youtu.be/Ff0N2dZD8gg

In this video, I use the Sketch Palletes plugin to import the color library and the Craft Invision plugin to import a sample image. Symbols in the library that we have at the moment are still not well organized, we will fix and arrange them in the next episode. In the next episode, we will learn about Nested Symbols, Responsive Symbols, how to organize Symbols properly, and we will try to apply them to the library we have.