I am using Sketch.app to store text and images for my app, not unlike a database. Why is this strange? Because Sketch is a graphics design application. In this article, I will tell you how and why I do this.
But first, some background!
I am learning a new language, and while I am doing this I am creating an application. Partly to keep me entertained (building apps is fun!) but also because I could only find ugly and seemingly uncared for apps on the App Store.
I found that to be productive both in learning as well as getting my notes into my app, I needed a little friction as possible between writing my notes/lessons to getting them into the app. After few different setups I found that the ease of using Sketch for writing combined with the ease of creating images/annotations/visual help was perfectly suitable to my needs. Combine that with the ability to write plugins and I had my solution in a day or two.
This is the end result, I’ll show you how I do it in a second.
I write my notes and lay them out in Sketch, then I press one button to export it into an XML document that my app can read. I export it directly into the Xcode project folder so that when I press to build and play, all my notes are there along with the images.
It allows me to get a great visual overview of the data, which happens to be almost exactly as it will appear within the app. It almost becomes WYSIWYG representation. This is my current Sketch file filled with metadata, images and text.
I can instantly create images by grouping layers and creating a slice layer around it. This allows me to basically create image inline within my “data”. I don’t need to export/merge the text and images seperately within different apps. This is the key annoyance I had with other ways to manage my data.
Take the following image, I needed to put some text above/below some other text and with this technique all I needed to do was to manually layout it and wrap it in a group. It will then automatically create an image from this. If I need to modify the image, all I need to do is to change the items and the image will be updated - zero friction.
From Sketch to XML
With a simple Sketch plugin that I wrote. Here’s the full script in its current form. I won’t go into any details here, you can read the script itsef.
The gist of the scripts is that it goes through all artboards, and all its layers, and depending of the type of the layer - it will write a certain flavour of XML into a file. For example, to generate a title we would look for the layer type
MSTextLayer with the layer name
title. Then we would write something like this.
And for an image, it would look for a layer with the type
MSSliceLayer. Then it would use Sketch built in image extractor methods to save the image and also write into our file something like this.
I also use a special group named
metadata in each artboard where I simply add metadata that might become useful. It simply looks at the layer name, adds that as a key then adds the layer content as the value. It can look something like this.
And the data it generates would be like this.
These are items in the XML that the app will read and use to determine what to display. For example this data will be displayed as a vertical list, which means the app will call the code that builds the vertical style objects.
Is this a good idea?
For me, right now, it certainly have lifted a lot of annoying text/image editing I fought with when I began on the app. But I am not sure I would recommend it to anyone that isn’t in my almost exact situation.