In The Hudl
Published in

In The Hudl

Version 47 of Sketch saw the long-awaited introduction of Libraries which allows you to sync your symbols globally across all of your Sketch files. Design Systems especially stand to gain from a feature like this — being able to have an accessible way of bringing in design system assets while ensuring they stay up-to-date for everyone is a designer’s dream come true. After trying everything from InVision’s Craft to creating our own Sketch Plugin, we were happy to finally have this in Sketch as a native feature. Here are some of the decisions we arrived at and lessons we learned as we put our design system into a Library.

Goals of Our Library

  1. A one-stop shop for our designers. Just one file they could pull in and have the latest that our design system has to offer.
  2. As close to a 1:1 match as possible with our coded components, regardless of platform, both visually and structurally.
  3. Easy to maintain. Component updates or additions should be simple so that designers get the latest without much wait.

Nested vs. Single

The other option is to put everything into one file. You don’t get the clean separation that having separate Sketch files give you, but for our purposes, this actually ended up working better because:

  • Maintenance is easier since we only need to have one file open when we’re making updates to the Library (Goal #3).
  • It requires our designers to add just one Library (Goal #1).

Using Pages for Organization

Keeping things separated by Pages makes even a large Library easy to maintain.

Key parts of our design system (Color, Type, Icons) are at the top and then we simply listed our components alphabetically. You’ll see at the bottom are two additional pages. The Test Page, if you hadn’t guessed it, is a page where we can quickly test out any new symbols we add. The Library Preview uses Sketch Hunt’s freebie to give our Library a custom preview image when you go to add the Library in Sketch’s preferences (this is now supported by default in Sketch as of v48).

Naming Symbols

Which creates a menu that looks something like this (edited a bit to make it easier to see):

Adding Color

We use our color symbols as the main building block for our other components.

While it’s not ideal, it’s not too much of a hassle for our designers since a majority of their color needs should be handled on each component’s symbol overrides. Plus, it allows us to use those colored rectangles to build out those actual components (explained below). If we make an update to the color, it will update every component that’s using that color symbol.

Our main-level colors (such as brand, utilities, background colors) are contained on the Colors page and grouped accordingly. Colors that are specific to a component go on that component’s page to keep that ease of maintenance. We can still create rectangle symbols that reference main-level colors if necessary which makes updates later on much quicker.

These utility colors can be brought into any other component page as necessary — buttons, toasts, icons, etc.

The last bit of house-cleaning we needed to do was making sure when you opened a color override, you weren’t blasted with a huge list of colors. To remedy this, we simply sized those color rectangles in increments of 10, since the grouping of symbol overrides is based on size. For example, brand colors are 20px by 20px, utility colors are 30px by 30px, and so on. Now, when a designer wants to switch to a different icon color, they are only seeing the icon colors and not every other color in the Library.

Adding Icons

Every icon includes a color mark from our list of icon colors.

Remember that sizing things similarly makes them show up in the override menu together. With that in mind, we sized our icon colors the same so that when a designer goes to change a color, they are only seeing the colors available for icons.

One challenge we had was handling the three different sizes our icons come in. To get around this, we simply created three symbols each at their correct size with a default icon (our logo). Since we’re using a symbol, a designer can now just choose a different icon from the overrides panel — keep in mind you can resize an inserted symbol to your heart’s content without affecting what you see in the Overrides panel. With a lot of icons, it can get to be a pretty gnarly list, especially compared to the nicely categorized way of doing icons above. We don’t have a lot of cases where an icon is needed in anything other than size medium, so this workaround, uh, works for us.

The same symbol, just resized.

Adding Type

We ultimately decided to create symbols anyway. Designers can either use the textbox in the Overrides panel or just Detach From Symbol and edit the text as they normally would. And, as of Sketch v48, you can enlarge the textbox in the Overrides panel by increasing the amount of text in the symbol by default.

The amount of text in the symbol determines how large of a textbox you get in the overrides panel.

There’s one last thing we have to address with text and that’s colors. With our text, it’s already set in the component correctly. But what about a different environment, theming, or things like error states? For that, we are again relying on the sizing of the symbol to determine what shows up in the overrides. For something like a form label, we just ensure those particular text symbols are all the same size.

Different colored labels at the same size make it easy for our designers to pick among the allowable colors for something like form labels.

Adding Components

And that’s intentional since we want our symbols to be as close to a 1:1 match of our components as possible. To that end, we name the symbol overrides exactly how we name our component props in code. To make it even more clear to our designers these are component props, we even keep the names lowercase. Anything that’s not actually part of the component’s code(such as padding blocks which we’ll discuss below), we Title case. Keeping symbol overrides named identically to the component props is a great way to bridge that designer/developer discussion when it comes time to build out the interfaces.

When designers and developers talk, they should be using the same language. Our Sketch override naming matches the naming in the actual coded components.

Tips & Tricks

  • Make things easier for yourself and download the Sketch Symbol Organizer plugin. You can organize your symbols alphabetically and group things based on the name. Additionally, it’ll even space things out how you want. A big timesaver.
  • The order of your layers in your symbols matter. How they’re ordered in the symbol is how they’ll be ordered in the Overrides panel.
  • It’s worth repeating here for the millionth time that the size of your layers matter as well. Remember: that’s how things like backgrounds, type, icons, etc., can become grouped.
  • You’ll most likely have symbols your designers don’t really need, but are important to the makeup of your components. We decided to create a _Building Blocks menu item (the underscore keeps it anchored to the bottom) that acts a bit as a junk drawer. These items stay on the respective component’s page, but are named with the _Building Blocks prefix to ensure they all go under that menu item.
Prefixing items you don’t want to be shown, like we have with “_Building Blocks” here, ensures they’re all thrown into this junk drawer.
  • Sketch doesn’t currently handled nested symbol resizing very well. To get around this, we usually create what we call “spacing blocks”. An example of where this might be necessary is buttons; you drop in a button, give it more text than the default and suddenly the padding is out of whack. For this, we have a show/hide spacing block symbol that drops in semi-transparent “blocks”. The designer now just needs to resize the button until the blocks line up.
These blocks can be added to any component to reduce the guesswork when it comes to resizing.

Making It Available

One thing our Getting Started guide features is instructions on getting set up with Sketch Runner. While this goes a bit against our goal of being a one-stop shop, we find the benefits of using this plugin goes well beyond just using it with our library — it’s a really invaluable tool.

With Sketch Runner, you can quickly insert symbols just by typing their name, which for a lot of people is quite a bit faster than going through the menus. We recommended to our designers to turn off Fuzzy Search in the options and add the “_Building Blocks” to the ignored prefix in the Settings.

Here’s our recommended settings for Runner.

Since launch, we’ve received a lot of feedback on how much time has been saved by using the library. We’re looking forward to Sketch continuing to make improvements in the future to make it an even more impressive tool.



Behind the scenes of life at Hudl

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store