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.
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.
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.
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:
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
These were all derived from one modular master:
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 /”.
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.