Author: Maricar Morga

Everything that you need to know about Sketch and AI Powered Plugins

Have you heard about creating designs with code? You might think that this will not work, but it certainly does. You might even believe that this will be as hard as climbing a very rocky slope mountain with nothing to hold on to until you feel yourself falling. Isn’t it hard? But it is not. Working with codes to make a design is possible once you’ve started working with Sketch. Now with AI-powered plugins, you can incorporate with Sketch, it will become easier. 

What Is Sketch? 

Sketch, a vector graphics editor for macOS created by the Dutch company Bohemian Coding, is mainly a design kit that lets you build your best work using codes and scripts. It is a professional design software for macOS that uses a full vector workflow. The app can be used by anyone, from website designers, UX and UI designers or by just someone who wants a vector for his personal use. The interface is easy, and it is hard for you to get lost. It was developed a few years ago and aimed to provide a lightweight and responsive tool kit for creatives. 

Sketch is growing immensely in recent years, and many designers have been using it and testifying of its efficiency

Advantages Of Using Sketch

Considered by some as the game-changer in the design industry, there had been notable advantages of the software. 

  • Time Saver – Sketch comes in with handy pre-made templates that make work incredibly fast and shorten processes. Given the underwhelming number of tools, designers have noted that it made their task easier and allowed them to work with large files. Even saving your work has been quite easy and fast with Sketch.
  • Simplicity – Its interface is simple, and it has automatic guides. It focuses on the design and not on the technical aspect.
  • Resizing Capabilities – This feature has been one of the rages from designers who are working with Sketch. You can work in any size and export it into multiples sizes. 
  • Multiples Pages You Can Work On – You can organize your files and artboards the way you want it. 

AI-Powered Plugin In Sketch 

Probably one of the greatest things you’ll encounter in Sketch is its widespread availability of plugins. Whether you use plugins to make your animations incredible or you want to add some visualizations on your project, you can have broad access to plugins, thanks also to the astonishing community building it. Considered as a designer’s best friend, a plugin for Sketch are essentials in the design process. It is also growing in numbers day by day.

Artificial intelligence is the ability of a computer to simulate human intelligence without any human interaction. For this reason, many software has been using AI-powered plugins to provide better experiences for users. 

Since relatively new in the market, this feature is yet to gain momentum in Sketch. However, you can easily create an AI-powered plugin in Sketch. 

How To Come Up With An AI-powered Plugin For Sketch

Matthew Dutour made a now-infamous detailed instruction (along with the codes and script) of creating an AI-powered plugin for Sketch determining an image if it is a hotdog or if it is not. According to him, you will need two things to create an AI-powered plugin. One of which is a classifier and a Sketch plugin which will utilize the classifier. 

These are the essential steps you need to follow to make your AI-powered plugin: 

Create And Train The Classifier

A classifier is a system that can identify an item to which set it belongs to,  using a string of samples it has been fed. These samples are the images that your classifier can rely on to classify whatever you want to identify. In the case of Dutour, it was hotdogs. He downloaded two (2) sets of images – one set containing all possible kinds of hotdogs while the other is just another set of random things. 

After downloading the images, it was stored into two separate folders named base on its classification, e.g. hotdog and not_hotdog. At this point, if you’re following the steps of Dutour, you can now start building the model or training your classifier. Leverage on software like Turi Creates to help you do this. 

Using this tool, you build your model by creating a Python script and uploading your two sets of images. You can then ask the tool to pull a UI to check on your dataset. The key takeaway here is that you need to check how your classifier is doing by tweaking the number of iterations to test its accuracy.

Make A Sketch Plugin

The next step after you are done with your classifier is to make a Sketch plugin that will use it. You can also use software like skpm to create the plugin and should appear in no time to the Plugin menu in Sketch. 

You have to note, however, that you need to put your classifier where the plugin can easily access it. You can do this by opening a new document in Sketch and moving all of your models on this so the plugin can have access to it. After doing so, you need to run the command, npm run watch in your terminal. 

Sketch Document Interaction

Once you are all set to start, you need to create first a Sketch document, insert an image and then select the picture again. Then you have to interact with it by determining if it is an image layer by grabbing hold of the layer in the user’s selection. 

Use of macOS Framework

Since Sketch is a native macOS application, you need to find a plugin that has access to its framework. The plugin you’ll be needing for is Vision as recommended by Dutour. Load it in your plugin, load the classifier you have created and get your model. Don’t forget to “request handler” that will get the image analysis you made and apply it on your image. For the last step, run your classifier and get the result you need.

Final Thoughts

As more and more companies are now turning to Sketch to complete their task, it is expected to grow more in the coming days. Sketch is a game-changer, and it is taking a massive leap against its competitors. It offers a simple and easy way to design things that eradicates the long-dreaded processes and commands that can be now done with just a tap of a simple button. 

As Artificial Intelligence is now becoming part of many industries, we can say that AI and machine learning can make an excellent tool for designs as well. It is becoming mainstream nowadays and helps boost creativity among designers. 

The future is bright for Sketch with its efficiency and with AI becoming a part of it, it will set the bar high for everybody and as Dutour said it, more than hotdogs of course.