In The Hudl
Published in

In The Hudl

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

  • 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.

Naming Symbols

Adding Color

We use our color symbols as the main building block for our other components.
These utility colors can be brought into any other component page as necessary — buttons, toasts, icons, etc.

Adding Icons

Every icon includes a color mark from our list of icon colors.
The same symbol, just resized.

Adding Type

The amount of text in the symbol determines how large of a textbox you get in the overrides panel.
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

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

Here’s our recommended settings for Runner.

--

--

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