image made by Mind Studios' Lead Interface Designer Arsentiy
Design is not a profession - it is the way of thinking, living and breathing. And it used to be ever more complex than it is now - in the “before Sketch era”. But a few years ago Sketch was delivered, and turned all the designers to take on the “vector” course in their work. What’s so good about Sketch? What are those Sketch symbols? As well a how to make custom Symbols in Sketch - these matters are going to be highlighted in this article, from the expertise we in Mind Studios obtain.
It’s a Steal.
Sketch was founded 7 years ago, back in the far away 2010, by a Dutch company Bohemian Coding, yet we are so grateful to those who made this witty tool. The first glory and credits didn’t take long to arrive (although it didn’t yet have creating symbols features) - in 2012 Sketch won its first award, the Apple Design Award. Since that time, and during the course of 6 years it has continued to evolve with every upcoming update and plugin, and the most recent version of 46.2 has plenty of enhancements (like Sketch Cloud file sharing, Text Alignment and Searchable Help Topics, showing relevant articles from Sketch app online documentation, along with updated Sketch symbols library).
[Source: Sketchapp]
Nowadays, the amount of happy SketchApp users has exceeded 500k. Why do designers stick to Sketch app? Having made my own survey and having read a dozen Sketch-app reviews, I’ve drawn a few facts supported by the best practices claim:
-
Sketch is 100% vector-based tool, which makes adapting your design to different retina/non-retina screen sizes a lot easier.
-
Designs made in Sketch are the so-called “frontend-friendly”, which means all the in-design properties/entities/symbols are available on CSS.
-
Sketch has a convenient way of exporting assets, with a feature of “Export All” - unlike the troublesome Photoshop exportation.
-
Sketch has a wide variety of dandy plugins to choose from that help you integrate data into your design.
-
Sketch allows to create color symbols and edit them afterwards
The most-related to Sketch words I had a pleasure to bump into were “flexible”, “easy” and “3-in-1 app”, which prove that the huge part of the market is already occupied by this iOS-based app.
Apart from cool plugins, it also has a lot of handy tools and elements, one of which is symbols - the creation of new customized ones and the editing symbols option.
Symbolism in Sketch.
Any navigation element (an icon, a text field, vidgets etc.) is either an element of control, or an interaction element. More to this, in Sketch every element can be set up in a flexible way. And every element has overrides sketch symbols, which can be of two types: the parent and daugherty ones; if all the nested symbols are put together, the parent symbol inherits all the features the daugherty ones have. Thanks to this feature you can now create Sketch app nested symbols & custom symbols (as in Material Design), the interface’ components e. g. icons, button symbols.
A button would be a great example of Sketch custom symbols, as it has a number of parameters that could be changed at once - from the text style and up to the button’s state. While making nested symbols we can play with buttons, with their forms, colors, states (on/off), depending on the needs we are willing to fulfill. Let’s create a separate Sketch-file from square one.
If you dig deeper, each symbol is a combination of a few more nested symbols, and counting on the degree of the embedded symbols that are there you can see the parameters of an element. For instance, a text symbol could be active or turned off, of a different color, and so on with different parameters. All of this contributes into a general term of button structure.
Brick By Brick.
On top of that, we can add up an icon is a symbol (you use one to load icons). Every icon is a number of automatically-organized symbols, located in a certain folder; this helps us to extract the icons we need for every specific style. As they have a certain degree of name embedding, we can simply call for it and extract all the icons attached, as well as the button’s container.
An in-button container is a symbol with 3 parameters: state, shape and color. It stands for a set full of button’s states, forms and colors; button fill (state and color), so, generally speaking, it shapes the button. Container is also impossible without a mask layer that frames all of those elements.
The in-button shape mask is a vector form, and when we apply mask for our element, another container is created, with the same shape, color and state as the first one had.
The Paradox of Nesting.
“Nested Sketch symbols could be called a controversial tool; they simplify and complicate your designer’s life at the same time.”
Once you insert a symbol from library of nested symbol overrides, you add some insights to it (state, color, shape, fill) and save it the way it is now. The possibilities are endless - you can go on creating icon symbols as many as your creativity lets. So many Sketch nested symbols overrides are there, so many degrees that your button could literally remind of an all-dressed-up Christmas tree.
Nested overrides in Sketch could be called a controversial tool; they simplify and complicate your designer’s life at the same time. The complications start when you create a multi-optional component, as you get to follow the logic and the precise nested symbols’ structure. Not all of the Sketch symbols will be required on each of the project’s you get to work on, so you need to be picky at times.
Once you learn how to create, structure and update a symbol in Sketch it makes your life easier though. Once you create a flexible element, you can rapidly create and update symbols for every upcoming project, getting rid of necessity to call for the overrides page. Time is golden as they say, and custom nested symbols option is definitely less time-consuming than every element re-creation from scratch will be!
Customized symbols could be used for both web and mobile, depending on the requirements and your own willingness. If the product is bound to stay on one OS only, then your Sketch-symbolism could be focused on some specific types; and as we concentrate on the specific style guide, then, consequently, we save a lot of precious time.
Final Word
Here is it, the Sketch nested symbols creation tutorial. Despite being only a MacOS application, Sketch has already conquered the love of many individuals worldwide. Why? Because it is nimble, it’s simple and it has a sharp targeting; it doesn’t aim to acquire all the designers’ base worldwide, it is aimed for UI/UX specialists. Moreover, with the bonbons it has to offer (nested symbols, overrides, shapes and forms etc.) the application’s experience decreases significantly. Though, a fresh update is already on it’s way (since the last one saw the world more than a month ago), to make our designers’ lives better and more enjoyable!
Written by Vlad Tyzun and Elina Bessarabova.
