April 2, 2018

How I created a UI-kit in Sketch

Olga Shavrina
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 and 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 thinking about an elegance of a 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.
A button symbol structure
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.
Symbols on the left and resulted objects on the right
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.
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.
A structure of an icon that can change its color
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 like it so much when everything is aligned :)
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.
Combo box is made of input and an arrow icon
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.
Color symbols naming
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.
Don't forget to set resizing parameters
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.
Similar elements should have the same sizes and vice versa
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.
Adding a library in Sketch
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.
A project with a library
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.
Text symbols in UI-kit file
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.
Set the name to an icon vector mask layer 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.
Let's make developers' live as easy as we can
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.
Zeplin doesn't understand overrided images properly
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!
Using slices to fix a problem with overrides in Zeplin
What else we should do
And now it is time to 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.
Olga Shavrina
Product designer
Made on
Tilda