How to create a UI-kit in Sketch – a guide for perfectionists

A long time ago when I still wrote by hand I noticed that when I want to write a beautiful text – first lines come out straight and slender but in at the bottom of the page lines slide down, letters tilt and a half of the words are not finished properly.

The same thing happens to design mockups. First symbols and styles are clear and thoughtful but then some random elements appear in the project (just to see how they look) and stay there forever.

As a result, I found myself using excess symbols or diverse paddings and forgetting about text styles. Even such a young project as Speekify has these issues already.

– So why not make a UI-kit? – you'll say. 

Yes, why not? Let's figure out how to do it.

UI-kit in Sketch

For the record: if you do not really love order, if you are a spontaneous creative person, please forget about UI-kit. Close this page and go do something fascinating. I mean it. It's important to enjoy creating raws and columns of similar elements and have fun creating an elegant naming system.

The idea of UI-kit is to create basic elements, use them to build more complex elements and so on till you get all interface blocks you need. 

If we create a symbol using this method we can later override its components and get a huge number of variations without littering a "Symbols" page. E.g. let's create basic elements such as: 

– Color (red, green, blue…); 

– Text; 

– Icon (delete, edit, save…); 

– State (normal, hover, disabled)

… and combine a button symbol out of them.  

As a result, we have only 3 color symbols, 1 text symbol, 3 icons, 3 state and ONLY ONE button symbol. Using this we can create 27 different buttons.

And now the magic – if we add one more color symbol to the project, we'll automatically get an opportunity to create buttons using this color with any icons, text and state. Nothing else is required. We'll simply see a new color in the "Overrides" section.

But that's not all. After we added a new color symbol we can use it for any symbols that have an appropriate structure: icons, blocks, etc. 

To make an icon that can change a color, we have to use a color symbol in the icon structure and mask it with a vector shape of an icon. 

As a result, we have an icon symbol with a defined shape and can make as many instances of it as we want. And we can redefine a color of each icon instance separately. 

How to do all of this

I used a Marc Andrew's Cabana design-system description in 1 2 3 4 5 parts as an example.

It's important not to be lazy creating basic elements and to make all the text, shape and color styles and symbols. This is the most time-consuming part of work, everything else is a piece of cake.

And if you take care of a good naming and align elements accurately you'll feel a great esthetical pleasure :)

I won't retell you an instruction – it's pretty detailed. Instead, I'll focus on a few moments I had to figure out myself. E.g. author doesn't pay attention (or just doesn't tell about it) the system can be used as a library in Sketch or mockups can be exported to Zeplin.

Object-oriented design

If you are familiar with object-oriented programming you should have noticed that a system is based on pretty similar to classical inheritance approach. And it is a reason of system flexibility. 

If you are not familiar with it – don't worry, it's just a terminology. The important thing is that complex symbols are constructed of simple ones, the symbol is described only once and reused if possible. 

E.g. instead of designing a combo box from scratch and define all it's states we can say that combo box is a text input with an arrow icon and use a text input symbol we've already created. 

Naming

Marc Andrew made an awesome naming-system so I used it in my project practically without changing. Just look at how he named color symbols – not Red, Green and Blue but Primary, Secondary and Tertiary. You can easily change the hex index of colors and use these symbols in any project. The naming will remain actual.

It's important not to be lazy and properly define resizing parameters

I occasionally forget about it and feel silly when symbols resize improperly or distort. For UI-kit resizing parameters are crucial because symbols are universal and reused in many places. They should behave predictably.

Override elements sizes

In order to override one symbol with the other they should have exact the same size. E.g. if all your icons have the same size you can easily replace one of them with the other. 

The rule also works the other way around – semantically different elements should have different sizes in order not to confuse you when you try to find an element you need in the overrides section. 

I fall into this trap and made a shape, state and button symbols the same size. I just didn't think about it until I saw a huge number of shapes, states and buttons in the one override list. 

Using a file as a library in Sketch 

Any Sketch file with symbols can be used as a library. Just open "Preferences" menu – "Library" and press an "Add library" button.

After that, you'll see your file name in "Insert" menu and will be able to add symbols from it to your project. 

If you change a symbol in a library file, Sketch will notify you with a violet label in the right top corner and will suggest you update a symbol. Just be patient, Sketch shows a notification with a 10-15 seconds delay. 

Library and styles

Unfortunately, text and layer styles defined in a library file can't be used in a project. You can count only on symbols you created. 

That's why I created text symbols based on text styles. I took into account from the beginning they can be multi-lined and set resize parameters – attached text to the left, top and right borders of the symbol. 

Export to Zeplin 

If one wants to be known as a good designer he should take care of developers :) You have to make their life as easier as possible, in particular – let them download assets from Zeplin file with correct naming. 

E.g. it's a good rule to give an appropriate name to a vector mask layer in an icon symbol and make it exportable. 

In this case a developer can download assets from Zeplin with the right naming and won't waste his time renaming them and grumbling.

If we override an image inside the symbol, Zeplin doesn't always understand it correctly. Image looks good on the main screen, but from the sidebar you can download only default image asset.

In order to fix it – add a slice on top of the symbol in Sketch document and rename it as you want your image file to be named. Export to Zeplin. Voila!

What else we should do

And now it is time apply the new system to a project. IMHO it's better not to wait until all the system is finished but to replace symbols when they are ready and check how they are exported to Zeplin right away.

Something will definitely go wrong during the process – not clear naming, wrong sizes or restrictions. And it will be easy to fix it immediately rather than to remake all the system later.

That's all for now. If I find more interesting stuff about it – I'll write about it separately. I'll be glad if you find an article useful.

Originally the article was published here