BlogDesign

Sketch symbols or ‘How to survive in an agile environment’

By November 13, 2018 No Comments

There are plenty of people who firmly believe that UX design processes do not fit well with the agile methodology, where change (even late in development) is something to be welcomed and not frowned upon. For designers, this very often means changing and scraping a whole bunch of work already done and being ready to start all over again.

Change is inevitable

If my previous experiences have taught me anything, it’s that things change. Everything we create and design should take into consideration that the clients’ needs and goals might, and almost certainly will, change. Unwillingness to accept this and revisit past decisions can lead to many problems in the long run. Being ready and able to adapt to these changes quickly is of utmost importance.

“Wait, you’re telling me I have to go through each and every screen and change just that one, small thing? It’s gonna take me ages!”.

Enter symbols

So, what exactly are symbols? In a nutshell, symbols are a means of easily reusing elements across your document (check out the process of creating basic building elements here). They make the entire design process faster, and more importantly, consistent. How do they work?

You create a “Master” symbol and then use its copies (called instances) wherever needed. When you make a change to a master symbol, all instances are automatically updated across your document. In addition, each instance can be customised with overrides. If you are familiar with object-oriented programming, you might find this familiar since it basically shares the same idea. ‘Master’ symbol is a class with different objects (instances) where each object can have its own attribute (override) specific to that object.

What this does is that it provides us with a powerful, fast and easy method of doing tedious tasks. By saving time, we are able to focus on more important things ultimately creating a more meaningful solution.

In the next few videos, I will try to demonstrate the power of symbols.

Video: Symbol overrides

In this video, I am using a symbol of a person card with multiple nested symbols inside of it (nesting symbols is basically inserting an already made symbol inside of a bigger one, thus creating a ‘component’). It is made up of a shadow element, container, card state and border as well as a button, different text elements, icons and star ratings.

We start by inserting the mentioned symbol and then, by using ‘Duplicate’ (one of Craft’s features), we can easily distribute as many items as we would like in both a vertical and horizontal direction.

After that, we can simply change each parameter inside of the symbol by using either Sketch’s or Craft’s “Data” features (in this case, we can generate different names, locations and profile images of each person with just a few clicks). In cases where you have different data examples (in my case, star ratings for each person), you can create separate symbols for each data point (1 star, 2 stars, 3 stars etc.) and then switch between them in order to create as realistic a case as possible.

Video: Master symbol changes and effects on overrides

In this video, I wanted to show how easy it is to change an entire screen filled with elements just by changing the master symbol. In this example, I changed the roundness of the profile image, location of each text element and location of star ratings inside of a card, and just like that, each instance changed automatically. Notice how overrides such as disabled card state remained the same.

Video: Changing text styles

Just as we are able to change certain parameters inside of a symbol, we can also change fonts. What I like to do is to create a separate page with all text styles laid out together. This way, if there is a need to, for example, change an entire font family for some reason, I can easily update each text style and the changes will be applied to an entire project. Easy as that.

In the latest Sketch update (52.1), we are able to override text styles directly inside of a symbol just as we would with other parameters.

Tips and Tricks

  1. Know when to create a symbol – Generally, you only want to use symbols when you know there will be lots of repeating elements on a screen. Rule of thumb – if there are 3+ of the same element, create a symbol.
  2. Keep your symbols organised – Whenever there is a bunch of symbols, you will want to organise them somehow. This can easily be done by using slashes (/). Try to figure out the best naming convention for your symbols and text styles, and stick to it!
  3. Keep track of your colour palette – Place all of your colours in a single place. Use ‘Document Colours’ option for the quickest and easiest way, or make colour symbols easy to navigate to. 
(See how to create a colour palette and other basic building blocks here).
  4. Use add-ons – There are plenty of different add-ons that you might find useful when using symbols. I already mentioned Craft which I highly recommend especially when working in a team. There is also Anima’s Auto-Layout, Automate and many others.
  5. After you finish your first symbols page and you feel that it has been neatly structured, you can try and create your own UI kit. I will talk more about this in the next section.

UI Kits

(even though you can find many free UI kits online, I suggest making your own because that way you can fully optimise it to best fit your design processes)

One of the services we offer at Atlantbh is a product concept design, where we as a team, in a short period of time (6 to 8 weeks), create high fidelity prototypes of a product and test it with the client. In order to work successfully in this manner, we need to act quick. This is where UI kits come into play (UI kits are collections of pre-made elements that are easily reused and changed depending on our needs).

Since we mostly use the same types of elements when designing, we can easily edit the main UI kit file by updating text styles, colour palette, dimensions of certain elements etc. which will lead to a brand-new look and feel of the project we’re starting to work on.

By working in this matter, we are able to deliver early prototypes to clients as fast as possible with only a basic brief and introduction from their side.

After the first testing is done, we can immediately start testing on real users and quickly gather their insights. Repeating this process (and changing stuff quickly by using symbols) eventually leads to satisfied clients and a working concept in a matter of weeks.

Shape of things to come

For years now, the role of designers in software development teams has been changing and gaining in importance. From making things look better, to making them feel better and ideally delightful and easy to use, it is undeniable that the general understanding of the designer’s role has come a long way.

With the emergence of new methods (such as object-oriented designing that I’m talking about here), the role is surely going to evolve even further, and with this comes greater responsibility and a need to further increase our technical knowledge on many subjects.

Making things look better is a thing of the past. Here’s to the future!