The Importance of Symbols

As the lead product designer at a Startup, efficiency is very important to me. Over the past year I have developed a personal workflow that allows me to maximize my output for any given day. Symbols are an essential piece of this process and I want to tell you why.

For the purpose of this article I will be describing how I used Sketch to create a unified symbol library for CompleteSet. If you are not familiar with symbols there are plenty of resources that can help you learn how to use them. Here is my favorite:

My goal for this project was to create a living document that would capture the current state of the website.

Since I was hired to work on an existing product, my first step was to take an inventory of all the pages on the site. I took screenshots on both desktop and mobile web and imported them into Sketch. This allowed me to visualize the current styles and the relationships between pages.

A Small Sample of the Full Site Audit

After doing this site audit I began the process of creating symbols. I started with the mobile web because it is always easier to scale a symbol up than it is to scale it down. I created shape and text layers on top of the screenshots and then grouped them. I used the create symbol button to move these groups to the symbols page.

Sketch Tip: I recommend that you decide on a naming convention before you create any symbols. If you decide to change the name of a symbol on the symbols page Sketch will not update the layer name on your Artboard.

As I created symbols I arranged them according to their purpose and width. All of the symbols in a particular category, for example Buttons, would appear in the same column. I find that this makes locating and updating symbols much quicker later on.

Mobile Web Symbol Library for CompleteSet

Once I had created a symbol for every component, I made an editable version of every page on the site. Using these “building blocks” made this process a breeze. It was also reassuring to know that an update I made on one screen would now be reflected across the entire file.

Sketch Tip: I recommend that you use the insert menu to add symbols to Artboards rather than copying and pasting symbols. Sometimes Sketch will create duplicate symbols and that can cause elements to fall out of sync.

Armed with the power to make global changes, I went to work unifying the type styles. To enforce a clear hierarchy, I limited the typography in this document to a select number of sizes and weights.

If you are not familiar with shared styles, again there are plenty of resources that can help you learn how to use them. Here is one I found useful:

With all of the components tied to symbols and all of the text layers tied to shared styles I had achieved my goal. This sketch file was now an accurate representation of the live site. Not only could I make edits to existing screens, I could now easily design new features that would be perfectly aligned with the Branding and Interface guidelines.

Building a symbol library for a robust digital product can seem daunting, but the return on investment is enormous. By reducing the amount of time I spend pushing pixels I am able to spend more time brainstorming creative solutions.

Even though this article is more of a reflection on my experience rather than an informative “how to” guide I hope that you found it helpful. If you are interested is checking out the results of my efforts be sure to visit CompleteSet. It is the best place to buy and sell collectibles. In addition to being a marketplace, it has tools to help collectors track their collection and discover what they are missing.

Thank you for your time!