How Sketch and Legos Can Kickstart Your Design System

Ananth Pai
Dec 1 · 5 min read

Here in the Product Design team at Hotstar, Sketch is our workhorse. Chances are that you use Sketch as much as we do.

To kickstart our design system, we recognized the need to make our Sketch files smarter and more semantic. We designers strive for consistency, and want our UI elements to look and behave consistently across our design.

Think of UI elements as Legos we can reuse to build interfaces. Legos are modular and repeatable — which are great for consistency.

Building Robust Legos

To build robust Legos, we need to make robust symbols. If your design uses a few symbols to fulfil many use cases, while making semantic sense, your symbols are robust.

Let’s make a robust symbol of the humble tray thumbnail.

Use Image Fills

Create a rectangular shape, and then apply an image fill. This lets you:

  • Replace images by overriding symbols.
  • Resize images without stretching (choose the “Fill” option in Display)
  • Have border radii without any extra fuss.
  • Add dark overlays and scrims without extra layers (click the “+” icon to create an additional fill)

Now, add other symbols within your symbol. If there’s an instance where you don’t need that particular symbol, you can remove it using an override.

Use Constraints

When you make a symbol with elements in it, add constraints to them so they’re 100% responsive.

Take the overflow menu icon on the top right. We want this icon to always be on the top right, no matter what.

The constraints will be:

  • It should always stay at a fixed distance from the top and right edge, so we pin to the top and right edge.
  • It should never get stretched, so we fix the height and width.

You can distort the instance all you want and the icon stays put. Your symbol is now totally responsive! Constraints work on groups, too.

Photo by HONG LIN on Unsplash

Putting Legos Together

Our basic Legos are now ready. Let’s take a new example to see how we can put these basic Legos together to make complex UI elements.

Let’s build a system of bottomsheet menus.

Settings menu

We want to make a bottomsheet menu using just one master symbol.

Create a Master Symbol

The master symbol holds the basic layout of the bottomsheet.

Let the base layer also function as a mask. This will let us reveal more action items as we increase the height of the symbol.

Create Action Item Legos

Menus need to support many kinds of action items. Let’s build a library.

These need to have the same height and width, else Sketch will not recognize them as potential overrides.

This is how a well stocked library should look:

Make Constraints

Every action item needs to be able to handle stretching. We pin them to the top, left, and right, while fixing their heights — their widths change predictably, but their heights do not.

Your Modular Master Bottomsheet is Ready!

It’s ready for anything you throw at it.

  • Change list items by overriding them
  • Replace icons with icons from your icon library
  • Resize vertically to add or remove more action items
  • Resize horizontally for a wider or narrower bottomsheet
Painlessly change list items
Painlessly resize bottomsheets

These were all derived from one modular master:

Naming Symbols

Name symbols in the format “Element Type / Variant / Variant”. This helps in two ways.

It Organizes Them in the Menu

This symbol is named “Thumbnail / Poster / Vertical”

It Organises Them in the Symbols Page

For this, you need the amazing Symbol Organizer. It sorts symbols by “/”. Want all thumbnails in one column? Let all the symbols names begin with “Thumbnail /”.

Naming Layers

Name and arrange symbol layers the right way and life gets easier for everyone, especially for other designers working with your file.

A layer’s name in the symbol will be its name in the Overrides menu. Their arrangement in the symbol will also reflect their order in the instance’s Overrides menu.

And That’s a Wrap!

We hope your Sketch workflow will make your work semantic, modular, repeatable, and consistent. You’ve now set the foundation of your design system.

Ananth Pai

Written by

Lifelong student of design and music · Product Design @ Hotstar

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade