Sept 2018

Developing Sketch Plugins

Translator

At Zomato we design our app and website for audience in 23 countries. A small part of this challenge is to design the app for different languages. However, most of us ended up designing our mocks in English only. This would later on lead to the design breaking during the development period.

image

On talking to some of my fellow designers, I understood the reason why they were apprehensive about making designs in different languages was because they did not have access to the translated strings and had minute knowledge of the languages itself.

To solve this problem I made a plugin which translates commonly used words in our app in to the languages in which our app is consumed, right in Sketch. The design team can now be mindful about constructing UI in a way which is more inclusive of these languages.

Translating strings in Sketch

Iconator

Another plugin that I made for the design team at Zomato was to streamline our process to create icons. We previously used icomoon.io to create a font file from our SVG icons. However, this process was lengthy and error prone.

Creating icon font files was long and error prone
Creating icon font files was long and error prone

What we wanted to achieve

Speeding the process for both designers and developers
Speeding the process for both designers and developers

I ended up dividing the solution in two phases:

  • Phase 1: Create icon font file from an icon library created right from sketch.
  • Phase 2: Push the icon font file to the app and website repository and create a pull request.

Phase 1 of the project is live now and is being actively used in our icon file generating process. The phase 2 is work under progress.

Generating an icon font file in sketch

Swappr 🔄

Another plugin to quickly swap layer positions and styles. Really amazed how all modern design tools completely ignore this functionality, when it is so widely used!

Swapping layer positions and styles

These were some of the ways I super charge my and the Zomato design team’s design process. In case you have feedback on how I can improve these plugins, or have some ideas for new ones, hit me up on twitter.